不说废话。直接上代码
//仿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. web.xml文件的作用及基本配置

    Java的web工程中的web.xml文件有什么作用呢?它是每个web工程都必须的吗? 一个web中完全可以没有web.xml文件,也就是说,web.xml文件并不是web工程必须的. 那什么时候需要 ...

  2. Bayesian statistics

    文件夹 1Bayesian model selection贝叶斯模型选择 1奥卡姆剃刀Occams razor原理 2Computing the marginal likelihood evidenc ...

  3. IOS APP 上传到AppStore

    由于第一次接触要把 app 上传到 AppStore 比较棘手,很多地方不懂,研究了 大半天 终于给上传成功了,现在坐等审核吧,首先把上传到AppStore的流程 整理下 : 第一 :准备证书 (要确 ...

  4. 转: android sdk for mac

    转:http://www.cnblogs.com/yjmyzz/p/4219829.html 众所周知的原因,google的很多网站在国内无法访问,苦逼了一堆天朝程序员,下是在mac本上折腾andro ...

  5. [Algorithm] Fibonacci problem by using Dynamic programming

    vThere are three ways to solve Fibonacci problem Recursion Memoize Bottom-up 'First Recursion approa ...

  6. [Functional Programming ADT] Adapt Redux Actions/Reducers for Use with the State ADT

    By using the State ADT to define how our application state transitions over time, we clear up the ne ...

  7. java实现快速排序算法

    1.算法概念. 快速排序(Quicksort)是对冒泡排序的一种改进.由C. A. R. Hoare在1962年提出.2.算法思想. 通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据 ...

  8. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何在程序中添加注释

    在TwinCAT2中,(*中间输入注释*),也可以用这种方法批量注释,在TwinCAT3中,使用//即可     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youk ...

  9. jQuery中,实现css格式的改变

    jQuery中,实现属性值的改变 (1)prop属性实现,html中标签的class属性值发生改变: 语法:$(元素标识).prop("class",类属性值); 例子:$(&qu ...

  10. 【Firefly API文档】—— Package Distributed

    http://bbs.gameres.com/forum.php?mod=viewthread&tid=219654 package distributed 这个包中主要封装了各个服务进程间进 ...