如何使用EasyUILayout組件-創(chuàng)新互聯(lián)

如何使用EasyUI Layout組件

創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為青山企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，青山網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

<div id="l" class="easyui-layout" data-options="width:500,height:250">
    <div data-options="region:'north',title:'north',height:50"></div>
    <div data-options="region:'west',title:'west',width:100"></div>
    <div data-options="region:'east',title:'east',width:100"></div>
    <div data-options="region:'center',title:'center'">
        <table id="dg" class="easyui-datagrid" data-options="fit:true,url:'/easyui/data.json',border:false,method:'get',singleSelect:true,fitColumns:true">
            <thead>
                <tr>
                    <th data-options="field:'name',width:'33%'">姓名</th>
                    <th data-options="field:'age',width:'33%'">年齡</th>
                    <th data-options="field:'sex',width:'34%',align:'right'">性別</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<body class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',title:'full screen'"></div>
    <!-- 說(shuō)明: 加載jquery-easyui腳本文件 -->
    <script src="js/jquery-easyui/jquery.min.js"></script>
    <script src="js/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</body>
或
<div id="l" class="easyui-layout">
    <div data-options="region:'center',title:'full screen'"></div>
</div>
<!-- 說(shuō)明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    width = $(document).width();
    height = $(document).height();
    $('#l').layout({
        width: width,
        height: height,
    });
</script>

如何使用EasyUI Layout組件

<div id="l" class="easyui-layout" data-options="width:500,height:250">
    <div data-options="region:'west',title:'west',width:'30%',content:'30%',bodyCls:'layoutPadding'"></div>
    <div data-options="region:'center',title:'center',bodyCls:'layoutPadding'"></div>
</div>
<style type="text/css" scoped="scoped">
    .layoutPadding {
        padding: 10px;
    }
</style>

如何使用EasyUI Layout組件

<div id="l" class="easyui-layout" data-options="width:500,height:250">
    <div data-options="region:'north',height:50">
        <a href="#" class="easyui-linkbutton" onclick="javascript:add(this);">添加</a>
        <a href="#" class="easyui-linkbutton" onclick="javascript:remove(this);">刪除</a>
    </div>
    <div data-options="region:'south',height:50">南</div>
    <div data-options="region:'west',width:100">西</div>
    <div data-options="region:'east',width:100">東</div>
    <div data-options="region:'center'">
        <p>點(diǎn)擊上面按鈕添加一行內(nèi)容</p>
    </div>
</div>
<!-- 說(shuō)明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    // 中間最后一行添加一行內(nèi)容
    function add(that){
        $('#l').layout('panel', 'center').append('<p>點(diǎn)擊上面按鈕添加一行內(nèi)容</p>');
        resetHeight();
    };
    // 刪除中間最后的一行的內(nèi)容
    function remove(that){
        $('#l').layout('panel', 'center').find('p:last').remove();
        resetHeight();
    };       
    // 重置整個(gè)layout的高度
    function resetHeight(){
        // 獲取中間的panel Jquery對(duì)象
        var cpanel = $('#l').layout('panel', 'center');
        // 獲取當(dāng)前cpanel的高度
        var cpanelOldHeight = cpanel.outerHeight();
        // 設(shè)置中間的panel對(duì)象的高度為自適應(yīng)
        cpanel.panel('resize', {height: 'auto'});
        // 重新獲取cpanel的高度
        var cpanelNewHeight = cpanel.outerHeight();
        // 重置layout的寬度,減少兩次之差即可
        var layoutheight = $('#l').height() - (cpanelOldHeight-cpanelNewHeight);
        $('#l').layout('resize', {height: layoutheight});      
    }; 
</script>

如何使用EasyUI Layout組件

<div id="l" class="easyui-layout" data-options="width:500,height:250">
    <div data-options="region:'north',height:50"></div>
    <div data-options="region:'south',height:50"></div>
    <div data-options="region:'west',width:50"></div>
    <div data-options="region:'center'">
        <div id="ll" class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',width:100,split:true,border:false"></div>
            <div data-options="region:'center',border:false"></div>
        </div>
    </div>
</div>

如何使用EasyUI Layout組件

