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]来访问
继续阅读

iPhone手机网站开发的插件jQTouch

jQTouch是jQuery的一款插件,可以在iPhone,iPod Touch等设备的Mobile WebKit浏览器上实现一些动画、列表导航、默认应用样式等各种常见UI效果。随着iPhone,iPod Touch等设备的使用日益增多,jQTouch无疑为手机网站的开发减少了很多工作,而且在样式和兼容性方面也得到了很大的提高。

jQTouch官方网站:http://www.jqtouch.com
打开首页即可下载最新的插件包和一些实例代码。下面介绍一下jQTouch的一些简单用法。

开始使用jQTouch

1.  加载插件

首先在页面的头部包含必要的脚本文件和样式文件
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

里面相应的文件都可以在下载的代码包里找到
继续阅读

WordPress 的投票系统插件WP-Polls

最近刚发现一个Wordpress的投票插件WP-Polls,它可以添加一个AJAX投票系统到你的WordPress博客。你可以很容易地把投票调查包含到你的WordPress的博客文章/页,它支持单选和多选的答案。
   
下载地址是:WP-Polls 下载
下面来介绍一下这个插件的安装方法和使用方法:
安装方法和其他的插件一样,下载最新版,解压缩放到你的wp-content/plugins 文件夹,然后登录管理后台到插件页面激活即可。
使用方法:
如果你想让此插件在页面上显示,可以通过两种方法来实现:
一个是可以在管理后台》外观》小工具页面,把“Polls”拖动到你的侧边栏,这样的话,你可以在所有的页面上看到这个投票系统;
另外一个方法是在你的侧边栏文件(wp-content/themes//sidebar.php)里添加如下的代码:
继续阅读

WordPress 代码高亮插件:Syntax Highlighter and Code Prettifier

在Wordpress 里显示代码的插件有很多种,此站点曾经一直在用coolcode,这个插件显示的效果也不错,但是如果想拷贝打印的话,就会很麻烦,今天介绍一种在很多网站都在使用的代码高亮插件: Syntax Highlighter and Code Prettifier 。它的官方主页是:http://www.lastengine.com/syntax-highlighter-wordpress- plugin/,它不仅可以方便实现拷贝打印等操作,而且还可以支持以下多种语言:

  • Bash/shell
  • C#
  • C++
  • CSS
  • Delphi
  • Diff
  • Groovy
  • JavaScript
  • Java
  • Perl
  • PHP
  • Plain Text
  • Python
  • Ruby
  • Scala
  • SQL
  • Visual Basic
  • XML

此插件使用方法相当简单,只要在HTML编辑模式下,用下面的格式来书写代码即可:
<pre class="brush:[code-alias]"> …Your Code Here </pre>
很显然,Code-alias是所使用编程语言的名称,例如对于PHP可以写成:
<pre class="brush:php"> …Your PHP Code Here </pre>
显示的效果如下: 继续阅读

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>

继续阅读