JS-日期框、下拉框、全选复选框
<!-- 下拉框 -->
<link rel="stylesheet" href="static/ace/css/chosen.css" />
<!-- 日期框 -->
<link rel="stylesheet" href="static/ace/css/datepicker.css" />
<!-- 日期框 -->
<script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>
<!--提示框-->
<script type="text/javascript" src="static/js/jquery.tips.js"></script>
$(function() {
//日期框
$('.date-picker').datepicker({
autoclose: true,
todayHighlight: true
});
//下拉框
if(!ace.vars['touch']) {
$('.chosen-select').chosen({allow_single_deselect:true});
$(window)
.off('resize.chosen')
.on('resize.chosen', function() {
$('.chosen-select').each(function() {
var $this = $(this);
$this.next().css({'width': $this.parent().width()});
});
}).trigger('resize.chosen');
$(document).on('settings.ace.chosen', function(e, event_name, event_val) {
if(event_name != 'sidebar_collapsed') return;
$('.chosen-select').each(function() {
var $this = $(this);
$this.next().css({'width': $this.parent().width()});
});
});
$('#chosen-multiple-style .btn').on('click', function(e){
var target = $(this).find('input[type=radio]');
var which = parseInt(target.val());
if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
else $('#form-field-select-4').removeClass('tag-input-style');
});
}
//复选框全选控制
var active_class = 'active';
$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
var th_checked = this.checked;//checkbox inside "TH" table header
$(this).closest('table').find('tbody > tr').each(function(){
var row = this;
if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
});
});
});
18271929370这个百度云中有下载
http://pan.baidu.com/s/1nuVEPVb
JS-日期框、下拉框、全选复选框的更多相关文章
- 下拉选择select和复选框checkbox的状态的各种方式
复选框的状态 <input name="ck" value=" " type="checkbox" checked> 或者&l ...
- UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)
弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
- ComboBox 自动调整组合框下拉部分的宽度
/// <summary> /// ComboBox 自动调整组合框下拉部分的宽度 /// </summary> void Resiz ...
- WPF: 实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...
- QTableWidget自定义表头QHeaderView加全选复选框
1 QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...
- WPF实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
随机推荐
- firebug的调试,console
console.log() console.warn() 警告 console.error() 错误 console.group() 分组 console.grounpEnd() 分组结束 co ...
- Hadoop故障排除:jps 报process information unavailable
4883 -- process information unavailable 解决办法: 进入tmp目录, cd /tmp 删除该目录下 名称为hsperfdata_{username}的文件夹 然 ...
- 【Python@Thread】thread模块
一.关于Python多线程 Python解释器中可以同时运行多个线程,但是再任意时刻只能有一个线程在解释器运行. Python虚拟机的访问是由全局解锁器(GIL)控制的,由GIL保证同时只有一个线程的 ...
- XmlNode和XmlElement区别
今天在做ASP.NET操作XML文档的过程中,发现了两个类:XmlNode和XmlElement.这两个类的功能极其类似(因为我们一般都是在对Element节点进行操作).上网搜罗了半天,千篇一律的答 ...
- dplyr 数据操作 数据排序 (arrange)
在R中,我们在整理数据时,经常需要对数据排序,以便数据增强数据的可读性. 下面我们来看下dplyr中的,arrange函数 arrange(.data, ...) 跟filter()类似,arrang ...
- Java 泛型 协变式覆盖和泛型重载
Java 泛型 协变式覆盖和泛型重载 @author ixenos 1.协变式覆盖(Override) 在JDK 1.4及以前,子类方法如果要覆盖超类的某个方法,必须具有完全相同的方法签名,包括返回值 ...
- MongoDB高级操作
参考MongoDB菜鸟教程 一.$type操作符 MongoDB 中可以使用的类型如下表所示: 类型 数字 备注 Double 1 String 2 Object 3 Array 4 ...
- 移动端Bug管理工具——Bugtags
Bugtags介绍 产品说明 Bugtags是为改善移动产品质量而专门打造的测试平台产品. 产品功能 SDK集成简单 一行代码极速集成,完全不影响原有程序结构. 所见即所得提交问题 一键截屏,使用标签 ...
- 有关下行HARQ的一切
1. 对于下行HARQ,有几种类型的下行传输需要UE反馈ACK/NACK 动态调度的下行传输:UE收到一个使用C-RNTI或TC-RNTI(对应随机接入过程中的Msg4)加扰的PDCCH和PDSCH, ...
- erlang 常用的计算长度函数
1.size 可以计算元祖长度和标准binary长度 2.tuple_size 计算元祖长度 3.length 计算列表长度 4.byte_size 计算标准和非标准binary的长度 非标准 < ...