JavaScript DHTML/jQuery/show
Содержание
<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>
</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>
</body>
</html>
</source>
<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>
<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>
<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!
<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>
</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>
</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>
</body>
</html>
</source>