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 也是小年,在这祝福大家新年快乐!今 ...
随机推荐
- [妙味JS基础]第八课:return、定时器基础
知识点总结 return 1)函数名+括号 = return 返回值 2)所有的函数默认的返回值 = 未定义 3)return后面的代码不执行 arguments =>为实参的集合,当参数个数 ...
- 【Python】生成器和递归
l=[1, 2, 3, 4, 5, 6] 如果l求和,毫无疑问可以使用递归,比如可以这样: def sum(l): res = 0 for i in l: if not isinstance(i, l ...
- xlrd doc
The xlrd Module A Python module for extracting data from MS Excel ™ spreadsheet files. Version 0.7.3 ...
- POJ 3020 Antenna Placement(无向二分图的最小路径覆盖)
( ̄▽ ̄)" //无向二分图的最小路径覆盖数=顶点总数-最大匹配数/2(最大匹配数=最小点覆盖数) //这里最大匹配数需要除以2,因为每两个相邻的*连一条边,即<u,v>和< ...
- JavaEE JavaBean 反射、内省、BeanUtils
JavaEE JavaBean 反射.内省.BeanUtils @author ixenos JavaBean是什么 一种规范,表达实体和信息的规范,便于封装重用. 1.所有属性为private2.提 ...
- MongoDB高级操作
参考MongoDB菜鸟教程 一.$type操作符 MongoDB 中可以使用的类型如下表所示: 类型 数字 备注 Double 1 String 2 Object 3 Array 4 ...
- 对低、高频系数直接重构upcoef2
此函数可对原图低.高频系数(或处理后的系数)进行重构 clear all;close all;clc; I=imread('C:\Users\Jv\Desktop\wenli.jpg'); gray= ...
- AUTO_INCREMENT列在InnoDB里如何工作
如果你为一个表指定AUTO_INCREMENT列,在数据词典里的InnoDB表句柄包含一个名为自动增长计数器的计数器,它被用在为该列赋新值.自动增长计数器仅被存储在主内存中,而不是存在磁盘上. Inn ...
- 2016NEFU集训第n+5场 A - Chinese Girls' Amusement
Description You must have heard that the Chinese culture is quite different from that of Europ ...
- webservice整合spring cxf
下载cxf包,把他里面的包都添加进lib文件夹中. 创建一个接口.添加@WebService注解 @WebService public interface HelloWorld { String sa ...