jQuery UI 入门之实用实例

　　　　　　　　　　　　　　jQuery UI 入门

jQuery UI 简介

jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库，您可以使用它创建高度交互的 Web 应用程序。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。

jQuery UI 特性

简单易用:

继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。

开源免费

采用 MIT & GPL 双协议授权，轻松满足自由产品至企业产品各种授权需求。

广泛兼容

兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。

轻便快捷

组件间相对独立，可按需加载，避免浪费带宽拖慢网页打开速度。

标准先进

支持 WAI-ARIA，通过标准 XHTML 代码提供渐进增强，保证低端环境可访问性。

美观多变

提供近 20 种预设主题，并可自定义多达 60 项可配置样式规则，提供 24 种背景纹理选择。

开放公开

从结构规划到代码编写，全程开放，文档、代码、讨论，人人均可参与。

强力支持

Google 为发布代码提供 CDN 内容分发网络支持。

完整汉化

开发包内置包含中文在内的 40 多种语言包。

缺点、不足

  • 1.代码不够健壮：缺乏全面的测试用例，部分组件 Bugs 较多，不能达到企业级产品开发要求。
  • 2.构架规划不足：组件间 API 缺乏协调，缺乏配合使用帮助。
  • 3.控件较少：相对于 Dojo、YUI、Ext JS 等成熟产品，可用控件较少，无法满足复杂界面功能要求。

jQuery UI 下载

下载地址: http://jqueryui.com/download/

jQuery UI 使用

在网页中使用

下载完成后需至少引入3个文件

<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

若需要相应图标功能时,需将images文件夹放入你的项目css文件夹下:

如图: 

jQuery UI 实用实例

日期选择器

日期选择器（Datepicker）绑定到一个标准的表单 input 字段上。

HTML

<!--日期-->
<input type="text" name="data" id="data" value="" />

JS

//日期控件
$("#data").datepicker({
    //月份可改变
    changeMonth: true,
    //年份可改变
    changeYear: true
});

拖动滚动

在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。

CSS

#drag {
   width: 100px;
   height: 100px;
   background: red;
}

HTML

<!--拖动滚动-->
<div id="drag"></div>

JS

//可拖拽 可拖动滚动
$("#drag").draggable({
    scroll: true
});

缩放

在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。

HTML 共用上个div#drag

JS

//缩放
$("#drag").resizable({
    //有动画效果
    animate: true,
    //阴影效果
    ghost: true
});

拖动排序

在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable 各个条目共享 draggable 属性。

HTML

<!--拖动排序-->
<ul id="sortable">
    <li>111111111</li>
    <li>2222222222</li>
    <li>33333333333</li>
</ul>

JS

//拖动排序
$("#sortable").sortable();

折叠面板

点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。

HTML

<!--折叠面板-->
<div id="accordion">
    <h3>部分 1</h3>
    <p>abitur malesuada.</p>
    <h3>部分 2</h3>
    <p>Sed non urna.</p>
</div>

JS

//折叠面板
$("#accordion").accordion();

对话框窗口

对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像 select 元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 ‘x‘ 图标关闭。

HTML

<!--对话框-->
<div id="dialog" title="对话框">
<p>显示本内容,可以移动,点击x可关闭</p>
</div>

JS

//对话框
$("#dialog").dialog();

带有图标的菜单

一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。

CSS

//菜单栏的宽度
.ui-menu { width: 150px; }

HTML

<ul id="menu">　　//通过添加类名 ui-icon ui-icon-disk调用图标
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>保存</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>放大</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>缩小</a></li>　　//通过添加类名实现选项不可用状态
  <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>打印...</a></li>
  <li>
    <a href="#">播放</a>
    <ul>
      <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>上一个</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-stop"></span>停止</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-play"></span>播放</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>下一个</a></li>
    </ul>
  </li>
</ul>

JS

//菜单栏
$( "#menu" ).menu();

预加载进度条

等待加载过程,并完成进度条。

CSS

.ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }

HTML

//进度条初始状态
<div id="progressbar"><div class="progress-label">加载...</div></div>

JS

 $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "完成！" );
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 99 ) {
        setTimeout( progress, 100 );
      }
    }

    setTimeout( progress, 3000 );
  });

jQuery UI API 文档

官方中文版API地址: http://www.css88.com/jquery-ui-api/category/effects-core/

时间： 2024-10-27 12:10:34

jQuery UI 入门之实用实例的相关文章

jQuery UI 入门之实用实例分享

jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择.jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只

jQuery UI入门

jQuery UI是jQuery的一个插件集,为jQuery的核心库添加了新的功能. jQUery UI库可以从http://jquery.com下载. 下载一个ZIP文件jquery-ui-1.9.2.custom.zip,它包含了jQuery UI的源代码.示例及文档. 解压后的目录jquery-ui-1.9.2.custom中包含4部分内容: 一个css子目录,包含与jQuery UI相关的CSS文件: 一个js目录,包含jQuery UI的JavaScript文件: 一个developm

jQuery UI 入门

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"> <style> #d1{height:100p

一款基于jquery ui漂亮的可拖动div实例

今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div id="box1" class="box blurred-bg tinted"> <h1> Blurred Background</h1> <h2> By <a h

妙味课堂Jquery从入门到插件开发到模拟视频教程 Jquery实战开发 Jquery UI

<jQuery课程 初级到高级到模拟>├<第一课:jQuery初级>│  ├01 妙味云课堂-jQuery简介.mp4│  ├02 妙味云课堂-jQuery设计思想之选择元素.mp4│  ├03 妙味云课堂-jQuery设计思想之写法.mp4│  ├04 妙味云课堂-jQuery设计思想之原生关系和链式操作.mp4│  ├05 妙味云课堂-jQuery设计思想之取值和赋值.mp4│  ├06 妙味云课堂-jQuery方法之filter not has.mp4│  ├07 妙味云课堂

jQuery UI 实例 - 日期选择器（Datepicker）

默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

jQuery UI 实例 - 自动完成（Autocomplete）

http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示数据. 尝试键入 "j",或者按向下箭头按键,即可得到一个项目列表. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <

jQuery UI部件

(一)按钮 button()方法回修改单个按钮来增强外观,而buttonset()方法对一组按钮起作用. button(options)   button('enable')   button('disable')   button('destroy')   button('option', optionName, value) buttonset同上 $('').button({}); icons 指定一个或来那个在按钮显示的图标,主要图标由对象的primary属性标识,次要图标由second

jQuery UI 教程

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