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