首先上 html代码

    


        


            


            

        

        


            

                <!--为防止一个页面出现多个id 我们改用class 
            

        

    

    


        


            


            

        

        


            

                 为防止手工填写格式出错 我们设置属性为 readonly
            

        

    

    


        


            


            

        

        


            

                 只能选 ，不能填 ok
            

        

    

    


        


            


            

        

        


            

                -->
            

        

    

    


        


            


            

        

        


            

                <input type="text" class="datepicker" readonly="readonly"/>
            

        

    

然后是jquery ui 初始化部分代码

    


        


            


            

        

        


            

                //日期格式改变
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
            

        

    

    


        


            


            

        

        


            

                //星期格式汉化
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker( "option", "dayNamesMin",[ "日", "一", "二", "三", "四", "五", "六" ] );
            

        

    

    


        


            


            

        

        


            

                //月份格式汉化
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker( "option", "monthNames", [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] );
            

        

    

注：jquery ui 的设置有两种，一种是在初始化的时候就填入参数

另一种是在初始化之后，在设置参数。这里为了说明参数选项，我们选择的第二种方式来讲解。



效果图： 



官方说明地址: http://api.jqueryui.com/datepicker/#option-altFormat

下载地址：http://download.jqueryui.com/download

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

本篇博客所用到的技术也是从别的博客学习到的，但目前找不到那篇博客的链接了。

1.普通表格实现拖动列宽

