《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组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1355 0
|
7天前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
20 0
|
6月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
45 4
|
4月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
74 1
|
4月前
|
JavaScript
H-ui JQuery 给单选按纽赋值不生效
H-ui JQuery 给单选按纽赋值不生效
38 0
H-ui JQuery 给单选按纽赋值不生效
|
JavaScript
element-ui表格数据样式及格式化案例
element-ui表格数据样式及格式化案例
374 0
element-ui表格数据样式及格式化
element-ui表格数据样式及格式化
114 2
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
46 0
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
前端开发
Element UI Time Picker时间格式化及后端读取类(2023-03-02T00:00:12.000Z)数据
Element UI Time Picker时间格式化及后端读取类(2023-03-02T00:00:12.000Z)数据
196 0