當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

jQuery easyUI pannel 用法记录

發(fā)布時間：2023/12/19 综合教程 24 生活家

生活随笔收集整理的這篇文章主要介紹了 jQuery easyUI pannel 用法记录小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

主要實現(xiàn)了easyUI中
1  panel的打開，關(guān)閉，resize。 
2  通過按鈕動態(tài)新建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>
<input id="openpanel" type="button" value="打開" />
<input id="closepanel" type="button" value="關(guān)閉" />
<input id="movepanel" type="button" value="移動" />
<input id="resizepanel" type="button" value="resize" />
<input id="newpanel" type="button" value="新建" />
</div>


<div id="pannel"  >   
 abc
</div>

</body>
</html>

總結(jié)

以上是生活随笔為你收集整理的jQuery easyUI pannel 用法记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python爬图片 beautifuls
下一篇：网络资产管理系统_RFID固定资产管理系