C1Wijmo 全部的控件是完全可定制的,并且可以根據(jù)你自己的需求定制他們的界面外觀。
我準(zhǔn)備使用C1Menu演示這一點(diǎn)。
讓我們從向控件應(yīng)用自定義主題開始。
改變主題
1) 創(chuàng)建一個網(wǎng)站,然后拖放一個C1Menu到web頁面上。
2) 單擊智能標(biāo)記,并打開任務(wù)菜單。
3) 在主題屬性中輸入CDN的URL以指定主題。
例如,在我們的這個例子中,我們應(yīng)用ui-darkness 主題
http://jquery-ui.googlecode.com/svn/tags/1.8.14/themes/ui-darkness/jquery-ui.css
你可以在下面提到的網(wǎng)址找到你想應(yīng)用的主題的CDN鏈接– http://blog.jqueryui.com/2011/06/jquery-ui-1-8-14/
運(yùn)行該工程,可以觀察到該主題被應(yīng)用到控件上。
改變C1Menu的外觀
如果你希望改變C1Menu的外觀,你所要做的就是找到正確的CSS并且使用你想要的風(fēng)格覆蓋原有設(shè)置。
例如,如果你想在鼠標(biāo)懸停時改變C1Menu項默認(rèn)的字體大小,種類,使用下面給出的CSS -
.wijmo-wijmenu a.wijmo-wijmenu- link:hover { color: # 701; font-family:Calibri; background: Yellow; border-color: red; border- style: solid; }
這將應(yīng)用一組新的你所期望的字體種類,背景,邊框顏色以及樣式到菜單項目上。
取消在C1Menu上的自動換行行為
在菜單項內(nèi)部自動折行是C1Menu的默認(rèn)行為,在需要關(guān)閉該功能的情況下,請參考以下CSS
.wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-
child { width: auto; }
.wijmo
-wijmenu-text { white-space: nowrap; }
我在附件中的示例演示了以上全部的功能,包括應(yīng)用一個自定義主題,改變外觀以及取消自動折行。
請在這里下載
運(yùn)行該示例。你會看到C1Menu應(yīng)用了“ui-darkness”主題。
它的自菜單項不會自動折行,并且當(dāng)鼠標(biāo)懸停在每一個菜單項上時,應(yīng)用了自定義樣式。
Wijmo下載,請進(jìn)入 Studio for ASP.NET Wijmo 2012 v1正式發(fā)布(2012.03.22更新)!
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
