首页>建站相关>网页引用jQuery UI的方式

网页引用jQuery UI的方式

jQuery UI简介

jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。

jQuery UI组件构成

jQuery UI 主要分为3个部分:交互、微件和效果库。

交互(Interactions)

交互部件是一些与鼠标交互相关的内容,包括缩放(Resizable) , 拖动(Draggable) , 放置(Droppable) , 选择(Selectable) , 排序(Sortable)等。

小部件(Widgets)

主要是一些界面的扩展,包括折叠面板(Accordion) , 自动完成(Autocomplete) , 按钮(Button) , 日期选择器(Datepicker) , 对话框(Dialog) , 菜单(Menu) , 进度条(Progressbar) , 滑块(Slider) , 旋转器(Spinner) , 标签页(Tabs) , 工具提示框(Tooltip)等,新版本的UI将包含更多的微件。

效果库(Effects)

用于提供丰富的动画效果,让动画不再局限于jQuery的animate()方法。包括特效(Effect) , 显示(Show) , 隐藏(Hide) , 切换(Toggle) , 添加 Class(Add Class) , 移除 Class(Remove Class) , 切换 Class(Toggle Class) , 转换 Class(Switch Class) , 颜色动画(Color Animation)等。

引用jQuery UI

在页面head部分添加如下语句就可以引用字节跳动的静态资源库,当然也可以使用其他的库或者直接下载到本地,一方面字节的库比较全,另一方面,学习调试的时候,直接两行代码搞定运行依赖也相对方便。

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jqueryui/1.12.1/jquery-ui.min.js" type="application/javascript"></script>
<link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jqueryui/1.12.1/jquery-ui.min.css" type="text/css" rel="stylesheet" />

标签: jquery

移动端可扫我直达哦~

推荐阅读

jquery 2024-03-23

利用Jquery实现点击元素后复制被点击元素的标签

在博客上放了一个“Fontawesome4.7.0图标一览”的页面,一直觉得功能太过于单一。自己使用当中,遇到合适的图标,往往还需要去获取它的html标签属性。所以就想给这个页面增加一个点击后复制被点击元素标签的功能。获取标签的相关指...

建站相关 jquery

jquery 2023-12-21

为当前页面生成一个二维码以便于移动端访问

想要在手机上上访问pc端的一个页面,现在很常见的做法是提供一个二维码,让用户通过手机扫码软件识别后用浏览器打开,这样就实现了页面地址数据的传输。某天做完一个页面后,想在手机上看看效果,一边手动输入页面地址,一边就萌生了为站点添加一个二...

建站相关 jquery

jquery 2023-06-09

Jquery幻灯插件Slidesjs图片宽高异常与引用文件顺序

遇到一个困扰多日的问题,在页面中生成了一个幻灯片组件,正常载入的时候是挺正常的,但是偶尔多刷新几次,图片的宽高会出现异常,离谱的是幻灯容器的宽度正常,图片大幅度溢出,而按钮位置无误。以上的bug描述对解决问题毫无帮助,幻灯容器的宽高是...

建站相关 jquery

jquery 2023-05-10

Jquery实现wordpress菜单的鼠标跟随效果

看别人家的博客,菜单栏下有一条装饰线,会根据鼠标悬停的位置来回滑动,且根据滑动距离长短,有明显的速度变化。一直心向往之,正好在学习wordpress的wp_nav_menu函数,顺便尝试一下实现这个效果。看过张戈博客主题的元素,似乎是...

建站相关 jquery

jquery 2023-05-05

Jquery实现wordpress彩色标签云

想在wordpress中实现一组彩色的标签,网上相关的实现教程很多,这里就不赘述了。之所以考虑用Jquery来实现,是基于服务器性能的考虑。因为博主的服务器是2h1g的低配版本,这个配置相对于访问用户的主机配置,无论是移动端还是电脑端...

建站相关 jquery

jquery 2023-05-04

Jquery添加与删除元素的class名

尝试了一下在新的主题中使用jquery,绑定点击动作来添加与删除元素的类名,使用下来感觉确实非常方便。虽然随着各种前段框架的流行,jquery的影响力逐渐减退,但对于博主这种菜鸟来说,还是觉得惊为天人。用jquery添加classna...

建站相关 jquery

jquery 2023-04-15

利用jquery lazyload插件回调函数修改类名

准备在主题中引用jquery,所以lazyload插件也准备用jquery的插件,使用上同lazysizes略有不同,默认并不能在成功加载图片之后修改图片的类名。但是lazyload贴心的提供了回调函数,允许我们自由的修改。引用插件字...

建站相关 jquery

jquery 2022-12-30

Jquery幻灯插件nivo slider使用详解

学习slidesjs幻灯插件的时候翻到的这个,比起slidesjs,nivo slider提供了更多的动画效果,更为丰富的自定义选项。当然,对于一个站点来说,丰富的内容才是关键,过度追求华丽的效果,特别对于带宽较小的服务器来说,无异于...

建站相关 jquery

jquery 2022-12-22

Jquery幻灯插件Slidesjs使用详解

曾经粗浅尝试过swiper,依赖复制粘贴实现过简易的幻灯片效果。因为服务器配置不高,加入幻灯效果后页面读取时间直线上升,所以以服务器配置过低为理由劝退了自己,实际上还是对swiper的一大堆设置产生了畏难心理。接近年底,抽时间学习一下...

建站相关 jquery