jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
更新時(shí)間：2016年08月17日 14:34:59 作者：zhyue93
這篇文章主要介紹了jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
先給大家看下效果圖，效果圖展示如下：
關(guān)鍵代碼如下所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首頁(yè)</title>
<link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" />
<link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="../JQuery/jquery.min.js"></script>
<script src="../JQuery/easyui/jquery.easyui.min.js"></script>
<script src="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script>
<style>
#div_leftmenu div {
font-size: 15px;
}
#div_leftmenu div ul {
margin: 15px 15px 15px 15px;
padding: 0;
overflow: hidden;
line-height: 40px;
}
#div_leftmenu div ul li {
list-style-type: none;
background-color: #DFE2E3;
text-align: center;
margin-bottom: 15px;
}
#div_leftmenu div ul li:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body class="easyui-layout" style="font-size: 15px;">
<form id="form1" runat="server">
<!--左側(cè)-->
<div data-options="region:'west',title:' '" style="width: 250px; background-color: powderblue; font-size: inherit;">
<div id="div_welcome" style="margin: 15px 0 15px 0; text-align: center;">admin,歡迎您</div>
<div id="div_leftmenu" class="easyui-accordion">
<div title="Title1">
<ul>
<li>的撒打算的</li>
</ul>
</div>
<div title="Title2">
</div>
<div title="Title3">
</div>
</div>
</div>
<!--右側(cè)-->
<div data-options="region:'center',title:' '" style="padding: 5px;">
</div>
</form>
</body>
</html>
好了，代碼到此結(jié)束。下篇文章給大家介紹jQuery Easyui使用（二）之可折疊面板動(dòng)態(tài)加載無(wú)效果的解決方法
以上所述是小編給大家介紹的jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery實(shí)現(xiàn)的購(gòu)物車物品數(shù)量加減功能代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的購(gòu)物車物品數(shù)量加減功能,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
使用prop解決一個(gè)checkbox選中后再次選中失效的問(wèn)題
下面小編就為大家?guī)?lái)一篇使用prop解決一個(gè)checkbox選中后再次選中失效的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
本文匯總介紹了常見(jiàn)的jQuery選擇器知識(shí)，包含基本元素選擇器、分層選擇器、基本條件選擇器、內(nèi)容條件選擇器、可見(jiàn)性條件選擇器、屬性選擇器、子元素選擇器、表單元素選擇器、表單屬性選擇器。十分的詳盡，有需要的小伙伴參考下吧2014-11-11
jquery實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為
本文主要介紹了jquery鍵盤事件實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為的方法，這種使用場(chǎng)景為當(dāng)首頁(yè)有幾個(gè)鏈接需要選擇的時(shí)候，使用鍵盤就可以進(jìn)行觸發(fā)行為。下面跟著小編一起來(lái)看下吧2017-03-03
jq實(shí)現(xiàn)左側(cè)顯示圖片右側(cè)文字滑動(dòng)切換效果
這篇文章是基于jq技術(shù)實(shí)現(xiàn)左側(cè)顯示圖片右側(cè)文字滑動(dòng)切換效果的相關(guān)資料，有需要的小伙伴可以來(lái)參考下2015-08-08
jQuery實(shí)現(xiàn)的多滑動(dòng)門，多選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的多滑動(dòng)門，多選項(xiàng)卡效果代碼,具有tab切換與滑動(dòng)門的功能,涉及鼠標(biāo)事件的響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)變換操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-03-03
TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個(gè)jquery的擴(kuò)展，這樣就可以很容易實(shí)現(xiàn)對(duì)textarea控制最大長(zhǎng)度了。2011-09-09
jQuery實(shí)現(xiàn)側(cè)浮窗與中浮窗切換效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)側(cè)浮窗與中浮窗切換效果的方法,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jQuery中:checked選擇器用法,實(shí)例分析了:checked選擇器的功能、定義及選取選中的復(fù)選框或單選按鈕時(shí)的使用技巧,需要的朋友可以參考下2015-01-01
用Juery網(wǎng)頁(yè)選項(xiàng)卡實(shí)現(xiàn)代碼
現(xiàn)在jquery比較流行，很多的選項(xiàng)卡效果可以通過(guò)jquery來(lái)實(shí)現(xiàn)。2011-06-06