不说废话。直接上代码
//仿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仿jquery mobile的select控件效果的更多相关文章

  1. jquery去重复 如何去除select控件重复的option

    #1.去除select控件重复的option <select id="companyId" onchange="getContract()" name=& ...

  2. 基于jquery的可查询多级select控件(可记录历史选择)

    一.功能和使用 公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个   控件功能:1.可手动输入查询,也可点击下拉框查询, ...

  3. jQuery:实现两个<select>控件的互移操作

    一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  4. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  5. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  6. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

  7. Jquery+json绑定带层次下拉框(select控件)

    一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...

  8. jquery mobiscroll移动端日期选择控件(无乱码)

    jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...

  9. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

随机推荐

  1. 微软对外披露两个0day漏洞详情

    微软近日对外披露了两个0day漏洞详情,其中一个漏洞存在Adobe阅读器中,可被利用导致任意代码执行:另一个漏洞则允许任意代码在Windows kernel内存中提权执行. 微软称由于该漏洞利用目前还 ...

  2. GPU bubbles

    https://software.intel.com/en-us/articles/performance-analysis-and-optimization-for-pc-based-vr-appl ...

  3. 理解Vue的计算属性

    计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...

  4. 使用虚拟机运行Ubuntu时,主机与宿主机共享文件的方法。

    简介: 首先设置虚拟机: 虚拟机 -> 设置-> Hardware -> Network Adapter,在网络连接处设置为 “桥接:直接连接到物理网络”,“NAT:使用已共享的主机 ...

  5. C#动态调用webservice方法

    摘 自: http://www.hao5191.cn/a/chengxukaifa/c_/20130109/115819.html using System; using System.Collect ...

  6. Java笔记17:导出可执行jar包

    这里介绍Java程序的两种导出可执行jar包的方式,一种是图形界面打包,另一种是命令行打包. 一.图形界面打包 1 建立名为JarDemo的JavaProject,在src目录下建立com.abc的P ...

  7. RocketMQ 拉取消息-文件获取

    看完了上一篇的<RocketMQ 拉取消息-通信模块>,请求进入PullMessageProcessor中,接着 PullMessageProcessor.processRequest(f ...

  8. 转: iOS崩溃堆栈符号表使用与用途

    转:http://bugly.qq.com/blog/?p=119 iOS崩溃堆栈符号化,定位问题分分钟搞定! 2015.3.16 腾讯Bugly 微信分享   最近一段时间,在跟开发者沟通过程中,萝 ...

  9. JavaScript,JS如何控制input输入字符限制

    ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9" > 只能是中文& ...

  10. ffmpeg相关资源

    FFPLAY的原理(一) http://blog.csdn.net/shenbin1430/article/details/4291893 ubuntu12.04下命令安装ffplay等: sudo ...