jquery仿jquery mobile的select控件效果
不说废话。直接上代码
//仿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控件效果的更多相关文章
- jquery去重复 如何去除select控件重复的option
#1.去除select控件重复的option <select id="companyId" onchange="getContract()" name=& ...
- 基于jquery的可查询多级select控件(可记录历史选择)
一.功能和使用 公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个 控件功能:1.可手动输入查询,也可点击下拉框查询, ...
- jQuery:实现两个<select>控件的互移操作
一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- 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 ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...
- Jquery+json绑定带层次下拉框(select控件)
一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...
- jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
随机推荐
- Weblogic常见故障之二:XAER_NOTA XAException问题的解决
在weblogic执行XA操作的时候,我们会碰到如下的错误,后来发现是JDBC配置的问题.主要报错:java.sql.SQLException: XA error: XAER_NOTA : The X ...
- TensorFlow------TFRecords的读取实例
TensorFlow------TFRecords的读取实例: import os import tensorflow as tf # 定义cifar的数据等命令行参数 FLAGS = tf.app. ...
- Fragment与Activity传递数据
MainActivity如下: package cc.testsimplefragment0; import android.os.Bundle; import android.app.Activit ...
- Android-经常涉及到的权限
Android中配置权限的方法: 在AndroidMainFest.xml中加上以下代码 Android中一些经常涉及到的权限: 添加WiFi以及访问网络的权限: <uses-permissio ...
- 教你如何搭建vue项目
笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...
- 【转】php中的会话机制(2)
原文:https://segmentfault.com/a/1190000000468220 发现,在调用session_start()的时候, session_start() 里面应该是有调用类似 ...
- linux 遇见错误Could not get lock /var/lib/dpkg/lock
通过终端安装程序sudo apt-get install xxx时出错:E: Could not get lock /var/lib/dpkg/lock - open (11: Resource te ...
- TestNG系列之四: TestNg依赖 dependsOnMethods
有时候,你可能需要在一个特定的顺序调用方法 执行原则: 1.被依赖的先执行: 2. 再执行没配置依赖的, 3.再执行需要依赖的: 4.若无依赖关系,依次执行) 一个方法有多个依赖时用空格隔开 有两种依 ...
- Java实现MySQL图片存取操作
转载自:http://blog.csdn.net/thc1987/article/details/3972201 存入操作 /* ---------------表结构------------ 表名:s ...
- Ubuntu安装Mac皮肤
如果是ubuntu的PC版,在稳定性方面的要求不是非常高,而又想换换界面养养眼,像我一般只用我的Ubuntu12.04来写写代码,娱乐娱乐的,可以试试Ubuntu的Mac皮肤. 好了,废话不多说,上图 ...