jQueryEasyUIWord文档格式.docx
- 文档编号:21829098
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:124
- 大小:467.48KB
jQueryEasyUIWord文档格式.docx
《jQueryEasyUIWord文档格式.docx》由会员分享,可在线阅读,更多相关《jQueryEasyUIWord文档格式.docx(124页珍藏版)》请在冰豆网上搜索。
表示proxy使用原始元素的复制。
#dd2'
).draggable({
proxy:
});
让第三个DIV元素使用自定义proxy来拖放
#dd3'
function(source){
varp=$('
divclass="
proxy"
proxy<
);
p.appendTo('
body'
returnp;
}
构建购物车型拖放
使用jQueryeasyui,我们在web应用中就有了拖放的能力。
这个教程显示了如何构建购物车页,它使用户拖放他们希望购买的产品,更新购物篮的物品和价格。
显示产品页:
ulclass="
products"
li>
ahref="
#"
item"
imgsrc="
shirt1.gif"
/>
div>
p>
Balloon<
/p>
Price:
$25<
/a>
/li>
shirt2.gif"
Feeling<
!
--otherproducts-->
/ul>
ul元素包含一些li元素以显示产品。
每一个产品的名称和单价属性在P元素中。
创建购物车:
cart"
h1>
ShoppingCart<
/h1>
tableid="
cartcontent"
style="
width:
300px;
height:
auto;
"
thead>
tr>
thfield="
name"
width=140>
Name<
/th>
quantity"
width=60align="
right"
Quantity<
price"
Price<
/tr>
/thead>
/table>
pclass="
total"
Total:
$0<
h2>
Dropheretoaddtocart<
/h2>
使用datagrid显示购物篮项目。
拖曳产品副本
.item'
revert:
true,
onStartDrag:
function(){
$(this).draggable('
options'
).cursor='
not-allowed'
;
proxy'
).css('
z-index'
10);
},
onStopDrag:
).cursor='
move'
我们设置draggable属性proxy为clone,所以拖曳元素使用clone效果。
将选择的产品放入购物车
.cart'
).droppable({
onDragEnter:
function(e,source){
$(source).draggable('
auto'
onDragLeave:
onDrop:
varname=$(source).find('
p:
eq(0)'
).html();
varprice=$(source).find('
eq
(1)'
addProduct(name,parseFloat(price.split('
$'
)[1]));
vardata={"
:
0,"
rows"
[]};
vartotalCost=0;
functionaddProduct(name,price){
functionadd(){
for(vari=0;
i<
data.total;
i++){
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('
$'
+totalCost);
}
当放下产品时,我们得到产品的名称和单价,然后调用addProduct函数更新购物篮。
创建课程表
本教程显示了如何使用jQueryeasyui创建课程表。
我们创建两个表:
在左面的课程列表和右面的时间表。
你可以拖课程到时间表的单元格中。
课程是<
divclass='
item'
元素,时间格是<
tdclass='
drop'
元素。
显示课程
left"
table>
td>
English<
/td>
Science<
--othersubjects-->
显示时间表
tdclass="
blank"
title"
Monday<
Tuesday<
Wednesday<
Thursday<
Friday<
time"
08:
00<
drop"
--othercells-->
拖动左面的课程
.left.item'
放置课程到时间表中
.righttd.drop'
$(this).addClass('
over'
$(this).removeClass('
if($(source).hasClass('
assigned'
)){
$(this).append(source);
}else{
varc=$(source).clone().addClass('
$(this).empty().append(c);
c.draggable({
true
当用户拖动左面的课程到右面的时间表中,onDrop函数被调用。
源元素的副本被从左面拖动并且附加到到时间表的单元格中。
当放置课程到时间表的单元格到另一个单元格时,简单的移动它。
2.菜单和按钮MenuandButton
o建立简单菜单
o建立链接按钮
o建立菜单按钮
o建立分割按钮
创建简单菜单
在DIV标记中定义菜单。
像这样:
mm"
120px;
divonclick="
javascript:
alert('
new'
)"
New<
span>
Open<
/span>
divstyle="
150px;
b>
Word<
/b>
Excel<
PowerPoint<
divicon="
icon-save"
Save<
menu-sep"
Exit<
建立菜单,你需要运行下列jQuery代码
#mm'
).menu();
//或者$('
).menu(options);
当菜单被创建时是不可见的,可使用show方法显示或者hide方法隐藏:
).menu('
show'
{
left:
200,
top:
100
现在,我们创建菜单并在(200,100)处显示。
运行代码会得到:
创建连接按钮
通常使用<
button>
元素创建按钮。
链接按钮使用A元素创建,事实上,链接按钮是A元素但显示为按钮样式。
创建链接按钮,首先创建A元素:
h3>
DEMO1<
/h3>
padding:
5px;
background:
#efefef;
500px;
easyui-linkbutton"
icon="
icon-cancel"
Cancel<
icon-reload"
Refresh<
icon-search"
Query<
textbutton<
icon-print"
Print<
DEMO2<
plain="
true"
icon-help"
&
nbsp;
icon-back"
icon属性是iconCSS类是在按钮上显示的图标。
运行代码,出现:
一些时候,你可以决定禁用或者不禁用连接按钮,使用下面的代码可以禁用连接图标:
$(selector).linkbutton({disabled:
true});
建立菜单按钮
菜单按钮包含按钮和菜单两部分,当点击或者移动鼠标到按钮上的时候,显示相应的菜单。
定义菜单按钮,需要定义链接按钮和菜单,像这样:
#C9EDCC;
200px;
void(0)"
id="
mb1"
icon-edit"
Edit<
mb2"
Help<
mm1"
icon-undo"
Undo<
icon-redo"
Redo<
Cut<
Copy<
Paste<
icon-remove"
Delete<
SelectAll<
mm2"
100px;
Update<
About<
使用下列jQuery代码:
#mb1'
).menubutton({menu:
#mm1'
#mb2'
#mm2'
现在,菜单按钮就完成了。
建立拆分按钮
拆分按钮包括链接按钮和菜单。
当用户点击或者悬停在下箭头区域时显示相关菜单。
这个例子是建立拆分按钮的演示:
首先,创建一个链接按钮和菜单标记:
border:
1pxsolid#ccc;
#ddd;
sb"
Firefox<
InternetExplorer<
SelectProgram...<
jQuery代码:
#sb'
).splitbutton({menu:
运行后会出现:
3.版面
o创建边框版面
o面板上的复合版面
o建立可折叠版面
o建立TABS
o动态添加TABS
o建立XP样式左面板
创建边框版面网页
边框版面提供5个区域:
东西南北中(其实就是上下左右中),下面是通常用法:
∙北区可以用于网站banner
∙南区可以用于版权信息和注释
∙西区可以用于导航菜单
∙东区可以用于推广项目
∙中区可以用于主内容
运用版面,需要确认版面容器然后定义一些区域。
版面至少要有一个中间区域。
下列是版面例子:
easyui-layout"
400px;
divregion="
west"
split="
title="
Navigator"
pstyle="
margin:
0;
Selectlanguage:
ul>
onclick="
showpage('
java.html'
Java<
cshape.html'
C#<
vb.html'
VB<
erlang.html'
Erlang<
content"
region="
center"
Language"
java.html"
我们使用DIV容器创建边框版面。
版面拆分容器为2部分,左面是导航菜单右面是主内容。
中间区域的面板,我们设置href属性以调用出示网页。
运行layout.html的结果是:
写下onclick事件控制函数以获取数据,showpage函数非常简单:
functionshowpage(url){
#content'
).load(url);
面板上的复合版面
面板允许你建立为多用户定制版面。
这个例子我们建立MSN信息框,通过面板版面插件:
我们使用多种版面在面板区域中。
最上面的信息框我们放置搜索input,也可以放置头像在右面。
中间区域我们差分成两部分通过split属性为TRUE,允许用户改变面板上区域的大小:
代码:
easyui-panel"
ComplexPanelLayout"
collapsible="
250px;
fit="
north"
border="
false"
p-search"
label>
Search:
/label>
input>
/input>
east"
p-right"
msn.gif"
south"
60px;
textareastyle="
overflow:
100%;
Hi,Iameasyui.<
/textarea>
bor
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQueryEasyUI