jQuery 和 jQueryUI 插件开发的通用框架

jQuery插件开发的通用框架:

关于jQuery插件开发中的重要函数可以参考:jQuery插件开发中几个重要的函数 。这里主要介绍一下jQuery开发通用的一个框架:

;(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);

jQueryUI插件开发的通用框架:

jquery.ui.widget.js提供了一个工厂方法来建立小部件的类,签名如下:
$.widget(String name, Options prototype)
调用建立小部件工厂的方法用来建立和与小部件的实例相互作用
除了由原型提供的参数以后,下面默认的方法对每一个实例都是有效的
* destroy(): 从DOM节点删除这个实例
* option(String key[, String value]): 获取或者设置选项
* enable(): 设置disabled选项为false,这取决于实例选项
* disable(): 设置disabled选项为true,这取决于实例选项
每个实例可用的属性:
* options: 当前小部件实例的所有选项,它是由用户提供的所有设置的一个集合
* element: 是包含一个单独DOM节点的jQuery对象, 它可以通过this.element[0]来访问
继续阅读

jQuery EasyUI 投掷(Droppable)用法

jQuery EasyUI 的投掷(Droppable)功能在网络是的用处是十分的大的,如果说在给一个容器选择内容时,可以用鼠标拖动来代替原始的提交方式,还有重新给页面布局时也可以用到投掷的方法,大家可以现看一下最终的效果:

实例代码

HTML代码:
<div id="dd" style="width:100px;height:100px;border:1px solid #ccc;"></div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后,在$(function(){ }); 里插入下面的代码即可:
$('#dd').droppable(options);

介绍Calendar的具体用法

下面来介绍Calendar的具体用法,首先来看属性继续阅读

jQuery EasyUI 日历(Calendar)用法

jQuery EasyUI 日历(Calendar)也是从1.1版以后才增加的,下面来看一下日历的效果图

HTML代码:

  1. <div id="cc" style="width:180px;height:180px;"></div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后,在$(function(){ }); 里插入下面的代码即可:

  1. $('#cc').calendar(options);

下面来介绍Calendar的具体用法,首先来看属性继续阅读

jQuery EasyUI 日期框(DateBox)用法

在jQuery EasyUI的1.1版本以后又添加了几个新的插件,日期框就在其内,在web查询信息的时候经常会用到日期框,下面来看一下jQuery EasyUI的效图

HTML代码:

  1. <input id="dd" type="text"/>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后,在$(function(){ }); 里插入下面的代码即可:

  1. $('#dd').datebox(options);

jQuery EasyUI日期框需要依存于一下的几个插件:
* calendar(日历)
* validatebox(验证框)

下面来介绍DateBox的具体用法,首先来看属性继续阅读

jQuery easyUI 分页(Pagination)用法

在web开发中,经常会遇到分页的需求,如果靠我们手写代码,可能代码又多 ,样式又不好看,下面介绍一下jQuery easyUI 分页功能,非常的方便简单,下面看一下效果图:

HTML代码

  1. <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后,只要在$(function(){ }); 里插入下面的代码即可:

  1. $('#pp').pagination(options);

下面来介绍Pagination的具体用法,首先来看属性继续阅读

jQuery EasyUI 提示框(Messager)用法

jQuery EasyUI 提示框(Messager)不仅重写了window默认的alert,confirm和prompt,而且还增加一些在页面右下角显示的提示框(查看演示)。

jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照《jQuery EasyUI框架使用文档》包含必要文件后,在$(function(){ }); 里插入下面的代码即可:

  1. $.messager.show()

继续阅读

jQuery EasyUI 对话框(Dialog)用法

jQuery EasyUI 对话框(Dialog)用法与EasyUI的窗口用法极为相似,最终的效果图也只与窗口的效果图差几个按钮,下面看一下EasyUI的对话框效果图(查看演示):

HTML代码 (很多属性可以和Window的用法依洋,在标记语言中定义,比如说:icon, title等等)

  1. <div id="dd" title="My Dialog" style="width:400px;height:200px;">
  2.     Dialog Content.
  3. </div>

继续阅读

jQuery EasyUI 窗口(Window)用法

jQuery EasyUI 窗口(Window)的主要用法和面板(panel)用法差不多,首先来看一下jQuery EasyUI 窗口(Window)在页面里显示的效果是这样的(查看演示):

HTML代码 (很多Window的属性可以在标记语言中定义,比如说:icon, title等等)

  1. <div id="win" icon="icon-save" title="My Window">
  2.   Window Content
  3. </div>

继续阅读

jQuery EasyUI 数字框(NumberBox)用法

jQuery EasyUI 数字框(NumberBox)相对来说比较简单,就是控制一个输入只接受数字类型,其他所有的字符都不接受。这在我们的应用中还是能起到很大作用的,比如说电话号码框获取金额框是只接受数字的,(查看演示)。下面来介绍数字框(NumberBox)用法的详细用法:

HTML代码

  1. <input type="text" id="nn"/>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后,只要在$(function(){ }); 里插入下面的代码即可:

  1. $('#nn').numberbox(options);

继续阅读