2.4改變字體和大小
2.6UniTreeMenu 如何實現左側隱藏后 只顯示圖標
2] 用uniGUI專有控件TUniTreeMenu,類似標准控件的TreeView,還可以為每個菜單增加圖標
其中左邊的圖標:Font Awesome
[info]和[search],[home],[download],[trash],[refresh],[reply],[star],[user]有用,不是所有的都會顯示出來。不推薦使用Font Awesome
推薦使用 Pictos,圖標更全更多([locate]顯示不出來)
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'); }
加入
.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 的字體和大小,*/
.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;
function store.nodeappend(sender, node, index, eOpts) { this.treePanel.getItem(node).el.dom.setAttribute('data-qtip',node.data.text); }