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 也是小年,在这祝福大家新年快乐!今 ...
随机推荐
- 使用Toad创建存储过程出现错误并解决
存储过程中遇到ora-00942表或视图不存在 CREATE OR REPLACE PROCEDURE p IS CURSOR c IS SELECT * FROM scott.emp FOR UPD ...
- 鼠标点击 input,显示瞬间的边框颜色,对之修改与隐藏
示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="im ...
- 轻量级的移动框架--zepto.js
Zepto是一个轻量级的支持移动WebKit浏览器javascript移动端框架,框架支持jQuery语法,该框架的压缩包zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小 ...
- Java 泛型 泛型数组
Java 泛型 泛型数组 @author ixenos 先给结论 不能(直接)创建泛型数组 泛型数组实际的运行时对象数组只能是原始类型( T[]为Object[],Pair<T>[]为Pa ...
- LNK2019解决思路
虽然官网给出了很多可能的原因,最可能的原因还是因为缺少某个库文件.最近解决的一个为例总结一下思路 Winmm.lib; ad_win32.obj : error LNK2019: unresolved ...
- chapter8_2 预编译
用luac程序可以生成一个预编译文件——二进制文件. 比如: luac -o prog.lc prog.lua --生成了prog.lc二进制文件 Lua解析器可以执行它就像执行普通lua代码一样. ...
- Python in minute
Python 性能优化相关专题: https://www.ibm.com/developerworks/cn/linux/l-cn-python-optim/ Python wikipedi ...
- vs中的各种快捷键
1. VS注释与取消注释快捷键 CTRL + K , CTRL + C(注释) CTRL + K , CTRL + U(取消注释)
- 数据结构 B树 B+树 B*树 LSM-树
从B树.B+树.B*树谈到R 树 http://blog.csdn.net/v_JULY_v/article/details/6530142/ B-tree.B+tree和LSM-tree http: ...
- drupal7的node的内容的存储位置
标题是存在node表中的,但是实际内容存在表field_data_body中