var tabSize = tabSize || {}; tabSize.init = function (id) { //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; // 获取需要修改列宽的表格 var table = document.getElementById(id); var headTh = table.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //调整列宽 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 调整滚动表格的每个cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 调用 // 鼠标拖动列宽 setTimeout(function () { // 1.html代码里就是一个普通的table元素 // 2.传入table元素的id tabSize.init('documentList'); }, 600); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

2.datatable实现鼠标拖动列宽

1. 项目中用到datatable插件的地方，都是需要上下滚动的；而datatable插件实现上下滚动，是生成了两个div各包含了一个table，一个表格里只包含thead并且固定住（类：dataTables_scrollHead），另一个实现table内容滚动（类：dataTables_scrollBody） 。
2. 那么，若要实现鼠标拖动列宽的话，则需要：表头绑定鼠标事件→事件触发时两个表格的对应列的宽度都要改变
3. 若这个datatable表格原本没有滚动条的话，在鼠标拖动列宽的时候，会出现滚动条，其中，datatable定义时，“scrollX”: true。
   

var tabSize = tabSize || {}; tabSize.init = function (id,headTableWrapperId) { //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; // 获取需要修改列宽的表格 var table = document.getElementById(id); // 获取固定头部的表格 var tableHead = $('#'+ headTableWrapperId + ' .dataTables_scrollHeadInner table')[0]; // 获取表格头部th var headTh = tableHead.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //调整列宽 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 调整滚动表格的每个cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 鼠标拖动列宽 setTimeout(function () { // 参数：1.table元素的id， // 2.datatable插件生成的最外层div的id，F12可查看到 tabSize.init('cfcPlanListIn','cfcPlanListIn_wrapper'); }, 2000); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

query操作复选框(checkbox)的12个小技巧。

1、获取单个checkbox选中项(三种写法)

或者

或者

2、 获取多个checkbox选中项

3、设置第一个checkbox 为选中值

或者

4、设置最后一个checkbox为选中值

或者

5、根据索引值设置任意一个checkbox为选中值

索引值=0,1,2....
或者

6、选中多个checkbox同时选中第1个和第2个的checkbox

7、根据Value值设置checkbox为选中值

8、删除Value=1的checkbox

9、删除第几个checkbox

索引值=0,1,2....
如删除第3个checkbox:

10、遍历checkbox

11、全部选中

12、全部取消选择

JQuery对CheckBox的一些相关操作

一、通过选择器选取CheckBox:

  1.给CheckBox设置一个id属性，通过id选择器选取：

    JQuery:

   2.给CheckBox设置一个class属性，通过类选择器选取：

    JQuery:

  3.通过标签选择器和属性选择器来选取：

   JQuery:

二、对CheckBox的操作：
   以这段checkBox代码为例：

   1.遍历checkbox用each()方法：

   2.设置checkbox被选中用attr();方法：

    在HTML中，如果一个复选框被选中，对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked"，所以判断 if("checked"==$("#id").attr("checked")) 是错误的，应该是 if(true == $("#id").attr("checked"))
 
  3.获取被选中的checkbox的值：

     或者：

   $("input[name='box']：checked")与 $("input[name='box']")有何区别没试过，我试了用 $("input[name='box']")能成功。
   4.获取未选中的checkbox的值：

   5.设置checkbox的value属性的值:

三、 一般都是创建一个js数组来存储遍历checkbox得到的值，创建js数组的方法：

     1.  var array= new Array();

     2. 往数组添加数据：

        array.push($(this).val());

     3.数组以“,”分隔输出：

         alert(array.join(','));

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

还是附上代码吧。不多说，方便日后查看

父页面代码：

 


    


        


            


            

        

        


            

                <!DOCTYPE html> 
            

        

    

    


        


            


            

        

        


            

                <html> 
            

        

    

    


        


            


            

        

        


            

                <head> 
            

        

    

    


        


            


            

        

        


            

                <title>parents</title> 
            

        

    

    


        


            


            

        

        


            

                <meta charset="UTF-8"> 
            

        

    

    


        


            


            

        

        


            

                </head> 
            

        

    

    


        


            


            

        

        


            

                <body> 
            

        

    

    


        


            


            

        

        


            

                <script language="javascript" type="text/javascript"> 
            

        

    

    


        


            


            

        

        


            

                function sayhello() {
            

        

    

    


        


            


            

        

        


            

                alert('Hello World!');
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                var value = 'value';
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

    


        


            


            

        

        


            

                <div id="default">div内容</div> 
            

        

    

    


        


            


            

        

        


            

                <iframe src="child.html"></iframe> 
            

        

    

    


        


            


            

        

        


            

                </body> 
            

        

    

    


        


            


            

        

        


            

                </html> 
            

        

    

子页面

 


    


        


            


            

        

        


            

                <!DOCTYPE html> 
            

        

    

    


        


            


            

        

        


            

                <html> 
            

        

    

    


        


            


            

        

        


            

                <head> 
            

        

    

    


        


            


            

        

        


            

                <title>child</title> 
            

        

    

    


        


            


            

        

        


            

                <meta charset="UTF-8"> 
            

        

    

    


        


            


            

        

        


            

                <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script> 
            

        

    

    


        


            


            

        

        


            

                <script language="javascript" type="text/javascript"> 
            

        

    

    


        


            


            

        

        


            

                $(function() {
            

        

    

    


        


            


            

        

        


            

                //在iframe子页面中查找父页面元素 
            

        

    

    


        


            


            

        

        


            

                alert($('#default', window.parent.document).html());
            

        

    

    


        


            


            

        

        


            

                //在iframe中调用父页面中定义的变量 
            

        

    

    


        


            


            

        

        


            

                alert(parent.value);
            

        

    

    


        


            


            

        

        


            

                //在iframe中调用父页面中定义的方法 
            

        

    

    


        


            


            

        

        


            

                parent.sayhello();
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

    


        


            


            

        

        


            

                </head> 
            

        

    

    


        


            


            

        

        


            

                <body> 
            

        

    

    


        


            


            

        

        


            

                <div>iframe子页面内容</div> 
            

        

    

    


        


            


            

        

        


            

                </body> 
            

        

    

    


        


            


            

        

        


            

                </html> 
            

        

    

注意：

父页面的属性和方法必须在iframe标签之前