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

简介: C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。   改变主题 1) 创建一个网站,然后拖放一个C1Menu到web页面上。

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 -

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

 

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

9.1

 

取消在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更新)!

相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1666 0
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
96 4
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
320 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
451 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
410 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
286 0
|
JavaScript
jQuery UI 自定义样式的日历控件
在线演示 本地下载
1339 0

热门文章

最新文章

  • 1
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    180
  • 2
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    289
  • 3
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    324
  • 4
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    479
  • 5
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    419
  • 6
    unity判断鼠标在不在UI上
    369
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    251
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    410
  • 9
    移动端UI名词 - AxureMost
    205
  • 10
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
    2629
  • 相关课程

    更多