仿jquery mobile中的select控件效果

来源：互联网发布：手机和车互联软件编辑：程序博客网时间：2024/05/21 06:24

不说废话，直接上代码，最好将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>

0 0