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

作者: 葡萄城控件技术团队博客来源: 博客园发布时间: 2012-05-31 10:37 阅读: 828 次推荐: 0 原文链接 [收藏]

C1Wijmo 全部的控件是完全可定制的，并且可以根据你自己的需求定制他们的界面外观。

我准备使用C1Menu演示这一点。

让我们从向控件应用自定义主题开始。

改变主题

1) 创建一个网站，然后拖放一个C1Menu到web页面上。

2) 单击智能标记，并打开任务菜单。

3) 在主题属性中输入CDN的URL以指定主题。

例如，在我们的这个例子中，我们应用ui-darkness 主题

你可以在下面提到的网址找到你想应用的主题的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; }

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

请在这里下载

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

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