- 浏览: 1072392 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (290)
- php (65)
- javascript (36)
- html5 (31)
- thinkphp (9)
- mysql (16)
- jquery (13)
- node.js (9)
- css (9)
- android 开发 (8)
- flex (5)
- java (3)
- apache (8)
- linux (8)
- git (5)
- web (5)
- wordpress (9)
- mongodb (2)
- redis (5)
- yaf (6)
- python (4)
- big data (1)
- sphinx (1)
- html (1)
- bootstrap (1)
- vue (1)
- laravel (1)
- test (0)
最新评论
-
July01:
推荐用StratoIO打印控件,支持网页、URL、图片、PD、 ...
如何解决非IE浏览器的web打印 -
flashbehappy:
同一个视频,有mp4,ogg两种格式的。在chrome,fir ...
firefox chrom safari 对video标签的区别 -
xmdxzyf:
可以在网站(www.sosoapi.com)上试下在线表单方式 ...
用swagger-php/ui做API测试 -
flex_莫冲:
a2631500 写道"看了源码,设置Backbon ...
backbone与php交互 -
a2631500:
"看了源码,设置Backbone.emulateJS ...
backbone与php交互
1、dialog
$("#dialog-form").dialog({
title : "任務",
width : 500,
resizable : false,
cache: false, //禁止缓存
href: '/Admin/Project/videoPlayer',//加载的页面地址
closed: false,//默认不弹出
modal : true,//模式化窗口
shadow:false,//是否显示隐藏。若dialog的宽高是动态变化的,shadow不会自动更新。这种情况下最好设置为false。否则要手动处理
buttons : [{
text : 'Save',
handler : saveTask
}, {
text : 'Cancel',
handler : resetDialog
}]
});
$('#dialog-form').dialog('close');//关闭
$('#dialog-form').dialog('open');//打开
不顯示默認的close按鈕
提示:dialog繼承自window,所以window的屬性設置dialog也可以用。
2、draggable
缺点:不能设置拖动范围。即使包含在一个div的container下,但是依然可以无限制拖动。而jquery ui能实现该功能。所以jquery easyui的draggable需要手动判断实现该功能。
3、validate
整个form的验证结果
$("#taskForm").form('validate')
文本验证
删除验证提示
删除验证
扩展验证
depends驗證依賴特定條件才開啟,如下面的required用{depends:function()}表示,return true才生效。
如果需要用到form的valid()方法,form內驗證的輸入框必須帶上name 屬性,否則不計入驗證範圍。
如果需要動態加上輸入框的驗證,則可以通過
如果不帶name的輸入框需要驗證請使用
可通過js動態加上驗證
這種用法就跟form沒關係了,有沒有form都無所謂。
發現一個form valid的bug,動態添加form的驗證rules。。
如果對應的元素沒有id,則使用form.valid() 生成的結果是錯誤的。因為某個元素的值丟失了(估計是通過ID匹配的),導致("#itemForm").validate()中的currentElements匹配元素錯誤。而只要給每個驗證元素加上ID值,就可以避免這個問題。真是浪費了我很多時間才找出這個bug
4、格式化日期
碰到一个问题,页面初始化时给一个datebox赋值,赋值是成功的,页面显示了这个值,也能将这个值赋给一个变量。但是在post form的时候这个datebox的getvalue是空的,查看html的值也是空的。但是给个延时50毫秒,html就有值了。很奇怪啊
5、TAB
div初始化
选择指定index的tab
禁用TAB
获取当前tab
切换tab时验证。若验证不通过则禁止切换
tab的内容是html
若是这种内置方式,则内置的html的js文件必须放在主页面内。否则不会调用。相当于用get方式将该html的内容嵌套到主页面中。而不会加载对应的js和css文件。
在tab加载完内容之后执行初始化函数
$("#tabs").tabs({
onLoad:function(i){
console.log(i);
initProject();//初始化editProject页面
}
})
这种方式的优点:由于嵌套的内容是div,所以内容的高度增加或减少后会自动调整div的高度。
缺点:
1 若2个tab都包含了datebox元素,第2个tab的datebox的宽度会被设置为0.不知道什么原因。只能通过css强制更改对应的宽度。
代码如下
2 初始化的时候以下代码执行了2次
这个原因是因为我在div中添加了tab的class,easyui会初始化一次,定义了tabs函数又会执行一次。将div的class删除掉就可以了。
如下
设置tab的内容是iframe
这种方式是将整个html文件嵌入,包括了html,js,css 而不只是html内容。
这种方式的优点:用iframe是独立的页面,若已经实现了该页面,基本上不用怎么修改代码。
缺点:若iframe中的内容高度是动态的,则需要动态调整父窗口的iframe的高度。否则看不到动态新增的内容。
代码如下
tabs的参考资料:
http://www.easyui.info/archives/164.html
http://www.easyui.info/archives/501.html
卸载控件
所有都是destroy方法。
6 datetimebox
datetimebox不像datebox,它没有formate方法可以设置日期格式。只能通过导入locale语言包。来更改日期时间格式。
若要修改它的格式又要保持繁體。就需要導入zh_TW的js包,並將zh_CN的
$("#dialog-form").dialog({
title : "任務",
width : 500,
resizable : false,
cache: false, //禁止缓存
href: '/Admin/Project/videoPlayer',//加载的页面地址
closed: false,//默认不弹出
modal : true,//模式化窗口
shadow:false,//是否显示隐藏。若dialog的宽高是动态变化的,shadow不会自动更新。这种情况下最好设置为false。否则要手动处理
buttons : [{
text : 'Save',
handler : saveTask
}, {
text : 'Cancel',
handler : resetDialog
}]
});
$('#dialog-form').dialog('close');//关闭
$('#dialog-form').dialog('open');//打开
不顯示默認的close按鈕
closable:false,
提示:dialog繼承自window,所以window的屬性設置dialog也可以用。
2、draggable
缺点:不能设置拖动范围。即使包含在一个div的container下,但是依然可以无限制拖动。而jquery ui能实现该功能。所以jquery easyui的draggable需要手动判断实现该功能。
//拖动效果 container.draggable({ containment : "#grid",//父容器 scroll : false, delay : 0, isDrag : true, onStopDrag:function(e){ //获取拖动div容器 控制拖动范围 var dragContainer = $(".taskSelected").parent().parent(); var left = parseInt(dragContainer.css("left")); var top = parseInt(dragContainer.css("top")); if(isNaN(left) || left < 10 ){ dragContainer.css("left","10px") } if(isNaN(top) || top < 10 ){ dragContainer.css("top","10px") } var maxLeft = parseInt($("#grid").css("width")); var maxTop = parseInt($("#grid").css("height")); if(left >= maxLeft){ dragContainer.css("left",(maxLeft-60)+"px"); } if(top >= maxTop ){ dragContainer.css("top",(maxTop-60)+"px"); } } });
3、validate
整个form的验证结果
$("#taskForm").form('validate')
文本验证
<input type="text" name="taskName" id="taskName" validType="validateText" required="true" class="easyui-validatebox" />
删除验证提示
$(".easyui-validatebox").removeClass("validatebox-invalid");//删除验证提示
删除验证
$("#modelName").validatebox("destroy");
扩展验证
$.extend($.fn.validatebox.defaults.rules, { equals: { validator: function(value){ return value > 0; }, message: '數據不正確,請重新輸入' } //数字验证应用扩展验证规则 <input name="test" max="9999.99" precision="2" invalidMessage="不能超過6位數字" value="{$printDetailsBSig}" validType="equals[]" class="sig easyui-numberbox" /> });
$(document).ready(function(){ $.extend($.fn.validatebox.defaults.rules, { userID: { validator: function(value){ var reg = /^[a-zA-Z_0-9]+$/ return reg.test(value); }, message: '登錄名必須為字符[A-Z]或數字' } }); $.extend($.fn.validatebox.defaults.rules, { validateText: { validator: function(value){ var reg = /[<>]+/ return !reg.test(value); }, message: '不能含有特殊字符<>' } }); $.extend($.fn.validatebox.defaults.rules, { number: { validator: function(value){ var reg = /^[0-9]+$/ return reg.test(value); }, message: '此項必須為數字' } }); $.extend($.fn.validatebox.defaults.rules, { areaCode : { validator: function(value){ var reg = /^0\d{0,4}$/ return reg.test(value); }, message: '此項必須為1-4位數字' } }); //Extension number $.extend($.fn.validatebox.defaults.rules, { tel : { validator: function(value){ var reg = /^[0-9]{0,8}$/ return reg.test(value); }, message: '此項必須為1-8位數字' } }); $.extend($.fn.validatebox.defaults.rules, { extensionNumber : { validator: function(value){ var reg = /^[0-9]{0,5}$/ return reg.test(value); }, message: '此項必須為1-5位數字' } }); $.extend($.fn.validatebox.defaults.rules, { date: { validator: function(value){ var reg = /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}$/ return reg.test(value); }, message: '此項必須為yyyy-mm-dd格式的日期' } }); $.extend($.fn.validatebox.defaults.rules, { account: { validator: function(value){ var reg = /^[A-Z_0-9]+$/ return reg.test(value); }, message: 'Account 只能輸入大写字母' } $.extend($.fn.validatebox.defaults.rules, { modelName: { validator: function(value){ var reg = /^[a-zA-Z_0-9]+$/ return reg.test(value); }, message: 'Model Name必須為字符[A-Z]或數字' } }); }); });
depends驗證依賴特定條件才開啟,如下面的required用{depends:function()}表示,return true才生效。
"original_price":{ required: { depends: function(element) { if(some condition){return true;} } }, number:true, min:0, max:10000 },
如果需要用到form的valid()方法,form內驗證的輸入框必須帶上name 屬性,否則不計入驗證範圍。
如果需要動態加上輸入框的驗證,則可以通過
$("#input").rules("add",{required: true, checkTitle:true, checkTagGroup:true, messages: { required: "請填寫標題名稱" } })
如果不帶name的輸入框需要驗證請使用
$("#input").valitebox();
可通過js動態加上驗證
$('#input').validatebox({ required: true, validType: 'email' });
這種用法就跟form沒關係了,有沒有form都無所謂。
發現一個form valid的bug,動態添加form的驗證rules。。
// init validate $("#item_list .tag_input").each(function () { console.log($(this)); $(this).rules("add", { required: true, checkTitle:true, messages: { required: "請填寫名稱" } }) })
如果對應的元素沒有id,則使用form.valid() 生成的結果是錯誤的。因為某個元素的值丟失了(估計是通過ID匹配的),導致("#itemForm").validate()中的currentElements匹配元素錯誤。而只要給每個驗證元素加上ID值,就可以避免這個問題。真是浪費了我很多時間才找出這個bug
4、格式化日期
$("#startDate,#endDate").datebox({ formatter:formater }); //格式化日期 function formater(date) { return date.getFullYear()+"-"+(parseInt(date.getMonth())+1) +"-"+date.getDate(); } <input name="startDate" id="startDate" class="easyui-datebox" /> to <input name="endDate" id="endDate" class="easyui-datebox" /> //日期控件只读 $(".datebox :text").attr("readonly","readonly");
碰到一个问题,页面初始化时给一个datebox赋值,赋值是成功的,页面显示了这个值,也能将这个值赋给一个变量。但是在post form的时候这个datebox的getvalue是空的,查看html的值也是空的。但是给个延时50毫秒,html就有值了。很奇怪啊
5、TAB
div初始化
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px;"> <div title="Tab1" data-options="tools:'#p-tools'" style="padding:20px;"> </div> <div title="Tab2" data-options="closable:true,cache:false,href:'tabs_href_test.html'" style="padding:20px;"> This is Tab2 with close button. </div> </div>
选择指定index的tab
$("#tt").tabs('select',2);
禁用TAB
$('#tt').tabs('disableTab', 1); $('#tt').tabs('enableTab', 1); // enable the second tab panel $('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title
获取当前tab
var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab);
切换tab时验证。若验证不通过则禁止切换
$("ul.tabs li").bind("mousedown", function(event) { var currTabIndex = getCurrTabIndex(); var index = $(this).index(); if (currTabIndex == index) return; var targetIndex = (currTabIndex == 1) ? 0 : 1; var valid1 = $("#tabs").find(".validatebox-invalid").length; if (valid1) { showTip("請填寫完整!"); //禁用要切换的tab再启用。这样就可以禁止tab的onSelect事件,并且样式还是正常的enable。 $('#tabs').tabs('disableTab', targetIndex); $('#tabs').tabs('enableTab', targetIndex); } else { if (targetIndex == 1) { var valid2 = checkMemberValid(); if (!valid2) { $('#tabs').tabs('disableTab', targetIndex); } } $('#tabs').tabs('enableTab', targetIndex); } })
tab的内容是html
<div id="tabs" class="easyui-tabs"> <div title="Project Info" data-options="closable:false,cache:false,href:'/Admin/Project/editProject/projectID/{$projectID}'" style="padding:20px;"> </div> <div title="Videos" data-options="closable:false,cache:false,href:'/Admin/Project/editVideo/projectID/{$projectID}'" style="padding:20px;"> </div> </div>
若是这种内置方式,则内置的html的js文件必须放在主页面内。否则不会调用。相当于用get方式将该html的内容嵌套到主页面中。而不会加载对应的js和css文件。
在tab加载完内容之后执行初始化函数
$("#tabs").tabs({
onLoad:function(i){
console.log(i);
initProject();//初始化editProject页面
}
})
这种方式的优点:由于嵌套的内容是div,所以内容的高度增加或减少后会自动调整div的高度。
缺点:
1 若2个tab都包含了datebox元素,第2个tab的datebox的宽度会被设置为0.不知道什么原因。只能通过css强制更改对应的宽度。
代码如下
/**jquery easy ui datebox**/ .datebox { width:126px !important; } .datebox .combo-text { width:108px !important; }
2 初始化的时候以下代码执行了2次
$("#tabs").tabs({ onLoad:function(i){ console.log(i); initProject();//初始化editProject页面 } })
这个原因是因为我在div中添加了tab的class,easyui会初始化一次,定义了tabs函数又会执行一次。将div的class删除掉就可以了。
如下
<div id="tabs" style="min-height:400px;height:650px; overflow: hidden;"> <div title="Project Info" data-options="closable:false,cache:false,href:'/Admin/Project/editProject/projectID/{$projectID}'" style="padding:0px;width:100%;height100%;"> <!-- <iframe scrolling="no" id="editProjectFrame" frameborder="0" src="/Admin/Project/editProject/projectID/{$projectID}" style="width:100%;height:600px;"></iframe>--> </div> <div title="Videos" data-options="closable:false,cache:false" style="padding:0px;height: 100%;"> <iframe scrolling="no" id="editVideoFrame" frameborder="0" src="/Admin/Project/editVideo/projectID/{$projectID}" style="width:100%;height:100%;"></iframe> </div> </div>
设置tab的内容是iframe
<div title="Tab4 with iframe" data-options="closable:true" style="overflow:hidden"> <iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe> </div>
这种方式是将整个html文件嵌入,包括了html,js,css 而不只是html内容。
这种方式的优点:用iframe是独立的页面,若已经实现了该页面,基本上不用怎么修改代码。
缺点:若iframe中的内容高度是动态的,则需要动态调整父窗口的iframe的高度。否则看不到动态新增的内容。
代码如下
var iframe = $(window.parent.document).find("#editProjectFrame").eq(0); $(iframe).css("height",parseInt($(iframe).css("height").substring(0,3)) + 30 + "px");
tabs的参考资料:
http://www.easyui.info/archives/164.html
http://www.easyui.info/archives/501.html
卸载控件
currTr.find(".memberList").combobox("destroy");
所有都是destroy方法。
6 datetimebox
datetimebox不像datebox,它没有formate方法可以设置日期格式。只能通过导入locale语言包。来更改日期时间格式。
若要修改它的格式又要保持繁體。就需要導入zh_TW的js包,並將zh_CN的
$.fn.datebox.defaults.formatter = function(date){ var y = date.getFullYear() 7 form 1.3.5版本發現一個bug,比較奇怪的。$("#addForm").form({ 'url':'add', onSubmit:function(param){ var valid = $(this).form('validate'); if (!valid) { form.unmask(); return valid; } param.text_content = []; param.image_content = []; $("#item_list .text_content").each(function () { var textObj = {}; //textObj.title = $(this).find(".text_title_row").val(); textObj.tag = $(this).find(".text_tag_row").val(); textObj.length = $(this).find(".text_content_length_row").val(); param.text_content.push(textObj); }) $("#item_list .image_content").each(function () { var imageObj = {}; //imageObj.title = $(this).find(".image_title_row").val(); imageObj.tag = $(this).find(".image_tag_row").val(); param.image_content.push(imageObj); }) param.text_content = JSON.stringify(param.text_content); param.image_content = JSON.stringify(param.image_content); console.log("on submit"); return valid; }, success:function(data){ submitable = true; var obj = jQuery.parseJSON(data); form.unmask(); alert(obj.info); if(obj.status){ window.location.href = "/Admin/Template/index"; } } }) $('#saveBtn').click(function(){ if (!submitable) return; var valid = form.valid(); //check item list if(valid && $('#item_list').find(".row").length === 0){ valid=false; alert('請添加文本或圖片'); } if (valid) { submitable = false; form.mask('submiting...'); form.submit(); } else { validator.focusInvalid(); submitable = true; } })
上述代碼,在新增頁面提交時,只會執行一次post,而在編輯頁面第一次提交時會執行2次post,若失敗,則之後都是提交一次post。
若將form的代碼寫入saveBtn的click function中也一樣。但是若改寫成$('#saveBtn').click(function(){ if (!submitable) return; var valid = form.valid(); //check item list if(valid && $('#item_list').find(".row").length === 0){ valid=false; alert('請添加文本或圖片'); } if (valid) { submitable = false; $("#addForm").form("submit", { 'url':'add', onSubmit:function(param){ var valid = $(this).form('validate'); if (!valid) { form.unmask(); return valid; } param.text_content = []; param.image_content = []; $("#item_list .text_content").each(function () { var textObj = {}; //textObj.title = $(this).find(".text_title_row").val(); textObj.tag = $(this).find(".text_tag_row").val(); textObj.length = $(this).find(".text_content_length_row").val(); param.text_content.push(textObj); }) $("#item_list .image_content").each(function () { var imageObj = {}; //imageObj.title = $(this).find(".image_title_row").val(); imageObj.tag = $(this).find(".image_tag_row").val(); param.image_content.push(imageObj); }) param.text_content = JSON.stringify(param.text_content); param.image_content = JSON.stringify(param.image_content); console.log("on submit"); return valid; }, success:function(data){ submitable = true; var obj = jQuery.parseJSON(data); form.unmask(); alert(obj.info); if(obj.status){ window.location.href = "/Admin/Template/index"; } } }) form.mask('submiting...'); //form.submit(); } else { validator.focusInvalid(); submitable = true; } })
則每次都只提交一次post。
升級到1.5版本試下有沒有這個問題
升級後依然有這個問題。发表评论
-
使用BOOTSTRAP创建没有遮罩的可移动dialog
2017-01-16 12:00 1557bootstrap是个很流行的前端工具。我想做个没有遮罩的di ... -
富文本编辑器推荐
2016-10-26 16:03 2377website: https://www.froala.com ... -
一些比较特别的js库和框架
2016-08-11 14:05 597http://www.meedee.cn/2016/06/07 ... -
Javascript的变量与delete操作符
2016-08-11 14:02 428来自:http://www.meedee.cn/2 ... -
uploadifive上傳插件的使用
2015-02-17 18:07 30651 自定義上傳錯誤/進度提示位置 'queueID':&quo ... -
json schema validate
2014-09-17 16:58 4612为了检测API返回的数据结构是否正确,刚好chrome的插件p ... -
来自yahoo的web优化规则(YSLOW的23条军规)
2014-09-11 17:53 1598https://developer.yahoo.com/per ... -
<a>的href中添加js函数的写法
2014-03-18 15:54 1208参考资料: http://www.cnblogs.com/op ... -
使用backbonejs的router功能
2014-01-02 12:13 912来源: http://css.dzone.com/articl ... -
初次seajs使用
2013-11-22 14:11 2937第一次用报了$=null的错 ... -
Javascript:history.go()和history.back()的用法和区别
2013-08-02 14:38 37522Javascript:history.go()和history ... -
JAVASCRIPT常用函数集合
2013-07-23 15:01 9201、删除数组某项 // Array Remove - By ... -
JS判断一个数组中是否有重复值的三种方法
2013-07-18 09:52 2193参考 http://superivan.iteye.com/b ... -
多DOM操作的性能优化
2013-07-15 17:32 936今天发现DOM操作很多,且是显示隐藏操作,性能是非常差的。一个 ... -
SafariJSRef safary开发指南
2013-07-10 11:30 882针对safari的js和css开发指南。 https://de ... -
js获取屏幕可视区域
2013-06-04 11:10 920IE: document.body.offsetWidth, ... -
backbone 的delegateEvent用法
2013-05-24 10:37 4617這篇文章記錄關於 Backbone delegateEvent ... -
post的数据参数内容包含&如何如何处理
2013-01-17 23:37 2433这星期测试人员提交了一个bug,表单保存的数据不完整。查了一下 ... -
javascript 同zindex的重叠div如何处理事件关系
2012-11-15 11:43 6473在一个页面中有3个独立的div,不存在嵌套层次关系。3个div ... -
javascript浮点运算偏差的成因及解决方法
2012-10-25 10:26 2448原文地址:http://eatpockyboy.blog.16 ...
相关推荐
jquery EasyUI的API,方便使用easyui查看。。。。。。
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery easyui 帮助文档 非常好用的
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jQuery EasyUI 1.4.2 版 API 中文版手册
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
jquery easyui 中文api文档 jQuery EasyUI 1.2.4+API.chm jquery.easyui-1.2.6API.chm jquery.EasyUI-1.3.1 API_疯狂秀才.chm
jQuery EasyUI中文参考手册.chm
使用Jquery EasyUI制作的日历,单击input控件弹出日历选择日期,代码很简单,仅供参考
SSH+Jquery easyUI后台管理系统
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。通过jQuery EasyUI开发者不需要编写复杂的javascript,也不需要对css样式有深入的...
ssm框架+jquery easyui案例
jQuery EasyUI 1.4.5 版 API 中文版