文章目录 [隐藏]
本篇博客所用到的技术也是从别的博客学习到的，但目前找不到那篇博客的链接了。
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);
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);
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
query操作复选框(checkbox)的12个小技巧。
1、获取单个checkbox选中项(三种写法)
|
1
|
$( "input:checkbox:checked" ).val()
|
或者
|
1
|
$( "input:[type='checkbox']:checked" ).val();
|
或者
|
1
|
$( "input:[name='ck']:checked" ).val();
|
2、 获取多个checkbox选中项
|
1
2
3
4
5
|
$( 'input:checkbox' ).each( function () {
if ($( this ).attr( 'checked' ) == true ) {
alert($( this ).val());
}
});
|
3、设置第一个checkbox 为选中值
|
1
|
$( 'input:checkbox:first' ).attr( "checked" , 'checked' );
|
或者
|
1
|
$( 'input:checkbox' ).eq(0).attr( "checked" , 'true' );
|
4、设置最后一个checkbox为选中值
|
1
|
$( 'input:radio:last' ).attr( 'checked' , 'checked' );
|
或者
|
1
|
$( 'input:radio:last' ).attr( 'checked' , 'true' );
|
5、根据索引值设置任意一个checkbox为选中值
|
1
|
$( 'input:checkbox).eq(索引值).attr(' checked ', ' true ');
|
索引值=0,1,2....
或者
|
1
|
$( 'input:radio' ).slice(1,2).attr( 'checked' , 'true' );
|
6、选中多个checkbox同时选中第1个和第2个的checkbox
|
1
|
$( 'input:radio' ).slice(0,2).attr( 'checked' , 'true' );
|
7、根据Value值设置checkbox为选中值
|
1
|
$( "input:checkbox[value='1']" ).attr( 'checked' , 'true' );
|
8、删除Value=1的checkbox
|
1
|
$( "input:checkbox[value='1']" ).remove();
|
9、删除第几个checkbox
|
1
|
$( "input:checkbox" ).eq(索引值).remove();
|
索引值=0,1,2....
如删除第3个checkbox:
|
1
|
$( "input:checkbox" ).eq(2).remove();
|
10、遍历checkbox
|
1
2
3
|
$( 'input:checkbox' ).each( function (index, domEle) {
//写入代码
});
|
11、全部选中
|
1
2
3
|
$( 'input:checkbox' ).each( function () {
$( this ).attr( 'checked' , true );
});
|
12、全部取消选择
|
1
2
3
|
$( 'input:checkbox' ).each( function () {
$( this ).attr( 'checked' , false );
});
|
JQuery对CheckBox的一些相关操作
一、通过选择器选取CheckBox:
1.给CheckBox设置一个id属性，通过id选择器选取：
|
1
|
< input type = "checkbox" name = "myBox" id = "chkOne" value = "1" checked = "checked" />
|
JQuery:
|
1
|
$( "#chkOne" ).click( function (){});
|
2.给CheckBox设置一个class属性，通过类选择器选取：
|
1
|
< input type = "checkbox" name = "myBox" class = "chkTwo" value = "1" checked = "checked" />
|
JQuery:
|
1
2
|
$( ".chkTwo" ).click( function (){});
|
3.通过标签选择器和属性选择器来选取：
|
1
2
|
< input type = "checkbox" name = "someBox" value = "1" checked = "checked" />
< input type = "checkbox" name = "someBox" value = "2" />
|
JQuery:
|
1
2
|
$( "input[name='someBox']" ).click( function (){});
|
二、对CheckBox的操作：
以这段checkBox代码为例：
|
1
2
3
4
|
< input type = "checkbox" name = "box" value = "0" checked = "checked" />
< input type = "checkbox" name = "box" value = "1" />
< input type = "checkbox" name = "box" value = "2" />
< input type = "checkbox" name = "box" value = "3" />
|
1.遍历checkbox用each()方法：
|
1
|
$( "input[name='box']" ).each( function (){});
|
2.设置checkbox被选中用attr();方法：
|
1
2
|
$( "input[name='box']" ).attr( "checked" , "checked" );
|
在HTML中，如果一个复选框被选中，对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked"，所以判断 if("checked"==$("#id").attr("checked")) 是错误的，应该是 if(true == $("#id").attr("checked"))
3.获取被选中的checkbox的值：
|
1
2
3
4
|
$( "input[name='box'][checked]" ).each( function (){
if ( true == $( this ).attr( "checked" )) {
alert( $( this ).attr( 'value' ) );
}
|
或者：
|
1
2
3
4
|
$( "input[name='box']：checked" ).each( function (){
if ( true == $( this ).attr( "checked" )) {
alert( $( this ).attr( 'value' ) );
}
|
$("input[name='box']：checked")与 $("input[name='box']")有何区别没试过，我试了用 $("input[name='box']")能成功。
4.获取未选中的checkbox的值：
|
1
2
3
4
5
|
$( "input[name='box']" ).each( function (){
if ($( this ).attr( 'checked' ) == false ) {
alert($( this ).val());
}
});
|
5.设置checkbox的value属性的值:
|
1
|
$( this ).attr( "value" ,值);
|
三、 一般都是创建一个js数组来存储遍历checkbox得到的值，创建js数组的方法：
1. var array= new Array();
2. 往数组添加数据：
array.push($(this).val());
3.数组以“,”分隔输出：
alert(array.join(','));
文章来源：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标签之前
有时候我们的标签都是从后台获取的数据，然后利用JS添加到页面上，当我们写生成的标签的点击事件（click）时没有效果。
例如：
<section> 测试动态生成的DOM点击事件 <br /> </section> <script src="jquery-1.11.2.min.js"></script> <script> $(function () { $.ajax({ type: "post", url: "Handler1.ashx", data: {}, success: function (data) { $("section").append(data); //把获取的标签动态添加到页面中 } }) }); $("#test").click(function () { alert("Smile"); }) </script>
生成页面，点击A标签无效果。
这里只介绍两种解决方法。
①把事件写在生成的字符串当中，感觉很low
里面什么方法名外面就声明一个（需要带参就传参）。
②我一般喜欢在JS里面直接写点击事件，不喜欢在标签里面写事件
我们直接写这个标签的点击事件是没效果的，我们就换个写法，利用On来完成。
这样也可以完成点击事件。
另附：a标签的href也是可以执行脚本的，点击事件也会执行脚本，点击事件优先，然后在执行href链接。
下载一般都是把A标签的Href给个一般处理程序的链接（参数就用？传值）。但我这个下载的参数是动态生成的，在后台生成字符串的时候没有参数。需要在前台根据用户选择的来进行传递参数。所以需要我们动态生成Href的链接
//下载 $("#uploadInfo").click(function () { var uids = ""; $(":checkbox[name='A']:checked").each(function (i, item) { uids += $(item).attr("data-id") + ","; }) if (uids === "") { NewAlertBox("warning","请最少选择一项",2000); } else { var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids; $(this).attr("href", urls); //执行完了点击事件，把Href赋值，然后自动跳转href链接 } });
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。
通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡。
<style> #content{ width: 140px; border: 1px solid blue; } #msg{ width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style>
<body>
<div id="content">
外层div
<div id="msg">
内层div
</div>
</div>
</body>
显示结果
对应的jQuery代码如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(){ alert("我是小div"); }); // 为外层div元素绑定click事件 $("#content").click(function(){ alert("我是大div"); }); // 为body元素绑定click事件 $("body").click(function(){ alert("我是body"); }); }); </script>
当点击小div时，会触发大div与body 的点击事件。点击大div时会触发body的点击事件。
如何防止这种冒泡事件发生呢？
修改如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(event){ alert("我是小div"); event.stopPropagation(); // 阻止事件冒泡 }); // 为外层div元素绑定click事件 $("#content").click(function(event){ alert("我是大div"); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $("body").click(function(event){ alert("我是body"); event.stopPropagation(); // 阻止事件冒泡 }); });
event.stopPropagation(); // 阻止事件冒泡
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
html部分
<body> <form action="test.html"> 用户名：<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //获取元素的值，val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空"); $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) event.preventDefault(); } }); }); </script>
//阻止默认行为 ( 表单提交 ) event.preventDefault();
还有一种防止默认行为的方法就是return false。效果一样。
代码如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //获取元素的值，val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空"); $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) //event.preventDefault(); return false; } }); }); </script>
同理，上面的冒泡事件也可以通过return false来处理。
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(event){ alert("我是小div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 为外层div元素绑定click事件 $("#content").click(function(event){ alert("我是大div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 为body元素绑定click事件 $("body").click(function(event){ alert("我是body"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); });
在开发中遇到这个问题，就是第一次加载的时候会错位，出现窄很多的现象，在网上找了一番后，发现http://blog.csdn.net/bugscode/article/details/53432069这篇博客中给出的原因是清晰的，但是解决方法我没怎么看明白，于是按照他所说的原因，即
这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性，它会使Table标签中多一个style=”width: xx px;”属性，这就导致了变化大小时标题对不齐现象。
然后在 datatable中加入了 serverSide 设置，
$('#charging_table').dataTable({
serverSide : false,
......})
既然是因为 serverSide 的原因，那我把它 设置为 false 结果问题还真解决了！
文章来源：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
-
$("#li_certificate").click(function () {
-
$(this).parent().addClass("selected").siblings().removeClass("selected");
-
$("#div_record").hide();
-
$("#div_certificate").show();
-
//这个位置写那个重新适应宽度的代码
-
});
input输入框在获得或失去焦点时隐藏或显示文字，这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧，本文使用jquery实现以下，感兴趣的朋友可以参考下哈
大家可以看效果图的搜索输入框，默认显示着“用户名/Email”的提示，当这个 input 输入框获得焦点时，就自动清空等待用户输入，当用户啥也没输入就离开这个 input 输入框时，输入框内又再次显示“用户名/Email”的提示。是不是很常见？很多搜索、登录、表单都会用到这个效果，但是我看了N多个网站，有90%以上是这么实现的：
<input type="text" value="搜索关键字" onfocus="if(this.value == '搜索关键字') this.value = ''" onblur="if(this.value =='') this.value = '搜索关键字'" />
我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为：
1.完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？
2.如果要修改其中的提示文字，费时费力又不好维护。
3.我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。
那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？
具体方法如下:
首先肯定是引入jQuery
Html代码:
<div><input type="text" value="提示测试" class="input_test" /></div> <div><input type="text" value="请输入搜索关键" class="input_test" /></div>
jQuery代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.input_test').bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultValue; } } }); }) </script>
只要在实现的input输入框加上”input_test”这个class就可以轻松实现了
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
使用jquery控制div的显示与隐藏，一句话就能搞定，例如：
显示：
$("#id").show()表示为display：block，隐藏：
$("#id").hide()表示为display:none;
$("#id").toggle();切换元素的可见状态。如果元素是可见的，切换为隐藏的；
如果元素是隐藏的，则切换为可见的。
显示：
$("#id").css('display','block');//显示隐藏：
$("#id").css('display','none');//隐藏或者
$("#id")[0].style.display='none';display = none 控制对象的隐藏
display = block控制对象的显示
元素显示：
$("#id").css('visibility','visible');//元素显示元素隐藏：
$("#id").css('visibility','hidden');//元素隐藏CSS visibility 属性规定元素是否可见。
visible 元素可见。
hidden 元素不可见。
collapse 在表格元素中使用时，此值可删除一行或一列，但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit 从父元素继承 visibility 属性的值。
注意：
display:none和visible:hidden都能把网页上某个元素隐藏起来，在视觉效果上没有区别，但是在一些DOM操作中两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，即它仍然具有高度、宽度等属性，通俗来说就是看不见但摸得到。
-
//第1种方法 ,给元素设置style属性
-
$("#hidediv").css("display", "block");
-
//第2种方法 ,给元素换class，来实现隐藏div，前提是换的class样式定义好了隐藏属性
-
$("#hidediv").attr("class", "blockclass");
-
//第3种方法,通过jquery的css方法，设置div隐藏
-
$("#blockdiv").css("display", "none");
-
-
$("#hidediv").show();//显示div
-
$("#blockdiv").hide();//隐藏div
文章来源：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
情景一：用onclick触发的函数
-
html代码：
-
<div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
-
<div>1111</div>
-
<div class="original">
-
<div id="chartx1" class="chartstyle"></div>
-
<div id="charty1" class="chartstyle" ></div>
-
<button onclick="getDetail(this);" style="width:100%;height:30px;">查看信息</button>
-
</div>
-
</div>
-
<script>
-
function getDetail(obj){
-
alert(obj.parentNode.parentNode.id); //1
-
}
-
</script>
运行结果：
情景二:直接用click触发的函数
-
html代码：
-
<div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
-
<div>1111</div>
-
<div class="original">
-
<div id="chartx1" class="chartstyle"></div>
-
<div id="charty1" class="chartstyle" ></div>
-
<button class="info_detail" style="width:100%;height:30px;">查看信息</button>
-
</div>
-
</div>
-
<script>
-
$(".info_detail").click(function(){
-
id=$(this).parent().parent().attr('id');
-
})
-
</script>
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com