<div id="l" class="easyui-layout" data-options="width:500,height:250">
    <div data-options="region:'north',height:50"></div>
    <div data-options="region:'south',height:50"></div>
    <div data-options="region:'west',width:'70%',collapsible:false,bodyCls:'layoutPadding',title:'recruitment notice:',iconCls:'icon-ok'">
        <p>招聘運(yùn)維開(kāi)發(fā)工程師</p>
        <ul>
            <li>投簡(jiǎn)歷至: xmdevops@vip.qq.com</li>
        </ul>
    </div>
    <div data-options="region:'center',width:'30%'">
        
    </div>
</div>
<style type="text/css">
    .layoutPadding {
        padding: 10px;
    }
</style>

如何使用EasyUI Layout組件

<div id="lo" class="easyui-layout" data-options="width:500,height:250">
    <div data-options="region:'north',height:50"></div>
    <div data-options="region:'south',height:50"></div>
    <div data-options="title:'menu',region:'west',width:100">
        <div id="ac" class="easyui-accordion" data-options="fit:true,border:false">
            <div data-options="title:'accordion1',bodyCls:'padding10'">accordion1</div>
            <div data-options="title:'accordion2',bodyCls:'padding10'">accordion2</div>
            <div data-options="title:'accordion3',bodyCls:'padding10'">accordion3</div>
        </div>
    </div>
    <div data-options="region:'east',width:200">
        <ul id="te" class="easyui-tree" data-options="fit:true,border:false">
            <li>
                <span>1</span>
                <ul>
                    <li>1-1</li>
                    <li>
                        <span>2</span>
                        <ul>
                            <li>2-1</li>
                            <li>
                                <span>3</span>
                                <ul>
                                    <li>3-1</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>  
        </ul> 
    </div>
    <div data-options="region:'center',border:false">
        <div id="tb" class="easyui-tabs" data-options="fit:true">
            <div data-options="title:'About',bodyCls:'padding10'">
                <p>物聯(lián)網(wǎng)開(kāi)發(fā)公司</p>
                <ul>
                    <li>成立于2008年.</li>
                </ul>
            </div>
            <div data-options="title:'Company',border:false">
                <table id="dg" class="easyui-datagrid" data-options="url:'/easyui/data.json',method:'get',fit:true,singleSelect:true,fitColumns:true">
                    <thead>
                        <th data-options="field:'name',width:'33%'">名字</th>
                        <th data-options="field:'age',width:'33%'">年齡</th>
                        <th data-options="field:'sex',width:'34%'">性別</th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
<style type="text/css" scoped="scoped">
    .padding10 {
        padding: 10px;
    };
</style>

如何使用EasyUI Layout組件

<div id="lo" class="easyui-layout" data-options="width:500,height:250">
    <div data-options="region:'north',height:100,bodyCls:'padding10'">
        <fieldset>
            <legend>操作區(qū)</legend>
            <div >
                <span>region:</span>
                <select name="region" id="regionArea">
                    <option value="south">south</option>
                    <option value="west">west</option>
                    <option value="east">east</option>
                    <option value="center">center</option>
                </select>
            </div>
            <div >
                <a href="#" class="easyui-linkbutton" onclick="javascript:add(this);">添加</a>
                <a href="#" class="easyui-linkbutton" onclick="javascript:remove(this);">刪除</a>
            </div>
        </fieldset>
    </div>
    <div data-options="region:'south',height:50"></div>
    <div data-options="region:'west',width:100"></div>
    <div data-options="region:'east',width:100"></div>
    <div data-options="region:'center'"></div>
</div>
<style type="text/css" scoped="scoped">
    .padding10 {
        padding: 10px;
    }
</style>
<!-- 說(shuō)明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    // 添加布局
    function add(that){
        var region = $('#regionArea').val();
        var regionPanel = $('#lo').layout('panel', region);
        if(regionPanel.length) return;
        
        var options = {region: region};
        if(['north', 'south'].indexOf(region)) options['height']=50;
        if(['west', 'east'].indexOf(region)) options['width'] = 100;
        $('#lo').layout('add', options);
    };
    // 刪除布局
    function remove(that){
        var region = $('#regionArea').val();
        var regionPanel = $('#lo').layout('panel', region);
        if(!regionPanel.length) return;
        $('#lo').layout('remove', region);
    };
</script>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：如何使用EasyUILayout組件-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article38/cedopp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、全網(wǎng)營(yíng)銷(xiāo)推廣、做網(wǎng)站、云服務(wù)器、電子商務(wù)、定制開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容