《jQuery UI 开发指南》——2.2 格式化内容

简介:

本节书摘来自异步社区《jQuery UI开发指南》一书中的第2章,第2.2节,作者:【美】Eric Sarrion 译者:罗晴明 ,包勇明更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 格式化内容

使用tabs ()方法会彻底改变页面中HTML元素的外观。实际上,该方法遍历了(jQuery UI内部实现)HTML代码,并给相关的元素(这里是选项卡)添加了新的CSS类,赋予了它们适当的样式。

图2-3展示了jQuery UI生成的HTML,tabs ()方法改变了HTML DOM(文档对象模型)树(代码是用Firefox的Firebug扩展查看的)。
screenshot

可以修改元素的CSS类来自定义元素的显示样式。比如,如果修改了与screenshot元素关联的ui-state-default CSS类,将会得到新的选项卡外观。同样地,如果修改了与screenshot元素关联的ui-tabs-panel CSS类,则选项卡的内容外观就改变了。

在HTML中添加一个SCRIPT标签,来修改这些元素的样式(粗体部分所示):

screenshot

必须在jQuery UI样式的后面添加自己的样式,否则更改是会被“忽略”的。

如图2-4所示,应用新的样式后,选项卡及其内容的外观改变了。

screenshot

相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1196 0
|
5月前
|
JavaScript
element-ui表格数据样式及格式化案例
element-ui表格数据样式及格式化案例
|
5月前
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
26 0
|
5月前
element-ui表格数据样式及格式化
element-ui表格数据样式及格式化
|
5月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
6月前
|
存储
SAP UI5 货币金额显示的格式化逻辑
SAP UI5 货币金额显示的格式化逻辑
37 0
|
10月前
|
前端开发
Element UI Time Picker时间格式化及后端读取类(2023-03-02T00:00:12.000Z)数据
Element UI Time Picker时间格式化及后端读取类(2023-03-02T00:00:12.000Z)数据
126 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
118 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
330 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
200 0