JavaScript DHTML/jQuery/show
Содержание
<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>
<p style="display:none">Hello</p>
</body>
</html>
Open div tag based dialog
<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" />
<div id="myDialog">
<p>
Dialog content
</p>
<div id="tmpButtons">
<input type="submit" id="tmpClose" value="Close" />
</div>
</div>
</body>
</html>
Pass arguments.callee to show function
<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>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</body>
</html>
Show fast
<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>
<p style="display:none">Hello</p>
</body>
</html>
<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>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>
<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>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>
<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>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span></span>
</body>
</html>
Show in millisecond
<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>
<p style="display:none">Hello</p>
</body>
</html>
Show normal
<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>
<p style="display:none">Hello</p>
</body>
</html>
Shows all paragraphs.
<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>
<p style="display:none">Hello</p>
</body>
</html>