准备:

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. Servlet:通过初始参数实现权限访问某个文件、页面

    目录结构 src 目录下com.xieyuan包MyServlet.java文件(Servlet文件) package com.xieyuan; import java.awt.Color; impo ...

  2. oracle动态注冊參数local_listener

    local_listener參数有两种书写格式,提供了不同的功能. 监听文件上,1521和1526port上都有动态监听port. [oracle@dbsv admin]$ cat listener. ...

  3. 使用POI生成Excel报表

    先把报表模板截图贴上来 下面是POI编写的报表生成类ExcelReport.java package com.jadyer.report; import java.io.FileNotFoundExc ...

  4. asp.net出现正在中止线程解决方案

    刚才又再次遇到了一个之前遇到的问题,在这里记录一下. 起因: 如果使用 Response.End.Response.Redirect 或 Server.Transfer 方法,将出现 ThreadAb ...

  5. 新浪SAE数据库信息

    此账号仅能在SAE平台上使用,不能从外部连接我们建议开发者使用SaeMysql操作数据库 如果您想自己实现数据库相关操作,可以使用以下常量: 用户名  : SAE_MYSQL_USER 密 码 : S ...

  6. 使用Intent启动组件

    android应用程序的三大组件--Activities.Services.Broadcast Receiver,通过消息触发,这个消息就是Intent,中文又翻译为"意图"(我感 ...

  7. 创建和关联内容数据库到指定Web应用程序和站点集

    创建和关联内容数据库到指定Web应用程序和站点集         一个Web应用程序不限于使用单个内容数据库.SharePoint同意你关联多个内容数据库到Web应用程序.原因之中的一个是基于内容数据 ...

  8. SVN的log,cat,list,diff的使用

     svn log          展示给你主要信息:每个版本附加在版本上的作者与日期信息和所有路径修改. svn diff          显示特定修改的行级详细信息. svn cat       ...

  9. linux进程解析--进程的退出及销毁

    一进程的退出: 当一个进程运行完毕或者因为触发系统异常而退出时,最终会调用到内核中的函数do_exit(),在do_exit()函数中会清理一些进程使用的文件描述符,会释放掉进程用户态使用的相关的物理 ...

  10. ubuntu14.04中 gedit 凝视能显示中文,而source insight中显示为乱码的解决的方法

    1.乱码显示情况: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcjc3NjgzOTYy/font/5a6L5L2T/fontsize/400/fill/ ...