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