Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

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/

运行该工程,可以观察到该主题被应用到控件上。

改变C1Menu的外观

如果你希望改变C1Menu的外观,你所要做的就是找到正确的CSS并且使用你想要的风格覆盖原有设置。

例如,如果你想在鼠标悬停时改变C1Menu项默认的字体大小,种类,使用下面给出的CSS -

.wijmo-wijmenu a.wijmo-wijmenu-link:hover 
{ 
color: #701; font-family:Calibri; background: Yellow;  border-color: red;  border-style: solid; 
}

这将应用一组新的你所期望的字体种类,背景,边框颜色以及样式到菜单项目上。

取消在C1Menu上的自动换行行为

在菜单项内部自动折行是C1Menu的默认行为,在需要关闭该功能的情况下,请参考以下CSS

.wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child { width: auto; } 
.wijmo-wijmenu-text { white-space: nowrap; }

我在附件中的示例演示了以上全部的功能,包括应用一个自定义主题,改变外观以及取消自动折行。

请在这里下载

sample_c1Menu

运行该示例。你会看到C1Menu应用了“ui-darkness”主题。

它的自菜单项不会自动折行,并且当鼠标悬停在每一个菜单项上时,应用了自定义样式。

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012 v1正式发布(2012.03.22更新)!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

学习纲要:JavaScript 基础概念

8420
来自专栏大数据钻研

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例...

45640
来自专栏自动化测试实战

HTML第一课——基础知识普及【1】

31070
来自专栏九彩拼盘的叨叨叨

如何调试CSS动画

我们在做某个复杂的动画,或者多个元素同时做动画时,我们需要查看动画在某些时间点的元素的状态。此时动画应该是暂停的,这样方便我们进行查看。

8130
来自专栏一个会写诗的程序员的博客

Vue.js 极简教程jsfiddle Hello World 例子:参考资料:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

22410
来自专栏Guangdong Qi

# 微信小程序开发之-事件触发控件

27230
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

11120
来自专栏非著名程序员

基础篇章:关于 React Native 之 Touchable 系列组件的讲解

? 提示:前天文章,重发,不想看的请略过,上次失误忘了加效果图 (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经...

22890
来自专栏老马寒门IT

01Vue.js快速入门(一)Vue概念及Helloworld

Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue...

22690
来自专栏前端知识分享

第144天:PS切图方法总结

    PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从Pho...

18920

扫码关注云+社区

领取腾讯云代金券