jQuery組件easyui基本布局實(shí)現(xiàn)代碼
更新時間：2016年08月25日 10:44:44 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了jQuery easyui基本布局實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> </head> <body> <h2>基本布局</h2> <p>布局包括北，南，東，西，中間，部分</p> <div style="margin:20px 0;"></div> <div 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="東" style="width:100px;"></div> <div data-options="region:'west',split:true" title="西" style="width:100px;"></div> <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"> <table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true"> <thead> <tr> <th data-options="field:'itemid'" width="80">Item ID</th> <th data-options="field:'productid'" width="100">Product ID</th> <th data-options="field:'listprice',align:'right'" width="80">List Price</th> <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th> <th data-options="field:'attr1'" width="150">Attribute</th> <th data-options="field:'status',align:'center'" width="60">Status</th> </tr> </thead> </table> </div> </div> </body> </html>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery學(xué)習(xí)筆記之jQuery選擇器的使用
jQuery中最核心和最讓人愛不釋手的就是選擇器，下面就是各種選擇器代筆的意義。2010-12-12
jQuery中將json數(shù)據(jù)顯示到頁面表格的方法
今天小編就為大家分享一篇jQuery中將json數(shù)據(jù)顯示到頁面表格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05
Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
這篇文章主要介紹了Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實(shí)現(xiàn)
這篇文章主要介紹了EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
pushStack()方法在jQuery的DOM操作中被頻繁的使用, 如在parent(), find(), filter()中, 當(dāng)然還有其他許多類似的方法, 它們往往需要返回一個jQuery封裝過的DOM結(jié)果集2012-02-02
JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用示例
這篇文章主要介紹了JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用,結(jié)合實(shí)例形式分析了jQuery動態(tài)修改css樣式、事件響應(yīng)以及選項(xiàng)卡相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
今天小編就為大家分享一篇關(guān)于jQuery.parseJSON()函數(shù)詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02
jquery是一種廣泛使用的javascript庫,獲取a標(biāo)簽上的href值是一個常見的需求,要獲取a標(biāo)簽上的href值,只需使用選擇器選擇a元素,并使用attr()方法來獲取href屬性值,以下是一些使用jQuery獲取a標(biāo)簽上的href值的示例代碼,需要的朋友可以參考下2024-05-05
jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼控制按鈕禁用功能
最近接到新需求，需要實(shí)現(xiàn)一個點(diǎn)擊發(fā)送驗(yàn)證碼之后，按鈕禁用，在5秒之后取消禁用，看似需求很簡單，實(shí)現(xiàn)起來還真的好好動動腦筋，下面小編把jquery控制按鈕禁用核心代碼分享給大家，需要的朋友參考下吧2021-07-07
基于jQuery實(shí)現(xiàn)的設(shè)置文本區(qū)域的光標(biāo)位置
之前做一個代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當(dāng)前光標(biāo)位置插入文本,本文章向大家介紹jQuery如何設(shè)置文本區(qū)域的光標(biāo)位置，需要的朋友可以參考一下2018-06-06