zoukankan      html  css  js  c++  java
  • 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

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

  • 相关阅读:
    MyBatis的分页插件PageHelper
    Mybatis的插件 PageHelper 分页查询使用方法
    textarea还剩余字数统计,支持复制粘贴的时候统计字数
    Mybatis——oracle——sql语句结尾不加;
    window.location.href和window.open的几种用法和区别
    window.location.href的用法(动态输出跳转)
    mybatis rownum Oracle 随机
    java 回车替换换行
    session 取
    socket编程浅知识
  • 原文地址:https://www.cnblogs.com/yxwkf/p/4637986.html
Copyright © 2011-2022 走看看