准备:

1、下载jquery ui库:http://jqueryui.com/download/

2、选择theme

3、建立一个良好的发展环境(mysql、netbeans)

4、创建数据库:jqueryui_db





一、jquery ui

    1、autocomplete

       1.1、描写叙述:是jQuery UI的自己主动完毕组件。

1.2、支持的数据源:主要支持字符串Array、JSON两种数据格式。

1.2.1、对于JSON格式的Array,则要求有:label、value属性。

1.2.2、当中label属性用于显示在autocomplete弹出菜单,而value属性则是选中后给文本框赋的值。假设label和value都没有指定。则无法用于autocomplete的提示。

            1.2.3、对于从server端输出的JSON的key必须用双引號。

1.3、基本的參数

            1.3.1、source:用于指定数据来源,类型为string、Array、Function。

a)string:用于ajax请求的server端地址,返回Array/JSON格式。

                   b)Array:即字符串数组 或 JSON数组。

c)Function(request, response):通过request.term获得输入的值,response([Array])来呈现数据;(JSONP是这样的方式)。

            1.3.2、minLength:当输入框内字符串长度达到minLength时,激活Autocomplete。

            1.3.3、autoFocus:当Autocomplete选择菜单弹出时,自己主动选中第一个。默认值为false。

            1.3.4、delay:即延迟多少毫秒激活Autocomplete。默觉得300毫秒。

1.4、主要回调函数

            1.4.1、select(event, ui):Autocomplete的结果列表随意一项选中时,ui.item为选中的项。

            1.4.2、create(event, ui):Autocomplete创建时触发。

            1.4.3、search(event, ui):在開始请求之前,能够在此事件中返回false来取消请求。

            1.4.4、open(event, ui):Autocomplete的结果列表弹出时触发。

            1.4.5、close(event, ui):Autocomplete的结果列表关闭时触发。

    2、tabs

       2.1、描写叙述:拥有一个内容区域和多个面板,每一个header与区域相关联。

       2.2、參数

            2.2.1、collapsible:可折叠。默觉得false。

2.2.2、event:切换条件。

默觉得click。可设为mouseover。hover

            2.2.3、active:

                   a)Boolean:设置为false。全部的面板将被折叠。可折叠的面板必须设置为true。

b)Integer:指定索引的面板将被打开。0为第一个。

            2.2.4、disabled:

                   a)Boolean:enable or disable all tabs.

                   b)Integer:数组内包括的tab将不可用。

e.g.,[0,2]。

    3、dialog

       3.1、描写叙述:对话框。

3.2、參数

       
    3.2.1、closeText:关闭的title文本。

3.2.2、draggable:是否可拖动。默觉得false。

            3.2.3、modal:假设设为true,则为模态对话框。false,非模态对话框。

3.2.4、resizable:true,对话框大小可拖动;false,对话框大小不可变。

            3.2.5、title:对话框的标题。

3.3、方法

            3.3.1、close():关闭对话框。

            3.3.2、open():打开对话框。

3.3.3、destroy():移除对话框。

    4、datepicker

       4.1、描写叙述:日期控件。

4.2:參数

            4.2.1、dateFormat:日期格式。

默觉得“mm/dd/yy”。

4.2.2、monthNames:月份的名称。

4.2.3、dayNames:星期的title。

            4.2.4、dayNamesMin:星期的label。

            4.2.5、prevText:向前button的title文本。

            4.2.6、nextText:向后button的title文本。

5、slider

       5.1、描写叙述:滑块。

       5.2、參数

            5.2.1、disabled:true,滑块不可用。

            5.2.2、min:最小值。

            5.2.3、max:最大值。

            5.2.4、orientation:vertical,垂直滑块;horizontal,水平滑块。

默认水平。

            5.2.5、step:每次滑动改变的最小值。

5.2.6、value:当前值。

       5.3、方法

            5.3.1、disable():滑块不可用。

            5.3.2、enable():滑块可用。

            5.3.3、create(event, ui):滑块创建时的回调函数。

            5.3.4、change(event, ui):滑块的值改变时触发。

            5.3.5、slide(event, ui):滑块拖动时触发。

            5.3.6、start(event, ui):開始滑动时触发。

5.3.7、stop(event, ui):停止滑动时触发。

    6、progressbar

       6.1、描写叙述:进度条。

       6.2、參数

            6.2.1、max:最大值。

            6.2.2、value:进度条的值。

                   a)Number:在0~max之间的值。

b)boolean:假设为false,则为“过渡”状态进度条。

