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、对于从服务器端输出的JSON的key必须用双引号。
       1.3、主要的参数
            1.3.1、source:用于指定数据来源,类型为string、Array、Function。
                   a)string:用于ajax请求的服务器端地址,返回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:向前按钮的title文本。
            4.2.6、nextText:向后按钮的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、描述:按钮
       9.2、类型:普通按钮、单选按钮、复选按钮、图标按钮
    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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值