不说废话。直接上代码
//仿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. Linux下inotify的基本使用及注意事项

    最近在写一个云备份的项目,其中有一个模块是要监控计算机本地的文件,于是我翻了翻linux/unix系统编程手册发现了inotify这个用于文件监控的框架 1.概述 1)inotify机制可用于监控文件 ...

  2. Firefox的缓存问题

    使用Firefox调试代码时,JS或CSS文件修改后,怎么刷新都不生效.原来是Firefox缓存的问题.但Firefox没有像IE一样有个每次读取最新的设置. 设置Firefox不缓存页面: 新建标签 ...

  3. 在Windows Server 2008 R2上安装Exchange 2013过程中遇到的一些问题

    笔者对Exchange经验非常有限, 但也正因为如此, 这里分享的东西对从没接触过Exchange的朋友会有更多的帮助吧, 至少希望如此.   1. Exchange 2013的安装需要.net fr ...

  4. app store 注册账号生成证书上传app完整的教程

    app store为开发者提供四种类型的申请: 个人ios开发者计划$99/年 公司ios开发者计划$99/年 企业ios开发者计划$299/年 高校ios开发者计划免费 在这里主要介绍一下公司ios ...

  5. idea下一次Jar包依赖问题的解决过程

    项目导入后有几个类显示没找到依赖类. 第一步,定位到该类所在的jar包:pom文件没有报错,所以这应该是一个jar包版本问题,通过import路劲大概确定了jar包,我本地这个jar包一共有两个版本, ...

  6. Unity5.1 新的网络引擎UNET(九) UNET 官方推荐视频教程

    孙广东  2015.7.14 在新的网络引擎出现之前,Unity提供的是 内置 Raknet网络引擎, 这一次Unity想更新UGUI一样,花了大的手笔更新了, UNET. 原来的旧的网络组件 被提示 ...

  7. java集合Collection接口

    collection集合 Map集合 Hashtable和HashMap的区别: Hashtable的方法是同步的,而HashMap的方法不是.HashMap可以将空值作为一个表的条目的key或val ...

  8. unable to connect to ssl://gateway.sandbox.push.apple.com:2195 错误

    使用APNS 搭建苹果推送服务器错误:unable to connect to ssl://gateway.sandbox.push.apple.com:2195 错误 1:检查你的服务器的端口 21 ...

  9. iOS_Xcode怎样准确定位到产生异常的出错代码

    当应用程序出现异常而导致崩溃时, 可能光标仅仅提示异常出如今主函数代码处,例如以下图所看到的: 这样的情况下.即使看了日志. 也可能仍不清楚详细是哪一句代码产生了异常. 因此,须要手动设置异常断点. ...

  10. Patterns-Flyweight

    最近在组里讨论设计模式,第一个是享元模式. 自己贴了一篇这个文章:http://www.cnblogs.com/rush/archive/2011/10/01/2197785.html 感觉这篇讲的不 ...