首先上 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标签之前

前言

消息和通知作为系统和用户之间交流的窗口，在用法上、表达上存在一定的规律，本文解答网页端界面消息系统设计的如下问题:

· 常见的消息通知设计

· 如何进行消息通知设计

· 触发通知的业务场景

常见的消息通知组件和模板

在 Ant design 的设计系统里，消息和反馈组件并为「反馈」栏，涉及消息的组件有如下的内容：

警告提示（Alert ）、 全局提示（Message）、对话框（Modal）、通知提醒框（Modal）、气泡确认框（Popcomfirm）、结果（Result）。

结合 TechUI 提供的业务模板，总结了以下常见的消息通知组件和模板：

以上的消息通知设计在设计的时遵循什么样的规律，以下用一张图来说明。 

消息通知设计指南图

根据消息反馈的强弱分为：高注意力、中注意力、低注意力；每个维度再从操作干预度 & 信息展示量作以下分类。

此图试图解答不同的通知设计组件/模板的使用场景，分为高注意力、中注意力和低注意力的场景，以及每个场景下不同组件信息量的大小和操作的干预度大小。 

通知的使用场景和强弱排序

高注意力的使用场景

【警报】需立即关注

【错误】需立即采取措施

【异常】系统等异常情况

【确认】需要用户确认才能进行

在需要高注意力的场景下用户必须对消息错处反映才能继续当前操作，操作干预度强。

使用页面级独占式布局的结果（Result）通知，告知用户操作结论以及引导后续的操作；使用对话框和气泡确认框让用户了解当前的系统情况，询问和引导后续操作；表单校验提示和全局提示告知用户当前的异常场景，帮助用户改正以继续当前操作。

使用示例:

中注意力的使用场景

【警告】无需立即采取措施

【讯息】用户操作的反馈及系统通知

在中注意力的场景下，当消息出现时，用户可以选择性地继续当前操作，也可以处理当前的消息，操作干预度中。

使用通知提示框，可以在页面中的边缘位置弹出消息提示，后台可以设置停留时长（当作为永久停留时并需要用户操作确认，功能等同于对话框）；页面的警告提示常用于在页面的全局进行通知的展示，用户可手动关闭。

使用示例:

低注意力的使用场景

【信息性消息】无需立即采取措施

【徽章】自上次互动后的新消息

在低注意力的场景下，消息出现后采用弱提示，对用户的当前操作几乎不产生干扰。

此时，全局提示常用于成功状态下的提示或跳转状态，几秒后自动消失；徽章用于更新消息的状态。

使用示例:

触发通知的业务场景

通知的触发场景存在于用户之间以及系统和用户之间。消息组件的设计选择需要根据具体的业务场景来定，以下是通用的推荐情境。

例如，在以请求审批作为核心功能的应用系统，成功和失败的通知可以采用「中注意力」的通知提示框和警告提示；若请求审批是附属的功能，如，请求某人加入某项目成为访客，则可以采用低注意力的通知方式，降低操作干扰度。又如，钉钉的会议通知，采用了较强操作干预度的对话框请求确认，钉钉的即时消息通知用户可以自定义设置是否在桌面展示消息，当不设置为桌面展示时，采用的是红点徽章的表达方式。 

通知设计原则

提供明确指引

· 在用户解决问题之前，错误消息不应消失

· 避免仅通过将字段变为红色来指示错误，色盲用户难以辨认

· 消息文本内容过多不建议采用悬浮通知中心

简单高效

· 需要明确限制通知的标题和文案的字段数量

· 避免无故打扰用户的通知设计

· 非持久性通知的持续时间不可过短，至少需要让用户阅读完文本内容，适当情况下提供关闭功能

· 通知文案简明易懂，无歧义

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

文章来源：站酷    作者：Ant_Design

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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