jQueryEasyUI.docx
《jQueryEasyUI.docx》由会员分享,可在线阅读,更多相关《jQueryEasyUI.docx(124页珍藏版)》请在冰豆网上搜索。
jQueryEasyUI
教程
概述
这个教程的目的是说明如何使用easyui框架容易的创建网页。
首先,你需要包含一些js和css文件:
easyui预定义了一些图标css,这些css类可以显示图片背景(16×16)。
使用这些类之前,需要包含:
内容
1.拖放
o基本拖放
o创建购物车式拖放
o创建课程表
基本拖放
这个教程显示如何使HTML元素变得可拖放。
这个例子会创建3个DIV元素然后让它们变得可拖放。
首先,创建三个DIV元素:
让第一个DIV元素可拖放,使用默认的拖放样式。
$('#dd1').draggable();
让第二个DIV元素使用proxy来拖放,proxy:
'clone'表示proxy使用原始元素的复制。
$('#dd2').draggable({
proxy:
'clone'
});
让第三个DIV元素使用自定义proxy来拖放
$('#dd3').draggable({
function(source){
varp=$('proxy');
p.appendTo('body');
returnp;
}
构建购物车型拖放
使用jQueryeasyui,我们在web应用中就有了拖放的能力。
这个教程显示了如何构建购物车页,它使用户拖放他们希望购买的产品,更新购物篮的物品和价格。
显示产品页:
Balloon
Price:
$25
Feeling
--otherproducts-->
ul元素包含一些li元素以显示产品。
每一个产品的名称和单价属性在P元素中。
创建购物车:
300px;height:auto;">NameQuantityPriceTotal:$0
300px;height:
auto;">
NameQuantityPrice
Name
Quantity
Price
Total:
$0
使用datagrid显示购物篮项目。
拖曳产品副本
$('.item').draggable({
revert:
true,
'clone',
onStartDrag:
function(){
$(this).draggable('options').cursor='not-allowed';
$(this).draggable('proxy').css('z-index',10);
},
onStopDrag:
$(this).draggable('options').cursor='move';
我们设置draggable属性proxy为clone,所以拖曳元素使用clone效果。
将选择的产品放入购物车
$('.cart').droppable({
onDragEnter:
function(e,source){
$(source).draggable('options').cursor='auto';
onDragLeave:
$(source).draggable('options').cursor='not-allowed';
onDrop:
varname=$(source).find('p:
eq(0)').html();
varprice=$(source).find('p:
eq
(1)').html();
addProduct(name,parseFloat(price.split('$')[1]));
vardata={"total":
0,"rows":
[]};
vartotalCost=0;
functionaddProduct(name,price){
functionadd(){
for(vari=0;ivarrow=data.rows[i];if(row.name==name){row.quantity+=1;return;}}data.total+=1;data.rows.push({name:name,quantity:1,price:price});}add();totalCost+=price;$('#cartcontent').datagrid('loadData',data);$('div.cart.total').html('Total:$'+totalCost);}当放下产品时,我们得到产品的名称和单价,然后调用addProduct函数更新购物篮。创建课程表本教程显示了如何使用jQueryeasyui创建课程表。我们创建两个表:在左面的课程列表和右面的时间表。你可以拖课程到时间表的单元格中。课程是元素,时间格是元素。显示课程EnglishScience--othersubjects-->
varrow=data.rows[i];
if(row.name==name){
row.quantity+=1;
return;
data.total+=1;
data.rows.push({
name:
name,
quantity:
1,
price:
price
add();
totalCost+=price;
$('#cartcontent').datagrid('loadData',data);
$('div.cart.total').html('Total:
$'+totalCost);
当放下产品时,我们得到产品的名称和单价,然后调用addProduct函数更新购物篮。
创建课程表
本教程显示了如何使用jQueryeasyui创建课程表。
我们创建两个表:
在左面的课程列表和右面的时间表。
你可以拖课程到时间表的单元格中。
课程是元素,时间格是元素。
显示课程
--othersubjects-->
显示时间表
Monday
Tuesday
Wednesday
Thursday
Friday
08:
00
--othercells-->
拖动左面的课程
$('.left.item').draggable({
放置课程到时间表中
$('.righttd.drop').droppable({
$(this).addClass('over');
$(this).removeClass('over');
if($(source).hasClass('assigned')){
$(this).append(source);
}else{
varc=$(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
true
当用户拖动左面的课程到右面的时间表中,onDrop函数被调用。
源元素的副本被从左面拖动并且附加到到时间表的单元格中。
当放置课程到时间表的单元格到另一个单元格时,简单的移动它。
2.菜单和按钮MenuandButton
o建立简单菜单
o建立链接按钮
o建立菜单按钮
o建立分割按钮
创建简单菜单
在DIV标记中定义菜单。
像这样:
120px;">alert('new')">NewOpen150px;">WordExcelPowerPointSaveExit
120px;">
alert('new')">NewOpen150px;">WordExcelPowerPoint
alert('new')">New
Open
150px;">Word
150px;">
Save
建立菜单,你需要运行下列jQuery代码
$('#mm').menu();
//或者$('#mm').menu(options);
当菜单被创建时是不可见的,可使用show方法显示或者hide方法隐藏:
$('#mm').menu('show',{
left:
200,
top:
100
现在,我们创建菜单并在(200,100)处显示。
运行代码会得到:
创建连接按钮
通常使用元素创建按钮。
链接按钮使用A元素创建,事实上,链接按钮是A元素但显示为按钮样式。
创建链接按钮,首先创建A元素:
5px;background:#efefef;width:500px;">CancelRefreshQuerytextbuttonPrintDEMO2
5px;background:
#efefef;width:
500px;">
Cancel
Refresh
Query
textbutton
Print
5px;background:#efefef;width:500px;">CancelRefreshQuerytextbuttonPrint icon属性是iconCSS类是在按钮上显示的图标。运行代码,出现:一些时候,你可以决定禁用或者不禁用连接按钮,使用下面的代码可以禁用连接图标:$(selector).linkbutton({disabled:true});建立菜单按钮菜单按钮包含按钮和菜单两部分,当点击或者移动鼠标到按钮上的时候,显示相应的菜单。定义菜单按钮,需要定义链接按钮和菜单,像这样:#C9EDCC;padding:5px;width:200px;">void(0)"id="mb1"icon="icon-edit">Editvoid(0)"id="mb2"icon="icon-help">Help150px;">UndoRedoCutCopyPasteDeleteSelectAll100px;">HelpUpdate
icon属性是iconCSS类是在按钮上显示的图标。
运行代码,出现:
一些时候,你可以决定禁用或者不禁用连接按钮,使用下面的代码可以禁用连接图标:
$(selector).linkbutton({disabled:
true});
建立菜单按钮
菜单按钮包含按钮和菜单两部分,当点击或者移动鼠标到按钮上的时候,显示相应的菜单。
定义菜单按钮,需要定义链接按钮和菜单,像这样:
#C9EDCC;padding:5px;width:200px;">void(0)"id="mb1"icon="icon-edit">Editvoid(0)"id="mb2"icon="icon-help">Help150px;">UndoRedoCutCopyPasteDeleteSelectAll
#C9EDCC;padding:
5px;width:
200px;">
void(0)"id="mb1"icon="icon-edit">Editvoid(0)"id="mb2"icon="icon-help">Help150px;">UndoRedoCutCopyPaste
void(0)"id="mb1"icon="icon-edit">Edit
void(0)"id="mb2"icon="icon-help">Help150px;">UndoRedoCutCopy
void(0)"id="mb2"icon="icon-help">Help
150px;">UndoRedoCut
Undo
Redo
Delete
100px;">Help
100px;">
使用下列jQuery代码:
$('#mb1').menubutton({menu:
'#mm1'});
$('#mb2').menubutton({menu:
'#mm2'});
现在,菜单按钮就完成了。
建立拆分按钮
拆分按钮包括链接按钮和菜单。
当用户点击或者悬停在下箭头区域时显示相关菜单。
这个例子是建立拆分按钮的演示:
首先,创建一个链接按钮和菜单标记:
1pxsolid#ccc;background:#ddd;padding:5px;width:120px;">void(0)"id="sb"icon="icon-edit">Editvoid(0)"class="easyui-linkbutton"plain="true"icon="icon-help">150px;">UndoRedoCutCopyPasteOpen150px;">FirefoxInternetExplorer
1pxsolid#ccc;background:
#ddd;padding:
void(0)"id="sb"icon="icon-edit">Editvoid(0)"class="easyui-linkbutton"plain="true"icon="icon-help">150px;">UndoRedoCutCopyPaste
void(0)"id="sb"icon="icon-edit">Edit
void(0)"class="easyui-linkbutton"plain="true"icon="icon-help">150px;">UndoRedoCutCopy
void(0)"class="easyui-linkbutton"plain="true"icon="icon-help">
150px;">Firefox
jQuery代码:
$('#sb').splitbutton({menu:
'#mm'});
运行后会出现:
3.版面
o创建边框版面
o面板上的复合版面
o建立可折叠版面
o建立TABS
o动态添加TABS
o建立XP样式左面板
创建边框版面网页
边框版面提供5个区域:
东西南北中(其实就是上下左右中),下面是通常用法:
∙北区可以用于网站banner
∙南区可以用于版权信息和注释
∙西区可以用于导航菜单
∙东区可以用于推广项目
∙中区可以用于主内容
运用版面,需要确认版面容器然后定义一些区域。
版面至少要有一个中间区域。
下列是版面例子:
400px;height:300px;">150px;">5px;margin:0;">Selectlanguage:void(0)"onclick="showpage('java.html')">Java
400px;height:
300px;">
150px;">5px;margin:0;">Selectlanguage:
5px;margin:0;">Selectlanguage:
5px;margin:
0;">Selectlanguage:
void(0)"onclick="showpage('java.html')">Java
void(0)"onclick="showpage('cshape.html')">C#
void(0)"onclick="showpage('vb.html')">VB
void(0)"onclick="showpage('erlang.html')">Erlang
5px;">我们使用DIV容器创建边框版面。版面拆分容器为2部分,左面是导航菜单右面是主内容。中间区域的面板,我们设置href属性以调用出示网页。运行layout.html的结果是:写下onclick事件控制函数以获取数据,showpage函数非常简单:functionshowpage(url){$('#content').load(url);}面板上的复合版面面板允许你建立为多用户定制版面。这个例子我们建立MSN信息框,通过面板版面插件:我们使用多种版面在面板区域中。最上面的信息框我们放置搜索input,也可以放置头像在右面。中间区域我们差分成两部分通过split属性为TRUE,允许用户改变面板上区域的大小:代码:5px;width:500px;height:250px;">Search:1pxsolid#ccc;">60px;">auto;border:0;width:100%;height:100%;">Hi,Iameasyui. 展开阅读全文 相关资源 安全管理必须重视“人本观”.docx 高中英语重点词汇:那些老是记混的词.docx 鉴定真假轴承的技巧.docx 提高职工安全意识的方法.docx 煤的热工性质及对火焰的影响.docx 非煤矿山井下电工安全操作规程.docx 某物业公司保洁操作规程.docx 压力管道基础知识.docx 初中数学知识分值比重分析附各年级重难点.docx 初中数学考试答题要点归纳.docx 猜你喜欢 珠宝店促销活动策划方案.docx ceo助理岗位职责.docx 110kV地区变电站继电保护设计最新毕业设计.docx 定岗定编原则.docx 初中劳技教案.docx 有关六一儿童节活动策划多篇.docx SBS防水卷材施工工艺.docx 翻译调节肿瘤蛋白1TPT1ELISA试剂盒说明书.docx 46管理会计.docx 相关搜索 jQueryEasyUI 当前位置:首页 > 党团工作 > 其它
5px;">
我们使用DIV容器创建边框版面。
版面拆分容器为2部分,左面是导航菜单右面是主内容。
中间区域的面板,我们设置href属性以调用出示网页。
运行layout.html的结果是:
写下onclick事件控制函数以获取数据,showpage函数非常简单:
functionshowpage(url){
$('#content').load(url);
面板上的复合版面
面板允许你建立为多用户定制版面。
这个例子我们建立MSN信息框,通过面板版面插件:
我们使用多种版面在面板区域中。
最上面的信息框我们放置搜索input,也可以放置头像在右面。
中间区域我们差分成两部分通过split属性为TRUE,允许用户改变面板上区域的大小:
代码:
5px;width:500px;height:250px;">Search:1pxsolid#ccc;">60px;">auto;border:0;width:100%;height:100%;">Hi,Iameasyui. 展开阅读全文 相关资源 安全管理必须重视“人本观”.docx 高中英语重点词汇:那些老是记混的词.docx 鉴定真假轴承的技巧.docx 提高职工安全意识的方法.docx 煤的热工性质及对火焰的影响.docx 非煤矿山井下电工安全操作规程.docx 某物业公司保洁操作规程.docx 压力管道基础知识.docx 初中数学知识分值比重分析附各年级重难点.docx 初中数学考试答题要点归纳.docx 猜你喜欢 珠宝店促销活动策划方案.docx ceo助理岗位职责.docx 110kV地区变电站继电保护设计最新毕业设计.docx 定岗定编原则.docx 初中劳技教案.docx 有关六一儿童节活动策划多篇.docx SBS防水卷材施工工艺.docx 翻译调节肿瘤蛋白1TPT1ELISA试剂盒说明书.docx 46管理会计.docx 相关搜索 jQueryEasyUI 当前位置:首页 > 党团工作 > 其它
500px;height:
250px;">
Search:
1pxsolid#ccc;">60px;">auto;border:0;width:100%;height:100%;">Hi,Iameasyui. 展开阅读全文 相关资源 安全管理必须重视“人本观”.docx 高中英语重点词汇:那些老是记混的词.docx 鉴定真假轴承的技巧.docx 提高职工安全意识的方法.docx 煤的热工性质及对火焰的影响.docx 非煤矿山井下电工安全操作规程.docx 某物业公司保洁操作规程.docx 压力管道基础知识.docx 初中数学知识分值比重分析附各年级重难点.docx 初中数学考试答题要点归纳.docx 猜你喜欢 珠宝店促销活动策划方案.docx ceo助理岗位职责.docx 110kV地区变电站继电保护设计最新毕业设计.docx 定岗定编原则.docx 初中劳技教案.docx 有关六一儿童节活动策划多篇.docx SBS防水卷材施工工艺.docx 翻译调节肿瘤蛋白1TPT1ELISA试剂盒说明书.docx 46管理会计.docx 相关搜索 jQueryEasyUI 当前位置:首页 > 党团工作 > 其它
1pxsolid#ccc;">
60px;">auto;border:0;width:100%;height:100%;">Hi,Iameasyui. 展开阅读全文 相关资源 安全管理必须重视“人本观”.docx 高中英语重点词汇:那些老是记混的词.docx 鉴定真假轴承的技巧.docx 提高职工安全意识的方法.docx 煤的热工性质及对火焰的影响.docx 非煤矿山井下电工安全操作规程.docx 某物业公司保洁操作规程.docx 压力管道基础知识.docx 初中数学知识分值比重分析附各年级重难点.docx 初中数学考试答题要点归纳.docx 猜你喜欢 珠宝店促销活动策划方案.docx ceo助理岗位职责.docx 110kV地区变电站继电保护设计最新毕业设计.docx 定岗定编原则.docx 初中劳技教案.docx 有关六一儿童节活动策划多篇.docx SBS防水卷材施工工艺.docx 翻译调节肿瘤蛋白1TPT1ELISA试剂盒说明书.docx 46管理会计.docx 相关搜索 jQueryEasyUI 当前位置:首页 > 党团工作 > 其它
60px;">
auto;border:0;width:100%;height:100%;">Hi,Iameasyui. 展开阅读全文 相关资源 安全管理必须重视“人本观”.docx 高中英语重点词汇:那些老是记混的词.docx 鉴定真假轴承的技巧.docx 提高职工安全意识的方法.docx 煤的热工性质及对火焰的影响.docx 非煤矿山井下电工安全操作规程.docx 某物业公司保洁操作规程.docx 压力管道基础知识.docx 初中数学知识分值比重分析附各年级重难点.docx 初中数学考试答题要点归纳.docx 猜你喜欢 珠宝店促销活动策划方案.docx ceo助理岗位职责.docx 110kV地区变电站继电保护设计最新毕业设计.docx 定岗定编原则.docx 初中劳技教案.docx 有关六一儿童节活动策划多篇.docx SBS防水卷材施工工艺.docx 翻译调节肿瘤蛋白1TPT1ELISA试剂盒说明书.docx 46管理会计.docx 相关搜索 jQueryEasyUI 当前位置:首页 > 党团工作 > 其它
auto;border:
0;width:
100%;height:
100%;">Hi,Iameasyui.
展开阅读全文 相关资源 安全管理必须重视“人本观”.docx 高中英语重点词汇:那些老是记混的词.docx 鉴定真假轴承的技巧.docx 提高职工安全意识的方法.docx 煤的热工性质及对火焰的影响.docx 非煤矿山井下电工安全操作规程.docx 某物业公司保洁操作规程.docx 压力管道基础知识.docx 初中数学知识分值比重分析附各年级重难点.docx 初中数学考试答题要点归纳.docx 猜你喜欢 珠宝店促销活动策划方案.docx ceo助理岗位职责.docx 110kV地区变电站继电保护设计最新毕业设计.docx 定岗定编原则.docx 初中劳技教案.docx 有关六一儿童节活动策划多篇.docx SBS防水卷材施工工艺.docx 翻译调节肿瘤蛋白1TPT1ELISA试剂盒说明书.docx 46管理会计.docx 相关搜索 jQueryEasyUI 当前位置:首页 > 党团工作 > 其它
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1