EasyUI Layout 添加、刪除、摺疊、展開佈局

時間 2019-11-29

標籤 easyui layout 添加刪除摺疊展開佈局简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <title>吹泡泡的魚-主頁</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>添加、刪除、摺疊、展開佈局</h2>
    <p>單擊下面的按鈕操做佈局區域面板</p>
    <div style="margin:20px 0;">
        <span>選擇區域面板:</span>
        <select id="region">
            <option value="north">North</option>
            <option value="south">South</option>
            <option value="east">East</option>
            <option value="west">West</option>
        </select>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">添加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">刪除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="collapseExpandPanel()">摺疊/展開</a>
    </div>
    <div id="cc" class="easyui-layout" style="width:700px;height:350px;">
        <div data-options="region:'north'" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
        <div data-options="region:'center',title:'Center'"></div>
    </div>
    <script type="text/javascript">
        function addPanel(){
            var region = $('#region').val();
            var options = {
                region: region
            };
            if (region=='north' || region=='south'){
                options.height = 50;
            } else {
                options.width = 100;
                options.split = true;
                options.title = $('#region option:selected').text();
            }
            $('#cc').layout('add', options);
        }
        function removePanel(){
            $('#cc').layout('remove', $('#region').val());
        }
        
        function collapseExpandPanel(){
            var p=$("#cc").layout("panel", $('#region').val())[0];
            if(p){
                p = p.clientWidth;
                if (p > 0){
                    //摺疊
                    $('#cc').layout('collapse', $('#region').val());
                }else{
                    //展開
                    $('#cc').layout('expand', $('#region').val());
                }
            }else{
                alert("此區域面板不存在");
            }
            
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。