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/

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

9.2

 

改变C1Menu的外观

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

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

 

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

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

9.1

 

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

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

 

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

 

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

请在这里下载

sample_c1Menu

 

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

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



本文转自 powertoolsteam 51CTO博客,原文链接:http://blog.51cto.com/powertoolsteam/850588,如需转载请自行联系原作者

相关文章
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery自定义校验器
前端基础 - JQuery自定义校验器
32 0
|
6月前
|
XML 前端开发 JavaScript
使用代码给 SAP UI5 XML 视图添加自定义 CSS
使用代码给 SAP UI5 XML 视图添加自定义 CSS
42 0
使用代码给 SAP UI5 XML 视图添加自定义 CSS
|
7月前
|
存储 前端开发 安全
SAP UI5 应用的标准 Theme 和自定义 Theme 的加载讨论
SAP UI5 应用的标准 Theme 和自定义 Theme 的加载讨论
58 1
|
7月前
|
JavaScript
jQuery 自定义动画 animate(详细步骤)
jQuery 自定义动画 animate(详细步骤)
59 0
|
7月前
|
JavaScript
jQuery 自定义插件(详细步骤)
jQuery 自定义插件(详细步骤)
93 0
|
7月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之八十八 - SAP UI5 Mock 服务器如何实现自定义 Function Import 试读版
SAP UI5 应用开发教程之八十八 - SAP UI5 Mock 服务器如何实现自定义 Function Import 试读版
40 0
|
3月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
20 0
|
3月前
|
Web App开发 存储 前端开发
谈谈企业级应用的自定义 UI 创建和集成方法一览
谈谈企业级应用的自定义 UI 创建和集成方法一览
31 0
|
5月前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
30 1
|
5月前
element-ui和element-plus的自定义列表格用法
element-ui和element-plus的自定义列表格用法
32 0

热门文章

最新文章

相关课程

更多