83510998 2012-10-29
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按鈕
closable:false,
提示:dialog繼承自window,所以window的屬性設置dialog也可以用。
2、draggable
缺点:不能设置拖动范围。即使包含在一个div的container下,但是依然可以无限制拖动。而jqueryui能实现该功能。所以jqueryeasyui的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()}表示,returntrue才生效。
"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都無所謂。
發現一個formvalid的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赋值,赋值是成功的,页面显示了这个值,也能将这个值赋给一个变量。但是在postform的时候这个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方法。
6datetimebox
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的clickfunction中也一樣。但是若改寫成
$('#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版本試下有沒有這個問題
升級後依然有這個問題。
jquery easyui dialog可以两种方式使用1)定义div,使用iframe<div id="openRoleDiv" class="easyui-window" closed="true