Wijmo更優美的jQueryUI部件集：自定義C1WijMenu

技術小阿哥發表於2017-11-21
jQueryUI

C1Wijmo 全部的控制元件是完全可定製的，並且可以根據你自己的需求定製他們的介面外觀。

我準備使用C1Menu演示這一點。

讓我們從向控制元件應用自定義主題開始。

 

改變主題

1) 建立一個網站，然後拖放一個C1Menu到web頁面上。

2) 單擊智慧標記，並開啟任務選單。

3) 在主題屬性中輸入CDN的URL以指定主題。

例如，在我們的這個例子中，我們應用ui-darkness 主題

http://jquery-ui.googlecode.com/svn/tags/1.8.14/themes/ui-darkness/jquery-ui.css

你可以在下面提到的網址找到你想應用的主題的CDN連結– http://blog.jqueryui.com/2011/06/jquery-ui-1-8-14/

執行該工程，可以觀察到該主題被應用到控制元件上。

9.2

 

改變C1Menu的外觀

如果你希望改變C1Menu的外觀，你所要做的就是找到正確的CSS並且使用你想要的風格覆蓋原有設定。

例如，如果你想在滑鼠懸停時改變C1Menu項預設的字型大小，種類，使用下面給出的CSS –

 



    

  1. .wijmo-wijmenu a.wijmo-wijmenu-link:hover  
    2. 

  2. {  
    3. 

  3. color: #701; font-family:Calibri; background: Yellow;  border-color: red;  border-style: solid;  
    4. 

  4. } 
    5. 



這將應用一組新的你所期望的字型種類，背景，邊框顏色以及樣式到選單專案上。


9.1


 


取消在C1Menu上的自動換行行為


在選單項內部自動折行是C1Menu的預設行為，在需要關閉該功能的情況下，請參考以下CSS


 




    

  1. .wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child { auto; }  
    2. 

  2. .wijmo-wijmenu-text { white-space: nowrap; } 
    3. 



 


我在附件中的示例演示了以上全部的功能，包括應用一個自定義主題，改變外觀以及取消自動折行。


請在這裡下載


sample_c1Menu


 


執行該示例。你會看到C1Menu應用了“ui-darkness”主題。


它的自選單項不會自動折行，並且當滑鼠懸停在每一個選單項上時，應用了自定義樣式。






本文轉自 powertoolsteam 51CTO部落格，原文連結：http://blog.51cto.com/powertoolsteam/850588，如需轉載請自行聯絡原作者










相關文章