书签 分享 收藏 举报 版权申诉 / 124
立即下载 加入VIP,免费下载
当前位置： 首页 > 初中教育 > jQueryEasyUI.docx

类型jQueryEasyUI.docx

  • 文档编号：8692903
  • 上传时间：2023-02-01
  • 格式：DOCX
  • 页数：124
  • 大小：467.48KB

让第一个DIV元素可拖放，使用默认的拖放样式。

$（'#dd1'）.draggable（）;

让第二个DIV元素使用proxy来拖放，proxy:

'clone'表示proxy使用原始元素的复制。

$（'#dd2'）.draggable（{

proxy:

'clone'

}）;

让第三个DIV元素使用自定义proxy来拖放

$（'#dd3'）.draggable（{

proxy:

function（source）{

varp=$（'proxy

'）;

p.appendTo（'body'）;

returnp;

}

}）;

构建购物车型拖放

使用jQueryeasyui，我们在web应用中就有了拖放的能力。

这个教程显示了如何构建购物车页，它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。

显示产品页：

  • Balloon

    Price:

    $25

  • Feeling

    Price:

    $25

    • --otherproducts-->

    ul元素包含一些li元素以显示产品。

    每一个产品的名称和单价属性在P元素中。

    创建购物车：

    ShoppingCart

    300px;height:

    auto;">

    Name

    Quantity

    Price

    Total:

    $0

    Dropheretoaddtocart

    使用datagrid显示购物篮项目。

    拖曳产品副本

    $（'.item'）.draggable（{

    revert:

    true,

    proxy:

    'clone',

    onStartDrag:

    function（）{

    $（this）.draggable（'options'）.cursor='not-allowed';

    $（this）.draggable（'proxy'）.css（'z-index',10）;

    },

    onStopDrag:

    function（）{

    $（this）.draggable（'options'）.cursor='move';

    }

    }）;

    我们设置draggable属性proxy为clone，所以拖曳元素使用clone效果。

    将选择的产品放入购物车

    $（'.cart'）.droppable（{

    onDragEnter:

    function（e,source）{

    $（source）.draggable（'options'）.cursor='auto';

    },

    onDragLeave:

    function（e,source）{

    $（source）.draggable（'options'）.cursor='not-allowed';

    },

    onDrop:

    function（e,source）{

    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;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（'Total:

    $'+totalCost）;

    }

    当放下产品时，我们得到产品的名称和单价，然后调用addProduct函数更新购物篮。

    创建课程表

    本教程显示了如何使用jQueryeasyui创建课程表。

    我们创建两个表：

    在左面的课程列表和右面的时间表。

    你可以拖课程到时间表的单元格中。

    课程是元素，时间格是元素。

    显示课程

    --othersubjects-->

    English
    Science

    显示时间表

    Monday

    Tuesday

    Wednesday

    Thursday

    Friday

    08:

    00

    --othercells-->

    拖动左面的课程

    $（'.left.item'）.draggable（{

    revert:

    true,

    proxy:

    'clone'

    }）;

    放置课程到时间表中

    $（'.righttd.drop'）.droppable（{

    onDragEnter:

    function（）{

    $（this）.addClass（'over'）;

    },

    onDragLeave:

    function（）{

    $（this）.removeClass（'over'）;

    },

    onDrop:

    function（e,source）{

    $（this）.removeClass（'over'）;

    if（$（source）.hasClass（'assigned'））{

    $（this）.append（source）;

    }else{

    varc=$（source）.clone（）.addClass（'assigned'）;

    $（this）.empty（）.append（c）;

    c.draggable（{

    revert:

    true

    }）;

    }

    }

    }）;

    当用户拖动左面的课程到右面的时间表中，onDrop函数被调用。

    源元素的副本被从左面拖动并且附加到到时间表的单元格中。

    当放置课程到时间表的单元格到另一个单元格时，简单的移动它。

    2.菜单和按钮MenuandButton

    o建立简单菜单

    o建立链接按钮

    o建立菜单按钮

    o建立分割按钮

    创建简单菜单

    在DIV标记中定义菜单。

    像这样：

    120px;">

    alert（'new'）">New

    Open

    150px;">

    Word

    Excel

    PowerPoint

    Save

    Exit

    建立菜单，你需要运行下列jQuery代码

    $（'#mm'）.menu（）;

    //或者$（'#mm'）.menu（options）;

    当菜单被创建时是不可见的，可使用show方法显示或者hide方法隐藏：

    $（'#mm'）.menu（'show',{

    left:

    200,

    top:

    100

    }）;

    现在，我们创建菜单并在（200,100）处显示。

    运行代码会得到：

    创建连接按钮

    通常使用