jQuery UI组件介绍

一、jQuery UI简介

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。

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

二、jQuery UI组件构成

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

1、交互（Interactions）

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

2、小部件（Widgets）

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

3、效果库（Effects）

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

三、jQuery UI下载

jqueryui官网 ：https://jqueryui.com/

中文API文档：

一旦您对 jQuery UI 有了基本了解，您就可以亲自尝试一下。请从 jQuery UI 网站上的 Download Builder（下载生成器） 页面下载 jQuery UI 的副本。

四、jQuery UI 使用

一旦您下载了 jQuery UI，您将得到一个 zip 压缩包，包含下列文件：

  • /css/
  • /development-bundle/
  • /js/
  • index.html

在文本编辑器中打开 index.html，您将看到引用了一些外部文件：主题、jQuery 和 jQuery UI。通常情况下，您需要在页面中引用这三个文件，以便使用 jQuery UI 的窗体小部件和交互部件：

<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" rel="external nofollow"  />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.custom.min.js"></script>

一旦您引用了这些必要的文件，您就能向您的页面添加一些 jQuery 小部件。比如，要制作一个日期选择器（datepicker）小部件，您需要向页面添加一个文本输入框，然后再调用 .datepicker()，如下所示：

HTML:

<input type="text" name="date" id="date" />

JavaScript:

$( "#date" ).datepicker();

到此这篇关于jQuery UI组件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQuery EasyUI的一些常用组件

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <

  • jQuery布局组件EasyUI Layout使用方法详解

    jQuery布局组件EasyUI Layout使用方法详解

    layout 布局组件,依赖于panel,自己开发个web小程序的时候直接用这个组件布局很方便. 对于一个web程序原来说,特别是像我这种一遇到界面美化问题就找美工的程序员,想自己独立的开发一个东西,除了套用以前的项目中的界面布局之外就没别的办法了,虽然我们可以用ifame切分出一个界面布局,但是我不会添加样式啊.使用layout组件就可以帮我们快速的有一个界面布局,而且美观效果也看得过去. 看个例子: <!doctype html> <html lang="en"&

  • jQuery EasyUI ProgressBar进度条组件

    jQuery EasyUI ProgressBar进度条组件

    ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件.导入导出文档啊.载入网页等等. 应用场景很多,使用起来还很简单. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javas

  • jQuery EasyUI 组件加上“清除”功能实例详解

    jQuery EasyUI 组件加上“清除”功能实例详解

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • 为Jquery EasyUI 组件加上清除功能的方法(详解)

    为Jquery EasyUI 组件加上清除功能的方法(详解)

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • jQuery EasyUI Draggable拖动组件

    上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调用

  • jQuery EasyUI Accordion可伸缩面板组件使用详解

    jQuery EasyUI Accordion可伸缩面板组件使用详解

    Accordion 可伸缩面板组件,基于panel,示例如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type=

  • jQuery EasyUI Panel面板组件使用详解

    panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr

  • jQuery UI组件介绍

    一.jQuery UI简介 jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择. jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(

  • 各种效果的jquery ui(接口)介绍

    基本的鼠标互动:拖拽(drag and dropping).排序(sorting).选择(selecting).缩放(resizing) 各种互动效果:手风琴式的折叠菜单(accordions).日历(date pickers).对话框(dialogs).滑动条(sliders).表格排序(table sorters).页签(tabs).放大镜效果(magnifier).阴影效果(shadow) 第一部分:鼠标交互1.1 Draggables:拖拽所需文件:ui.mouse.jsui.dragg

  • 推荐10款最热门jQuery UI框架 原创

    推荐10款最热门jQuery UI框架 原创

    1.国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本. 欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能．共同推进国内整体ajax开发水平. 在线演示地址:http://j-ui.com http://runjs.cn/detail/x9c7d6qb 2.jQuery的界面插件 Ninja UI jQuer

  • 使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍

    JQuery UI Widgets是本人非常喜欢的一套前端JS组件,日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码,同时一些现有组件无法满足需求的情况下,需要对现有组件进行扩展,本文使用一套基于jquery ui 的扩展js组件---jtable (http://www.jtable.org),包含了基本的列表和编辑窗口,比起jqGrid,jquery easyui grid或者extjs grid,jtable的代码非常简洁.对于grid功能要求

  • jQuery layui常用方法介绍

    layer简介: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. layer(全称:jQuery-plugin-layer),一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(菜鸟级前端攻城师).layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力.其意义在于,可以让您的页面拥有更丰富与便捷的操作体验,而这,您只需在调用时简单地配置相关参数,即可轻松实现. 与同类弹出层

  • 使用jQuery UI库开发Web界面的简单入门指引

    一．jQuery UI jQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库.包 含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很 好交互性的web 应用程序. jQuery UI 的官网网站为:http://jqueryui.com/ jquery-ui-x.xx.x.custom.zip .里面目录结构如下: 1.css,包含与jQuery UI 相关的CSS 文件: 2.js,包含jQuery UI 相关的JavaScri

  • ui组件之input多选下拉实现方法（带有搜索功能）

    ui组件之input多选下拉实现方法（带有搜索功能）

    我的风格,先上效果图,如果大家感觉还不错,请参考实现代码. 废话不说 先看div层次结构 <!-- 最外层div 可以任意指定 主要用于定义子元素宽度 --> <div class="col-xs-10" style="width:800px"> <!-- 表单label 添加文字提示 --> <label for="" class="label-control">全文检索<

  • jQuery UI结合Ajax创建可定制的Web界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

  • jQuery UI旋转器部件Spinner Widget

    jQuery UI旋转器部件Spinner Widget

    通过向上/向下按钮和箭头键处理,为输入数值增强文本输入功能. 一.实例 普通的数字选择器. 代码 <input id="spinner"> <script> $( "#spinner" ).spinner(); </script> 旋转器(Spinner),或数步进控件(number stepper widget),是用于处理各种数字输入的完美控件.它允许用户直接输入一个值,或通过键盘.鼠标.滚轮旋转改变一个已有的值.当与全球化(

  • vue.js学习之UI组件开发教程

    vue.js学习之UI组件开发教程

    本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1. 新建组件: <script src="/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div id=&quo

随机推荐