隨筆-9  評(píng)論-168  文章-266  trackbacks-0

          HTML:
             <ul id="knowledgemenu" class="x-hidden mymenu">
                <li><a id="knowledge"  class="menubar">知識(shí)導(dǎo)航</a></li>
                <li><a id="bbs"    class="menubar">公告</a></li>
                <li><a id="question"    class="menubar">待解決問(wèn)題</a></li>
                <li><a id="sloved"    class="menubar">已解決問(wèn)題</a></li>
                <li><a id="knownw"   class="menubar">知識(shí)貢獻(xiàn)</a></li>
                <li><a id="tagslist"    class="menubar">Tags</a></li>
              </ul>
              <ul id="libmenu" class="x-hidden mymenu">
                <li><a id="knownlist"  class="menubar">文章庫(kù)</a></li>
                <li><a id="booklist"  class="menubar">圖書(shū)庫(kù)</a></li>
                <li><a id="A1"  class="menubar">軟件庫(kù)</a></li>
              </ul>
          CSS:

          .menubar {
           border-bottom: 1px solid #AACCF6;
           color: #222222;
           cursor: pointer;
           display: block;
           height: 20px;
           width: 50px;
           line-height: 17px;
           outline-color: -moz-use-text-color;
           outline-style: none;
           outline-width: 0;
           padding: 3px;
           text-align: center;
           text-decoration: none;
           white-space: nowrap;
          }

          .menubar:hover {     //鼠標(biāo)懸停上時(shí)觸發(fā)
           background: #EBF3FD url(../item-over.gif) repeat-x scroll left bottom;
           text-decoration: none;
          }


          JS:
              var knowledgemenu = new Ext.Panel({
                           title: '翰維知道',
                           contentEl:'knowledgemenu',  //DOM標(biāo)簽ID
                           border:false,
                              iconCls:'nav'
                          });
              var libmenu = new Ext.Panel({
                           title: '專題',
                           contentEl:'libmenu',
                           border:false,
                              iconCls:'nav'
                          });
              var westPanel=new Ext.Panel({
                              region:'west',
                              el:'west',
                              title:'功能菜單',
                              collapsible: true,    //本窗口伸縮
                              //collapseMode:'mini',
                              split:true,
                              width: 175,
                              minSize: 175,
                              maxSize: 175,
                              margins:{left: 10, top: 0, right: 0, bottom: 0},
                              layout:'accordion',   //子窗口為折疊
                              layoutConfig:{
                                  animate:true
                                 // fill :false
                              },
                              items:[knowledgemenu, libmenu]
              }); 
          posted on 2009-05-27 16:22 紫蝶∏飛揚(yáng)↗ 閱讀(15895) 評(píng)論(5)  編輯  收藏 所屬分類: EXTJS

          評(píng)論:
          # re: Extjs 漂亮的Panel折疊伸縮控件 layout:'accordion' 2010-08-02 10:15 | Mr.1
          你好你 這個(gè)例子里面的 iconCls:'nav'的nav樣式定義在那里的,可以貼出來(lái)我看看嗎  回復(fù)  更多評(píng)論
            
          # re: Extjs 漂亮的Panel折疊伸縮控件 layout:'accordion' 2010-11-10 10:09 | nav樣式
          <style type="text/css">
          html, body {
          font:normal 12px verdana;
          margin:0;
          padding:0;
          border:0 none;
          overflow:hidden;
          height:100%;
          }
          p {
          margin:5px;
          }
          .nav {
          background-image:url(examples/shared/icons/fam/folder_go.png);
          }
          </style>  回復(fù)  更多評(píng)論
            
          # re: Extjs 漂亮的Panel折疊伸縮控件 layout:'accordion' 2010-11-18 14:08 | 帥呆呆
          不錯(cuò),好。
          學(xué)習(xí)了。頂  回復(fù)  更多評(píng)論
            
          # re: Extjs 漂亮的Panel折疊伸縮控件 layout:'accordion' 2011-05-05 16:52 | xmllong
          樓主,能不能把你上面代碼中用到的圖片發(fā)上來(lái),萬(wàn)分感謝:)
          examples/shared/icons/fam/folder_go.png
          ../item-over.gif  回復(fù)  更多評(píng)論
            
          # re: Extjs 漂亮的Panel折疊伸縮控件 layout:'accordion' 2011-05-05 22:48 | love
          能把這個(gè)頁(yè)面的完整代碼發(fā)上來(lái)嗎:俺初學(xué)EXT  回復(fù)  更多評(píng)論
            
          主站蜘蛛池模板: 德令哈市| 临清市| 西城区| 宜宾县| 灵川县| 石河子市| 始兴县| 崇文区| 句容市| 淅川县| 屯昌县| 玉溪市| 天峻县| 武定县| 原阳县| 东海县| 灯塔市| 旅游| 商洛市| 大邑县| 长宁区| 澳门| 定边县| 密云县| 唐河县| 河西区| 梁河县| 湖州市| 元朗区| 林州市| 册亨县| 平泉县| 神木县| 辽阳市| 永嘉县| 清丰县| 汝南县| 马山县| 兰考县| 中超| 昌吉市|