jquery

最新推荐文章于 2023-07-07 14:28:52 发布

guhan123456

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量65

点赞数

文章标签： jQuery XHTML HTML ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="file:///D|/xampp/htdocs/homenas_TI/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
;(function($){
$.fn.btSlideDown = function(speed){
speed = speed || "slow";
var height = $(this).height();
$(this).data("show",false).animate({"bottom":"-="+height}, speed);
}
$.fn.btSlideUp = function(speed){
speed = speed || "slow";
var height = $(this).height();
$(this).data("show",true).animate({"bottom":"+="+height}, speed);
}
$.fn.btSlideToggle = function(speed){
speed = speed || "slow";
var show = $(this).data("show");
if(typeof show == "undefined") show = true;
if(show) $(this).btSlideDown(speed);
else $(this).btSlideUp(speed);
}
})(jQuery);

$(document).ready(
function(){
//radio
$(".radio").click(
function(){
$(".radio ~ input").val("0")
$(".radio").removeClass("hover");
$(this).addClass("hover").next("input:first").val("1");

}
);

//checkbox
$(".check").click(
function(){
var val = $(this).next("input:first").val();
$(this).toggleClass("hover").next("input:first").val(val === "0" ? "1" : "0");
}
);

//toggle
$("#btn_slide").click(
function(){
$(".head").slideToggle(400);
$(".foot").btSlideToggle(400);
}
);
}
);
</script>
<style type="text/css">
.radio,.check{display:block; width:20px; height:20px; text-indent:-999px; border:1px solid #333;}
.radio{background:#666;}
.check{background:#000;}
.radio.hover{background:#0f0;}
.check.hover{background:#f00;}
</style>
</head>

<body>
<h1>radio 按钮三态</h1>
<a class="radio hover" href="#">radio</a>
<input type="text" value="1" /><br/>

<a class="radio" href="#">radio</a>
<input type="text" value="0" /><br/>

<a class="radio" href="#">radio</a>
<input type="text" value="0" /><br/><br/>
<h1>checkbox 按钮三态</h1>
<a class="check" href="#">check</a>
<input type="text" value="0" /><br/>

<a class="check" href="#">check</a>
<input type="text" value="0" /><br/>

<a class="check" href="#">check</a>
<input type="text" value="0" /><br/>
<h1>上下slide</h1><a id="btn_slide" href="#">slide</a>
<div style="overflow:hidden; position:relative; width:500px; height:150px;">
<div class="head" style="height:50px; position:absolute; top:0; background:#333; width:100%;"></div>
<div class="foot" style="height:50px; position:absolute; bottom:0; background:#f00; width:100%;"></div>
</div>
</body>
</html>