不说废话。直接上代码
//仿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中实现多网卡的绑定 介绍常见的7种Bond模式

    网卡bond是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡.在应用部署中是一种常用的技术,我们公司基本所有的项目相关服务器都做了bond,这里总结整理,以便待查. bond ...

  2. scrapy中ROBOTSTXT_OBEY = True的相关说明

    在scrapy中创建项目以后,在settings文件中有这样的一条默认开启的语句: # Obey robots.txt rules ROBOTSTXT_OBEY = True 观察代码可以发现,默认为 ...

  3. 试用cocos2dx 3.1.1

    最终有时间,開始全力投入cocos2dx开发了.之前也积累了不少.只是都是基于2.2.2的,3.1.1的版本号也出来一段时间,应该算是成熟了,今天就试试.一个最大的变化就是不须要cygwin了,直接使 ...

  4. PHP上传文件代码练习2 (重复文章)

    表单: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  5. escape(s, t)函数的实现

    https://item.taobao.com/item.htm? spm=686.1000925.0.0.9TTLHO&id=535006878999 <span style=&quo ...

  6. Hibernate开发环境搭建

    一.下载Hibernate包的下载 官网地址:http://hibernate.org/orm/ 下载版本:hibernate-release-4.3.11.Final 二.Hibernate jar ...

  7. 【转】Spring的中IoC及AOP

    1. Spring介绍 Spring是轻量级的J2EE应用程序框架.Spring的核心是个轻量级容器(container),实现了IoC(Inversion of Control)模式的容器,Spri ...

  8. 算法笔记_065:分治法求逆序对(Java)

    目录 1 问题描述 2 解决方案 2.1 蛮力法 2.2 分治法(归并排序)   1 问题描述 给定一个随机数数组,求取这个数组中的逆序对总个数.要求时间效率尽可能高. 那么,何为逆序对? 引用自百度 ...

  9. js 判断是否是IE浏览器及ie版本

      方式一:只判断是否是ie浏览器 /** * 判断是否是IE浏览器,支持IE6-IE11 */ function isIE() { //ie? if (!!window.ActiveXObject ...

  10. 每秒处理3百万请求的Web集群搭建-如何生成每秒百万级别的 HTTP 请求?

    本文是构建能够每秒处理 3 百万请求的高性能 Web 集群系列文章的第一篇.它记录了我使用负载生成器工具的一些经历,希望它能帮助每一个像我一样不得不使用这些工具的人节省时间. 负载生成器是一些生成用于 ...