jquery仿jquery mobile的select控件效果

不说废话。直接上代码
//仿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="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="0px"></span>");
		$("#on" + _id).css("width","82px");
	}
	$("#on" + _id).click(function(){
		$("#on" + _id).animate({"0px"},100);
		$("#off" + _id).animate({"82px"},100);
		$("#" + _id).val(Value);
	});
	$("#off" + _id).click(function(){
		$("#on" + _id).animate({"82px"},100);
		$("#off" + _id).animate({"0px"},100);
		$("#" + _id).val(selectvalue);
	});
}

用法:

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



 

原文地址:https://www.cnblogs.com/wzjhoutai/p/7278665.html