jquery easyui 操作总结
博客分类：
javascript
jqueryJavaScriptui
1、dialog
Java代码 收藏代码
$("#dialog-form").dialog({
title : "任務",
width : 500,
resizable : false,
cache: false, //禁止缓存
href: '/Admin/Project/videoPlayer',//加载的页面地址
closed: true,//不自动弹出dialog
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按鈕
Java代码 收藏代码
closable:false,
提示：dialog繼承自window，所以window的屬性設置dialog也可以用。
2、draggable
缺点：不能设置拖动范围。即使包含在一个div的container下，但是依然可以无限制拖动。而jquery ui能实现该功能。所以jquery easyui的draggable需要手动判断实现该功能。
Java代码 收藏代码
//拖动效果
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')
文本验证
Java代码 收藏代码
<input type="text" name="taskName" id="taskName" validType="validateText" required="true" class="easyui-validatebox" />
删除验证提示
Java代码 收藏代码
$(".easyui-validatebox").removeClass("validatebox-invalid");//删除验证提示
删除验证
Java代码 收藏代码
$("#modelName").validatebox("destroy");
扩展验证
Java代码 收藏代码
$.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" />
});
Java代码 收藏代码
$(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]或數字'
}
});
});
});
4、格式化日期
Java代码 收藏代码
$("#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初始化
Java代码 收藏代码
<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
Java代码 收藏代码
$("#tt").tabs('select',2);
禁用TAB
Java代码 收藏代码
$('#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
Java代码 收藏代码
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
切换tab时验证。若验证不通过则禁止切换
Java代码 收藏代码
$("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
Java代码 收藏代码
<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强制更改对应的宽度。
代码如下
Java代码 收藏代码
/**jquery easy ui datebox**/
.datebox {
width:126px !important;
}
.datebox .combo-text {
width:108px !important;
}
2 初始化的时候以下代码执行了2次
Java代码 收藏代码
$("#tabs").tabs({
onLoad:function(i){
console.log(i);
initProject();//初始化editProject页面
}
})
这个原因是因为我在div中添加了tab的class，easyui会初始化一次，定义了tabs函数又会执行一次。将div的class删除掉就可以了。
如下
Java代码 收藏代码
<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
Java代码 收藏代码
<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的高度。否则看不到动态新增的内容。
代码如下
Java代码 收藏代码
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
卸载控件
Java代码 收藏代码
currTr.find(".memberList").combobox("destroy");
所有都是destroy方法。
6 datetimebox
datetimebox不像datebox，它没有formate方法可以设置日期格式。只能通过导入locale语言包。来更改日期时间格式。
若要修改它的格式又要保持繁體。就需要導入zh_TW的js包，並將zh_CN的
Java代码 收藏代码
$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
};
$.fn.datebox.defaults.parser = function(s){
if (!s) return new Date();
var ss = s.split('-');
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
};
考入對應的位置。
如設置datetimebox為只讀，也同樣是設置
$(".datebox :text").attr("readonly","readonly");
而不是.datetimebox
showSeconds="false" 設置不顯示毫秒
setValue()設置日期
getValue()取得日期
参考：
http://www.jeasyui.com/documentation/index.php#
|
