uniGUI之主窗口折疊UI之UniTreeMenu(32-2)


 用uniGUI專有控件TUniTreeMenu

    2.0給TUniTreeMenu菜單添加圖標

    2.1給TUniTreeMenu菜單添加事件

2.2修改背景色

2.3調整行高

2.4改變字體和大小

2.5改變選 中項的 前景色和鼠標浮過某項的  前景色

太多的子菜單將超出屏幕范圍

2.6UniTreeMenu 如何實現左側隱藏后 只顯示圖標

2.7鼠標在上面時,浮窗全部顯示


 2] 用uniGUI專有控件TUniTreeMenu,類似標准控件的TreeView,還可以為每個菜單增加圖標


 

2.0給TUniTreeMenu菜單添加圖標 

 

 其中左邊的圖標:Font Awesome

[info]和[search],[home],[download],[trash],[refresh],[reply],[star],[user]有用,不是所有的都會顯示出來。不推薦使用Font Awesome

推薦使用 Pictos,圖標更全更多([locate]顯示不出來)

  2.1給TUniTreeMenu菜單添加事件

 2.1.1添加一個UniMenuItems1

2.1.2將UniTreeMenu1的SourceMenu設為UniMenuItems1

  然后像普通的MainMenu操作UniMenuItems1,添加事件,選擇圖標

 

存在的問題

目前發現菜單太多時右側不能自動出現滾動條,即太多的子菜單將超出屏幕范圍,鼠標滾輪不能翻動菜單項,不太方便。如何解決呢?在UniTreeMenu的clientEvents屬性里的UniEvents里,左側頂部選擇Ext.list.Tree,然后在treeMenu.afterCreate里面添加代碼如下,即可解決,效果還不錯。

function treeMenu.afterCreate(sender)
{
    sender.el.setStyle('overflow-y', 'auto'); }

2.2修改背景色


 2.3調整行高

 

 加入

.x-treelist-nav .x-treelist-item-text {
     line-height: 30px;
}/* UniTreeMenu 的行高*/
 .x-treelist-nav .x-treelist-item-icon:before, .x-treelist-nav .x-treelist-item-tool:before, .x-treelist-nav .x-treelist-item-expander {
     line-height: 30px;
}/* UniTreeMenu 的行高*/

2.4類似地,同2.3改變字體和大小,在CustomCSS里加入

.x-treelist-nav .x-treelist-item-text {
     font-family:"楷體";
     font-size: 24px;
}/* UniTreeMenu 的字體和大小,*/

 


2.5改變選 中項的 前景色  和     鼠標浮過某項的  前景色

 

.x-treelist-nav .x-treelist-item-expanded {
    background-color: rgba(0,0,0,0) !important;
}
.x-treelist-nav .x-treelist-item-selected .x-treelist-row { background-color: rgba(0,0,255,0.80) !important; }/*選 中項的 前景色*/ .x-treelist-nav .x-treelist-row-over{ background-color: rgba(255,0,0,0.20) !important; }/*鼠標浮過某項的 前景色*/ .x-treelist-nav .x-treelist-toolstrip { background-color: rgba(0,0,0,0) !important; }

 

.x-treelist-nav .x-treelist-item-selected .x-treelist-row:before {
    background-color: #FFFF00 !important;
}/*選中項的左邊堅條的前景色*/

2.6UniTreeMenu 如何實現左側隱藏后 只顯示圖標

UniTreeMenu1.Micro := not UniTreeMenu1.Micro;

 

 


2.7鼠標在上面時,浮窗全部顯示

 

  

function store.nodeappend(sender, node, index, eOpts)
{
 this.treePanel.getItem(node).el.dom.setAttribute('data-qtip',node.data.text);
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM