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,也是如此.不同的浏览器提供了不同的 ...
随机推荐
- dedecms会员注册注入漏洞
一.首先访问“/data/admin/ver.txt”页面获取系统最后升级时间,(判断是否是dede的cms 以及看看是否和这个漏洞相对应)二.然后访问“/member/ajax_membergrou ...
- java发送http的get和post请求
import java.io.*; import java.net.URL; import java.util.Map; import java.net.HttpURLConnection;; pub ...
- http://my.oschina.net/u/1177710/blog/284608
http://my.oschina.net/u/1177710/blog/284608 http://chuhanzhi.com/?p=45 http://www.2cto.com/kf/201501 ...
- RocketMQ里的一个获取时间的工具类SystemClock
看rocketmq源码的时候发现他们还给时钟封装里一下. /** * Licensed to the Apache Software Foundation (ASF) under one or mor ...
- sqlite developer注册码
sqlite developer注册码网上没有找到,只有通过注册表,删除继续使用,删除注册表中 HKEY_CURRENT_USER\SharpPlus\SqliteDev.
- zabbix 配置外部邮件server发送邮件报警
一.安装配置msmtp 1.下载msmtp wget http://downloads.sourceforge.net/msmtp/msmtp-1.4.30.tar.bz2?big_mirror=0 ...
- rails引入bootstrap
1.在Gemfile中增加 gem 'bootstrap-sass', '~> 3.2.0.2'2.bundle install3.把assets/stylesheets/application ...
- php输出语句echo、print、print_r、printf、sprintf、var_dump比较
一.echo echo() 实际上不是一个函数,是php语句,因此您无需对其使用括号.不过,如果您希望向 echo() 传递一个以上的参数,那么使用括号会发生解析错误.而且echo是返回void ...
- 关于RecyclerView条目复用
前言 说下前几天遇到的一个小问题,关于RecyclerView条目选中状态的保存.众所周知,RecyclerView被创造出来用于条目的回收利用,但是,当前面回收的条目带有一些特殊的状态(区别于未选中 ...
- 一步一步学Spring.NET——1、Spring.NET环境准备
Spring.NET 1.3.2下载地址:http://down.51cto.com/data/861700 下载后解压 Spring.NET-1.3.2.7z:这个里面有我们须要用到的全部东西. S ...