jQuery EasyUI 折疊面板accordion的使用實例(分享)
更新時間：2017年12月25日 08:30:03 作者：你我他學習吧
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、對折疊面板區(qū)域 div 設置 class=”easyui-accordion”
2、在區(qū)域添加多個 div， 每個 div 就是一個面板 （每個面板一定要設置 title 屬性）。
3、設置面板屬性 fit 為 true，自適應父容器大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>easyui-折疊面板accordion的使用</title>
<!-- 導入jquery核心類庫 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 導入easyui類庫 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/default.css">
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'你我他學習吧-學習Java的好博客！'" style="height:100px"></div>
<div data-options="region:'west',title:'菜單導航'" style="width:200px">
<!--折疊面板-->
<div class="easyui-accordion" data-options="fit:true">
<div data-options="title:'基礎菜單'">面板一</div>
<div data-options="title:'系統(tǒng)菜單'">面板二</div>
</div>
</div>
<div data-options="region:'center',title:'中部區(qū)域'"></div>
<div data-options="region:'east',title:'東部區(qū)域'" style="width:100px"></div>
<div data-options="region:'south',title:'南部區(qū)域'" style="height:100px"></div>
</body>
</html>
以上這篇jQuery EasyUI 折疊面板accordion的使用實例(分享)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了jQuery實現(xiàn)基本隱藏與顯示效果的方法,結合實例形式詳細分析了jQuery中hide()、show()及toggle()等方法用于實現(xiàn)顯示/隱藏效果的相關操作技巧,需要的朋友可以參考下2018-09-09
正如標題所言肯定是js代碼寫錯的問題，經(jīng)檢查，果然發(fā)現(xiàn)問題在此與大家分享下以免有同樣的錯誤發(fā)生2013-09-09
在不同的瀏覽器中，一個文本框，如果只是直接給文本框設置focus()，那么光標聚焦的位置可能是在最前面。下面的代碼則是給jquery擴展一個textFocus方法2012-10-10
jQuery 中$(this).index與$.each的使用指南
這篇文章主要介紹了jQuery 中$(this).index與$.each的使用方法，以及使用環(huán)境，有需要的小伙伴自己參考下吧2014-11-11
jQuery判斷checkbox(復選框)是否被選中以及全選、反選實現(xiàn)代碼
本篇文章主要是對jQuery判斷checkbox(復選框)是否被選中以及全選、反選實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
使用jQuery實現(xiàn)的網(wǎng)頁版的個人簡歷(可換膚)
點擊姓名會顯示她的基本詳細信息，點擊切換皮膚，會更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實現(xiàn)的網(wǎng)頁版的個人簡歷2013-04-04
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)搜索頁面關鍵字的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
今天給大家分享一款頁面無縫滾動的jquery.scroll插件。 支持上下左右，淡入淡出，滾動時間設置，動畫時間設置，鼠標經(jīng)過是否停止設置，滾動鼠標液動條看下頁面的切換效果。該插件適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。2015-04-04
本文是對Jquery中AJAX POST與GET之間的區(qū)別。進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進功能，頁面刷新功能實效問題
做了幾個兼職，上天幫人完成頁面的時候順便做了一個ajax的請求。發(fā)現(xiàn)瀏覽器的刷新，后退，前進按鈕失效。于是乎google了一下。2010-12-12