zoukankan      html  css  js  c++  java
  • jQuery easyUI pannel 用法记录

    主要实现了easyUI中
    1 panel的打开,关闭,resize。
    2 通过按钮动态新建panel。

    <!
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Panel Practise</title> <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css"> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> <style> .panel{ display:inline; float:left } body{ overflow:auto; } </style> <script type="text/javascript" > // fit 为true 时, width 和 height 失去效果 // move 不好用 $(function(){ $("#pannel").panel({ title:"测试panel", 300, height:300, fit:false, border:true, noheader:false, collapsible:true, minimizable:true, maximizable:true, closable:true, collapsed:false, iconCls:"icon-ok", tools:[ { iconCls:'icon-add', handler:function(){alert('add')} },{ iconCls:'icon-edit', handler:function(){alert('edit')} }], onBeforeOpen:function(){ alert("onBeforeOpen"); }, onOpen:function(){ alert("onOpen"); }, onBeforeClose:function(){ alert("onBeforeClose"); }, onClose:function(){ alert("onClose"); } }); $("#openpanel").bind("click", openPanel); $("#closepanel").bind("click", closePanel); $("#movepanel").bind("click", movePanel); $("#resizepanel").bind("click", resizePanel); $("#newpanel").bind("click", newPanel); }); function openPanel(){ console.log("openPanel"); $("#pannel").panel('open'); } function closePanel(){ console.log("closePanel"); $("#pannel").panel('close'); } function movePanel(){ console.log("movePanel"); $("#pannel").panel('move',{left:100, top:100}); } function resizePanel(){ console.log("resizePanel"); $("#pannel").panel('resize',{height:100, 100}); } function newPanel(){ console.log("new"); var index = $(".panel").size(); var p_id = "pannel" + index; var html = "<div id='"+ p_id +"'></div>" console.log(html); $(".panel:last").after(html) $("#"+p_id).panel({ title:"测试panel", 300, height:300, content: p_id }); } </script> </head> <body> <div style="display:block"> <input id="openpanel" type="button" value="打开" /> <input id="closepanel" type="button" value="关闭" /> <input id="movepanel" type="button" value="移动" /> <input id="resizepanel" type="button" value="resize" /> <input id="newpanel" type="button" value="新建" /> </div> <div id="pannel" style="300px; height:300px;" > abc </div> </body> </html>
  • 相关阅读:
    在wepy里面使用redux
    使用es6的蹦床函数解决递归造成的堆栈溢出
    解决layui下拉选择框只能选择不能手动输入文字
    POJ 2230 Watchcow (欧拉回路)
    POJ 2337 Catenyms (欧拉回路)
    POJ 2513 Colored Sticks (欧拉回路 + 字典树 +并查集)
    HDU 3018 Ant Trip (欧拉回路)
    HDU 1023 Train Problem II (大数卡特兰数)
    HDU 2067 小兔的棋盘 (卡特兰数)
    HDU 3584 Cube (三维数状数组)
  • 原文地址:https://www.cnblogs.com/Eastsong/p/3595764.html
Copyright © 2011-2022 走看看