码迷,mamicode.com
首页 > Web开发 > 详细

仿jquery mobile中的select控件效果

时间:2014-06-22 22:45:45      阅读:346      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   ext   

不说废话,直接上代码,最好将on.png和off.png也使用jquery mobile里的图片
//仿jQuery mobile Select控件
//用法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值
function SelectBox(box,_id,selectvalue,Value)
{
	if(Value != selectvalue)
	{
		$("#" + box).html("<input type=hidden value='" + Value + "' id='" + _id + "'><span id=\"on" + _id + "\" class=\"on\" style=\"width:0px\"></span><span id=\"off" + _id + "\" class=\"off\"></span>");
		$("#off" + _id).css("width","82px");
	}
	else
	{
		$("#" + box).html("<input type=hidden value='" + Value + "' id='" + _id + "'><span id=\"on" + _id + "\" class=\"on\"></span><span id=\"off" + _id + "\" class=\"off\" style=\"width:0px\"></span>");
		$("#on" + _id).css("width","82px");
	}
	$("#on" + _id).click(function(){
		$("#on" + _id).animate({width:"0px"},100);
		$("#off" + _id).animate({width:"82px"},100);
		$("#" + _id).val(Value);
	});
	$("#off" + _id).click(function(){
		$("#on" + _id).animate({width:"82px"},100);
		$("#off" + _id).animate({width:"0px"},100);
		$("#" + _id).val(selectvalue);
	});
}

 

使用方法:

 

<span id="q"></span>
<script type="text/javascript">
CheckBox("q","a",1,0);
</script>



 

仿jquery mobile中的select控件效果,布布扣,bubuko.com

仿jquery mobile中的select控件效果

标签:style   class   blog   code   java   ext   

原文地址:http://blog.csdn.net/robake/article/details/32147835

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!