JavaScript DHTML/jQuery/show

Материал из Web эксперт
Перейти к: навигация, поиск

Display if hidden

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
       
            $("p").show()


       });
   </script>
 </head>
 <body>
   <body>

Hello

   </body>

</html>



 </source>
   
  


Open div tag based dialog

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("input#tmpOpen").click(
     function($e) {
       $("div#myDialog").show(5000);
     }
   );
   
   $("input#tmpClose").click(
     function($e) {      
       $("div#myDialog").hide(5000);
     }
   );
 }

);

   </script>
   <style type="text/css">

div#myDialog {

   display: none;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 200px;
   margin: -101px 0 0 -251px;    
   border: 1px solid rgb(128, 128, 128);

} div#tmpButtons {

   position: absolute;
   bottom: 5px;
   right: 5px;

}

   </style>
 </head>
 <body>
    <input type="submit" id="tmpOpen" value="Open" />

Dialog content

        <input type="submit" id="tmpClose" value="Close" />
 </body>

</html>

 </source>
   
  


Pass arguments.callee to show function

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("#showHandler").click(function () {
             $("div:eq(0)").show("fast", function () {
               $(this).next().show("fast", arguments.callee); 
             });
           });
           $("#hideHandler").click(function () {
             $("div").hide(2000);
           });
       });
   </script>
 </head>
 <body>
   <body>
     <button id="showHandler">Show</button>
     <button id="hideHandler">Hide</button>
   
A
B
C
D
   </body>

</html>


 </source>
   
  


Show fast

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
       
            $("p").show("fast")


       });
   </script>
 </head>
 <body>
   <body>

Hello

   </body>

</html>



 </source>
   
  


Show hidden fast

   <source lang="html4strict">
    

<html>

 <head>
   <style>
     div { width:50px; height:40px; margin: 5px; float:left;background:red; }
   </style>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
         $("button").click(function () {
            $("div:hidden").show("fast");
         });
   });
   </script>
 </head>
 <body>
     <button>Show</button>
 </body>

</html>




 </source>
   
  


Show hidden slow

   <source lang="html4strict">
    

<html>

 <head>
   <style>
     div { width:50px; height:40px; margin: 5px; float:left;background:red; }
   </style>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
         $("button").click(function () {
            $("div:hidden").show("slow");
         });
   });
   </script>
 </head>
 <body>
     <button>Show</button>
 </body>

</html>



 </source>
   
  


Show hidden tags

   <source lang="html4strict">
    

<html>

 <head>
   <style>
     .test{ border: 1px solid red; }
   </style>
 
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
          $("div:hidden").show(3000);
   });
   </script>
 </head>
 <body>
     
Hider!
Hider!
       <form>
           <input type="hidden" />
           <input type="hidden" />
           <input type="hidden" />
       </form>
       
 </body>

</html>




 </source>
   
  


Show in millisecond

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
       
            $("p").show(2000)


       });
   </script>
 </head>
 <body>
   <body>

Hello

   </body>

</html>



 </source>
   
  


Show normal

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
       
            $("p").show("normal")


       });
   </script>
 </head>
 <body>
   <body>

Hello

   </body>

</html>



 </source>
   
  


Shows all paragraphs.

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           
           $("p").show()
       });
   </script>
 </head>
 <body>
   <body>

Hello

   </body>

</html>


 </source>