1.阅读API文档的一般方法？

通常地， API由三部分构成：属性、方法、事件。

  • 属性表示参数配置，作为一个组件的微调，或者功能的开启与关闭；
  • 方法表示组件能够发生的动作，或者组件的状态监测；
  • 事件表示触发，即提供一个观测点，当触碰到观测点时，将产生通知或函数回调；

这三类几乎覆盖了可能的用户动作、数据传递。

2.如何看Jquery UI Dialog的API？

2.1了解对话框的构成

要掌握一个东西，就必须先了解他，就像吃饭睡觉那么自然，才能更好地掌握。

对于对话框，我们也要做同样的了解。

我们都知道对话有如下内容：

弹出，关闭，是否为模式，高度，宽度，标题，是否能够拖拽，。。。

用以下两幅图从结构上把握一个对话框：

之所以说从结构上，是因为我们组织知识的方法很多，但是了解一个物体的结构体系的话，会获得一种整体的全局观，会促使我们从意识上加深影响和理解。

从上面两个图分析可以得出：

对话框 => (标题栏，内容，按钮面板)

标题栏 => (标题文本，关闭窗口按钮)

按钮面板 => (按钮集)

事实上，这是一棵典型的树结构，符合程序设计思想——自定向下，也符合HTML的语法结构——Tree。

2.2API列表分析

网址：http://api.jqueryui.com/dialog/

从以上我们知道API主要分为三个组成部分（属性、方法、事件），如何使用它们？

——关键在于掌握其“初始化”与“读写”（又叫“访问”）。

2.3Options内容简介与读写

内容：高度、宽度、显示（带动画）、隐藏（带动画）、是否支持ESC键、是否为模式、关闭按钮的文本、是否拖动、标题、是否能改变大小。。。

Options以对象的方式进行初始化，如

  1. $( ".selector" ).dialog({
  2.     appendTo: "#someElem"
  3. });
  4.  
  5. $( ".selector" ).dialog({  closeOnEscape: false});
  1.  

读写方式，字符串形式：

  1.  
  1. //Getter
  2. $( ".selector" ).dialog( "option", "appendTo", "#someElem" );
  3. //Setter
  4. var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
  5.  
  6. // Getter
  7. var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
  8.  // Setter
  9. $( ".selector" ).dialog( "option", "closeOnEscape", false );

2.4Methods内容简介与调用

内容：打开、关闭、销毁、获取实例、窗口顶层、设置属性

Methods以字符串的形式调用

  1. $( ".selector" ).dialog( "close" );
  2.  
  3. $( ".selector" ).dialog( "moveToTop" );

2.5 Events

内容：按照JS中事件的约定，就是为了回调而生，是一种典型的回调模式。

拖动、改变大小、关闭前后、打开、创建

以函数对象的方式定义：

  1. $( ".selector" ).dialog({  beforeClose: function( event, ui ) {}});

3 Dialog 的CSS Theme

Additionally, when the modal option is set, an element with a ui-widget-overlay class name is appended to the <body>.

Theme设计分析：

按照层级地，通过“-”表示每一分级

  • ui表示最高级，所有CSS的根Root；
    • dialog表示部件，Widget
      • titlebar表示部件的构成；
      • 。。。递归地构成。。。直到一个最小的一个HTML粒度

4 More

4.1用途

1）信息提示——Information Notice

2）错误提示——Error Report

3）确认——Confirm DoSomething

4）表单输入——Form Input

4.2 封装

常见的封装：

showDialog(url,title,width,height,model, onok, onclose,opentype)

API分析——Jquery UI Dialog的更多相关文章

  1. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  2. [转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net

    本文转自:http://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPN ...

  3. jQuery UI dialog 的使用

    今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框. 1 <input type= ...

  4. jQuery UI dialog 參数说明

    前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B  B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...

  5. Jquery - UI - Dialog（转）

    jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...

  6. jQuery UI dialog 参数说明

    前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B  B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的 ...

  7. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  8. jQuery UI dialog

    初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...

  9. jQuery UI dialog插件出错信息:$(this).dialog is not a function

    使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...

随机推荐

  1. 如何改变服务器的本地域名来访问本地服务器 而不用localhost或者127.0.0.1来访问

    1. vim nginx.conf 如下: server {                listen       80;                server_name pma;       ...

  2. DICOM：DICOM3.0网络通信协议（续）

    转载:http://blog.csdn.net/zssureqh/article/details/44278693 题记: 近一年来一直坚持周末写博客,整理工作和闲暇之余的点点滴滴.对于新知识点.新技 ...

  3. debian下mysql主从配置

    1.确保master/slave只有一份/etc/mysql/my.cnf , 不要在其他地方再有my.cnf (如/etc/my.cnf  /usr/local之类) 2.master配置: 在[m ...

  4. iOS 图片拉伸的解释

    以前对于ios的图片拉伸参数一直不太理解,终于看到一篇好文章,转载一下,原文地址:http://blog.csdn.net/q199109106q/article/details/8615661 主要 ...

  5. Java集合框架中Map接口的使用

    在我们常用的Java集合框架接口中,除了前面说过的Collection接口以及他的根接口List接口和Set接口的使用,Map接口也是一个经常使用的接口,和Collection接口不同,Map接口并不 ...

  6. XP下使用IIS访问asp出现无权查看网页问题的解决办法

    这是用户权限问题,因为你用的磁盘是NTFS格式. 解决方法: 一.添加用户(“Everyone”或者“IUSR_你的机器名”,如IUSR_HONG,即“Internet 来宾用户”) 二.修改用户权限 ...

  7. linux下重启tomcat、实时查看tomcat运行日志

    在Linux系统下,重启Tomcat使用命令操作的! 首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh 查看 ...

  8. CityGML文件格式

    1 LOD3中,wall是由cuboid组成的,一个墙面包括8个面,分为wall-1, wall-2...wall-8,door也是,因此他们都是multisurface (一般由8个面片组成). 在 ...

  9. Android ViewHolder工具

    import android.util.SparseArray; import android.view.View; /** * 封装了setTag()和getTag()方法 * 封装了findVie ...

  10. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...