准备:

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. 遍历指定包名下所有的类(支持jar)(转)

    支持包名下的子包名遍历,并使用Annotation(内注)来过滤一些不必要的内部类,提高命中精度. 通过Thread.currentThread().getContextClassLoader()获取 ...

  2. hbase基本概念和hbase shell经常使用命令使用方法

    HBase是一个分布式的.面向列的开源数据库,源于google的一篇论文<bigtable:一个结构化数据的分布式存储系统>.HBase是Google Bigtable的开源实现,它利用H ...

  3. xcode Workspaces

    A workspace is an Xcode document that groups projects and other documents so you can work on them to ...

  4. C#的百度地图开发(一)发起HTTP请求

    原文:C#的百度地图开发(一)发起HTTP请求 百度地图的开发文档中给出了很多的事例,而当用到具体的语言来开发时,又会有些差异.我是使用C#来开发的.在获取相应的数据时,需要通过URL传值,然后获取相 ...

  5. LNK1207: incompatible PDB format in********

    LNK1207: incompatible PDB format in******** VC中错误:LINK : fatal error LNK1207: incompatible PDB forma ...

  6. SVN更改登录用户(转)

    一) 原地址:http://www.ixna.net/articles/2606 //证书缓存 $ svn list https://host.example.com/repos/project Er ...

  7. 怎样将android studio项目导入eclipse

    如今,越来越多的开源项目都是用android studio来开发的,所以源码都与eclipse有所不同. 以下是将android studio项目导入eclipse的一般步骤: 1. 先解压项目: 2 ...

  8. HDU 5066 Harry And Physical Teacher(物理题)

    HDU 5066 Harry And Physical Teacher 思路:利用物理里面的动量守恒公式.因为保证小车质量远大于小球.所以能够把小车质量当成无穷大带进去,得到答案为2 * v0 - v ...

  9. _00019 Storm架构介绍和Storm获取案例(简单的官方网站Java案例)

    博文作者:妳那伊抹微笑 itdog8 地址链接 : http://www.itdog8.com(个人链接) 博客地址:http://blog.csdn.net/u012185296 博文标题:_000 ...

  10. java IO流文件的读写具体实例

    IO流的分类:1.根据流的数据对象来分:高端流:所有的内存中的流都是高端流,比如:InputStreamReader  低端流:所有的外界设备中的流都是低端流,比如InputStream,Output ...