jquery ui 笔记

准备:

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

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

时间: 2024-10-19 17:50:39

jquery ui 笔记的相关文章

Java程序员的JavaScript学习笔记(13—— jQuery UI)

计划按如下顺序完成这篇笔记: 1. 理念. 2. 属性复制和继承. 3. this/call/apply. 4. 闭包/getter/setter. 5. prototype. 6. 面向对象模拟. 7. jQuery基本机制. 8. jQuery选择器. 9. jQuery工具方法. 10. jQuery-在"类"层面扩展. 11. jQuery-在"对象"层面扩展. 12. jQuery-扩展选择器. 13. jQuery UI. 14. 扩展jQuery UI

Java程序员的JavaScript学习笔记(14——扩展jQuery UI)

计划按如下顺序完成这篇笔记: Java程序员的JavaScript学习笔记(1--理念) Java程序员的JavaScript学习笔记(2--属性复制和继承) Java程序员的JavaScript学习笔记(3--this/call/apply) Java程序员的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序员的JavaScript学习笔记(5--prototype) Java程序员的JavaScript学习笔记(6--面向对象模拟) Java程序员

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

计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Ja

OpenLayers学习笔记3——使用jQuery UI美化界面设计

PC端软件在开发是有较多的界面库可以选择,比如DevExpress.BCG.DotNetBar等,可以很方便快捷的开发出一些炫酷的界面,最近在学习OpenLayers,涉及到web前端开发,在设计界面时刚开始不熟悉,设计的很丑,后来参照ArcGIS在线体验中心的demo以及对web前端界面设计库的调研,最终采用jQuery UI来美化界面(还有比较强大的Dojo).先来看下效果: 这里说下地图与影像切换两个按钮的实现,其他的都是一样的方式: CSS文件: #mapViewButton { wid

OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)

最近事情很多,老板给的压力也很大,经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,只能抽时间来学习其他的东西了.关于OpenLayers的在博客中不会写太多具体的实现(网上有很多openlayers的博客,关于加载wms.标记.量测的,我这里就不再重复了),只是记录自己的开发学习经验和一些需要注意的问题,真正做开发的都知道,要想学好开发只能通过自己默默的多磨..关于WW的学习和开发已经搁置了好久了,等过去这段时间,打算好好学一下jogl,争取做一些粒子模拟出来,另外打算采用rc

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

① 查看文件内容,如果文件是图片类型,点击直接查看图片: ② 如果不是图片类型,显示文件中的内容: ③ 使用 jQuery UI 中的 Dialog 显示图片 a.引入: <script src="jquery-1.8.3.min.js"></script> <script src="jquery-ui-1.11.3/jquery-ui.min.js"></script> <link rel="styl

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

JQuery.UI类库AutoComplete 调用WebService进行模糊查询

1.介绍jQuery.UI中autocomplete参数介绍. 此语法引用于: http://www.jb51.net/article/24219.htm 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显

jquery ui动态切换主题的一种实现方式

这两天看coreservlets上的jQuery教程,虽然比较老了,不过讲得还是不错. 最后一部分讲jQuery ui 主题切换,用他介绍的方法实现不了.于是自己修改了下,可以了. 代码如下: html部分: <fieldset class="ui-widget"> <legend>Changing Themes (Skins) at Run Time</legend> <div class="ui-widget-content ui