6.3、方法

            6.3.1、create( event, ui ):当进度条被创建时触发。

            6.3.2、destroy():移除进度条。

            6.3.3、value(v):设置进度条的值。

            6.3.4、change(event, ui):当进度条的值改变时触发。

            6.3.5、complete(event, ui):当进度条达到最大值时触发。

    7、menu

       7.1、描写叙述:菜单。A menu can be created from any valid markup as long as the elements have a strict parent/child relationship。

最常见的方式是通过ul、li创建。

       7.2、參数

            7.2.1、disabled:true,菜单项不可用。

7.2.2、icons:设置菜单项的图标

       7.3、方法

            7.3.1、create(event, ui):菜单创建时触发。

            7.3.2、select(event, ui):菜单项被选择时触发。

       7.4、其他

            7.4.1、加入切割线:Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes.

    8、tooltip

       8.1、描写叙述:提示工具

       8.2、分类:普通提示工具、带动画的提示工具

    9、button

       9.1、描写叙述:button

       9.2、类型:普通button、单选button、复选button、图标button

    10、ui-widget-header

    11、ui-corner-all

二、html basic

    1、iframe

       1.1、描写叙述:iframe元素会创建包括另外一个文档的内联框架(即行内框架)。

       1.2、属性

            1.2.1、src:在iframe中显示的文档的URL。

            1.2.2、scrolling:是否在iframe中显示滚动栏。值为yes、no、auto。

            1.2.3、frameborder:是否显示框架周围的边框。值为0或1.

            1.2.4、width:宽度。

            1.2.5、height:高度

    2、table、label、div、span、id、class、form、a、img、

       ====>

       checkbox、radio、label

版权声明:本文博客原创文章,博客,未经同意,不得转载。

jquery ui 笔记的更多相关文章

  1. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  2. Web 在线文件管理器学习笔记与总结(6)jQuery UI 预览图片

    ① 查看文件内容,如果文件是图片类型,点击直接查看图片: ② 如果不是图片类型,显示文件中的内容: ③ 使用 jQuery UI 中的 Dialog 显示图片 a.引入: <script src ...

  3. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件

    Button ,可以使用 <button> <input> <a>. <input> 中的不同类型,submit , radio , checkbox ...

  4. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

    默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...

  5. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

  6. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

    accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...

  7. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

    之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...

  8. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件

    像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为  j ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Java中WebService实例

    Web Services是由企业公布的完毕其特定商务需求的在线应用服务,其它公司或应用软件可以通过Internet来訪问并使用这项在线服务. Web Service的关键技术和规则: 1.XML:描写 ...

  2. poj3254(状压dp)

    题目连接:http://poj.org/problem?id=3254 题意:一个矩阵里有很多格子,每个格子有两种状态,可以放牧和不可以放牧,可以放牧用1表示,否则用0表示,在这块牧场放牛,要求两个相 ...

  3. hdu1881(贪心+dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1881 分析:按照结束时间从小到大排序,然后以每个结束点为容量进行01背包,选入的必定符合条件的. 因为 ...

  4. 利用Java针对MySql封装的jdbc框架类 JdbcUtils 完整实现(包括增删改查、JavaBean反射原理,附源代码)

    近期看老罗的视频,跟着完毕了利用Java操作MySql数据库的一个框架类JdbcUtils.java,完毕对数据库的增删改查.当中查询这块,包含普通的查询和利用反射完毕的查询,主要包含以下几个函数接口 ...

  5. Linux下OpenCV的环境搭建(转)

    OpenCV is the most popular and advanced code library for Computer Vision related applications today, ...

  6. SWT的选择文件和文件夹的函数

    org.eclipse.swt.widgets.DirectoryDialog//选择目录org.eclipse.swt.widgets.FileDialog//SWT.OPEN打开文件 SWT.SA ...

  7. Revit 2015 公布!

    Revit 2015 公布了, 如今能够下载.大家能够搜索下中文版的下载. 之前就知道2015 的模型操作速度再次提高, 2015安装后的马上载入跑了一个模型.果然,2015 打开自带的高级模型,不管 ...

  8. pcie inbound、outbound及EP、RC间的互相訪问

    Inbound:PCI域訪问存储器域 Outbound:存储器域訪问PCI域 RC訪问EP: RC存储器域->outbound->RC PCI域->EP PCI域->inbou ...

  9. SDL2源码分析8:视频显示总结

    ===================================================== SDL源码分析系列文章列表: SDL2源码分析1:初始化(SDL_Init()) SDL2源 ...

  10. 基于HttpClient 4.3的可訪问自签名HTTPS网站的新版工具类

    本文出处:http://blog.csdn.net/chaijunkun/article/details/40145685,转载请注明.因为本人不定期会整理相关博文,会对相应内容作出完好.因此强烈建议 ...