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,也是如此.不同的浏览器提供了不同的 ...
随机推荐
- python开发者常犯的10个错误(转)
常见错误1:错误地将表达式作为函数的默认参数 在Python中,我们可以为函数的某个参数设置默认值,使该参数成为可选参数.虽然这是一个很好的语言特性,但是当默认值是可变类型时,也会导致一些令人困惑的情 ...
- http://www.blogjava.net/xylz/archive/2010/07/08/325587.html
http://www.blogjava.net/xylz/archive/2010/07/08/325587.html
- [Python爬虫] 之三十:Selenium +phantomjs 利用 pyquery抓取栏目
一.介绍 本例子用Selenium +phantomjs爬取栏目(http://tv.cctv.com/lm/)的信息 二.网站信息 三.数据抓取 首先抓取所有要抓取网页链接,共39页,保存到数据库里 ...
- 2017.12.25 Mybatis物理分页插件PageHelper的使用(二)
参考来自: 官方文档的说明:https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md 上篇博客 ...
- [Angular] AfterContentChecked && AfterViewChecked
AfterContentChecked & AfterViewChecked are called after 'OnChanges' lifecycle. And each time 'ng ...
- socket何时处于”读就绪状态“?---通过“应用程序大爷"和"内核孙子"对话再看重要的select函数的使用方法
前面. 我已经陆续介绍过select函数的一些零碎知识, 在本文中,我们来讨论这样一个问题:socket何时处于读就绪状态? 事实上主要讨论select函数, 毕竟socket的读就绪状态会导致sel ...
- 【MVC5】后台修改的Model值反映不到客户端的问题
画面上的检索结果有翻页功能,就在画面上追加了几个隐藏控件保存上次检索时的检索条件. 检索时更新这些隐藏控件的值,Debug时确实把Model中对应的属性值变掉了,但是到了客户端又变回之前的值了. 百思 ...
- 改动Dialog窗口的类名
VS2013 的MFC project(project名: MobileLink).想要改动窗口的类名时,发现不是像设置窗口名一样调用一个函数能够实现的. 实现的注意问题,请看凝视. (1) 改 ...
- docker 中 安装 openssh-server
1,首先,需要从docker官网获得centos或Ubuntu镜像 2,当本地已有Ubuntu镜像后(大概200M左右大小),使用如下命令 docker run -t -i ubuntu /bin/b ...
- 给第三方dll加上强命名的方法[C#]
在VS.NET 的命名行窗口下,输入如下的代码. 1 ,生成一个KeyFile sn -k keyPair.snk 2, 得到程序集的MSIL ildasm SomeAssembly.dll /out ...