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

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

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

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

2.如何看Jquery UI Dialog的API?

2.1了解对话框的构成

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

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

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

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

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

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

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

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

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

按钮面板 => (按钮集)

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

2.2API列表分析

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

从以上我们知道API主要分为三个组成部分(属性、方法、事件),如何使用它们?

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

2.3Options内容简介与读写

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

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

$( ".selector" ).dialog({
appendTo: "#someElem"
}); $( ".selector" ).dialog({ closeOnEscape: false});
 

读写方式,字符串形式

 
//Getter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );
//Setter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" ); // Getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
// Setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );

2.4Methods内容简介与调用

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

Methods以字符串的形式调用

$( ".selector" ).dialog( "close" );

$( ".selector" ).dialog( "moveToTop" );

2.5 Events

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

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

以函数对象的方式定义:

$( ".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. [Effective JavaScript 笔记]第53条:保持一致的约定

    对于api使用者来说,你所使用的命名和函数签名是最能产生普遍影响的决策.这些约定很重要具有巨大的影响力.它建立了基本的词汇和使用它们的应用程序的惯用法.库的使用者必须学会阅读和使用这些.一致的约定可以 ...

  2. Unity3D Optimizing Graphics Performance for iOS

    原地址:http://blog.sina.com.cn/s/blog_72b936d801013ptr.html icense Comparisons http://unity3d.com/unity ...

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

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

  4. WPF 路由事件总结

    1.什么是路由事件 已下为MSDN中的定义 功能定义:路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件. 实现定义:路由事件是一个 CLR 事件,可以由 R ...

  5. PHP很有用的一个函数ignore_user_abort ()

    PHP很有用的一个函数ignore_user_abort () 2013-01-16 14:21:31|  分类: PHP |  标签:php  函数  |举报|字号 订阅     ignore_us ...

  6. Controller之间传递数据:协议传值

    http://itjoy.org/?p=416 前边介绍过从第一个页面传递数据到第二个页面,那么反过来呢我们该如何操作?还是同一个例子,将第二个页面的字符串传递到第一个页面显示出来,这中形式就可以使用 ...

  7. Xenomai

    http://blog.csdn.net/robertsong2004/article/details/43889249 嵌入式系统的开发,如果对实时性要求不高,就可以使用Linux自身的实时补丁实现 ...

  8. php-fpm启动

    2014年6月30日 11:52:17 遇到一个问题,安装了redis.so后无论怎么重启nginx 还是 php-fpm都无法加载redis 最后发现重启php-fpm的参数弄错了 要这样: ./p ...

  9. 项目总结(二)--- CocoaPods的简单介绍与使用

    先谈下,我们为什么要使用CocoaPods,它能为我们做什么吧. 所有开发过iOS应用的小伙伴们都知道,在整个项目中,第三方库的引用必不可少(特别感谢那些优秀第三方开源库的作者,给我们提供了多大的便捷 ...

  10. Java性能优化权威指南-读书笔记(五)-JVM性能调优-吞吐量

    吞吐量是指,应用程序的TPS: 每秒多少次事务,QPS: 每秒多少次查询等性能指标. 吞吐量调优就是减少垃圾收集器消耗的CPU周期数,从而将更多的CPU周期用于执行应用程序. CMS吞吐调优 CMS包 ...