基于jQuery 常用WEB控件收集[收藏]

原文地址: http://www.open-open.com/ajax/jQuery.htm

Horizontal accordion: jQuery
 

基于jQuery开发,非常简单的水平方向折叠控件。
Horizontal accordion: jQuery

jQuery-Horizontal Accordion

具有XBOX360 blade界面风格的水平方向Accordion。

jQuery-Horizontal Accordion

AutoComplete-JQuery

jQuery插件易于集成到现在的表单中(Form)。

AutoComplete-JQuery

Facebook like Autocomplete

基于jQuery开发,类似于FaceBoox提供的AutoCompleter。

Facebook like Autocomplete

jQuery Autocomplete Mod

jQuery Autcomplete插件。能够限制下拉菜单显示的结果数。

jQuery Autocomplete Mod

jqac

基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。

jqac

jQuery Tag Suggestion

类似于del.icio.us提供的tag suggesting功能。

jQuery Tag Suggestion

Autocomplete-jQuery ajax

利用jQuery(Ajax),PHP和MySQL开发的AutoCompleter。

Autocomplete-jQuery ajax

jQuery.Suggest

跨浏览器支持,基于jQuery开发的Autocomplete library。

jQuery.Suggest

Autocomplete- jQuery plugin

一个jQuery Autocompleter,提供缓存选项来限制对服务器的请求。

Autocomplete- jQuery plugin

jquery-aop

为JavaScript增加面向方面编程特性的jQuery插件。它能给任何函数添加Advices(BeforeAfterAround)。

jquery-aop

jQuery Pagination

jQuery分页插件

jQuery Pagination

Facebox

Facebox是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面。

Facebox

jwysiwyg

WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。

jwysiwyg

Flexigrid

Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

Flexigrid

SimpleModal

SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。

SimpleModal

Farbtastic

Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。

Farbtastic

ContextMenu

用于创建右键弹出菜单的jQuery插件。

ContextMenu

Damn Small Rich Text Editor

基于jQuery开发,能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能,可设置文本编辑区大小,Ajax上传图片等。

Damn Small Rich Text Editor

jNice

创建自定义外观的Form元素,功能与正常的Form元素相似。

 

 

imgAreaSelect

imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。
imgAreaSelect

jQuery calculate

jQuery计算插件,提供一些常用的数学计算功能比如:Sum、Average、Min、Max等。

jQuery calculate

Easy Slide

EasySlide是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示,并加上鼠标指向时的暂停效果(Pause),可以当作图库展示或是动画及广告Banner使用。

Easy Slide

Easy News

Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件,可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果,调整显示速度,可自行修改CSS改变您为喜欢的风格。

Easy News

Easy News Plus

Easy News Plus是基于Easy News开发,滚动式新闻或图文内容展示的jQuery插件,但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。

Easy News Plus

jTip

jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。

jTip

BetterTip

一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活。

BetterTip

jQuery plugin: Accordion

用于创建 折叠菜单的jQuery插件。

jQuery plugin: Accordion

clueTip

clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时,它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取,也可以从当前页面中的元素中获取。

clueTip

jQuery plugin: Treeview

这个插件能够把无序列表转换成可展开与收缩的Tree。

 
jQuery plugin: Treeview

jQuery plugin: Validation

jQuery校验插件。

jQuery plugin: Validation

Flot

Flot一个纯javascript绘画库,基于jQuery开发。它能够在客户端根据任何数据集快速生成图片。目前只能绘制线状图和柱状。

Flot

jQuery select box

模仿HTML select box实现功能的一个下拉菜单。

jquery中ajax超时处理

其实需要注意的是回调函数的几个参数,我们经常用法是回调函数只有一个msg参数,但是在处理超时的时候需要用到第二个参数error。
例:


 

手册中对于AJAX error参数的说明:

error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数:XMLHttpRequest 对象、错误信息、(可选)捕获的错误对象。Ajax 事件。

function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
    this; // 调用本次AJAX请求时传递的options参数
}

PHPME_CMS开发笔记

1.2009-02-15

left join连接查询的高级使用

SELECT a.*,b.surports,b.againsts,count(c.id) FROM phpme_news as a left join phpme_digg as b on(b.content_id=a.id and b.cat_id=a.cat_id) left join phpme_comment as c on(a.id=c.content_id and a.cat_id=c.cat_id) where a.cat_id in(45) group by id order by id desc limit 0,10
 
 
2.2009-02-19
union all连接查询的高级应用
select z.* from (SELECT a.*,b.cat_name FROM phpme_news as a left join phpme_category as b on(a.cat_id=b.cat_id) where tags like ‘% 测试标签 %’
union all
SELECT a.*,b.cat_name FROM phpme_article as a left join phpme_category as b on(a.cat_id=b.cat_id) where tags like ‘% 测试标签 %’
union all
SELECT a.*,b.cat_name FROM phpme_download as a left join phpme_category as b on(a.cat_id=b.cat_id) where tags like ‘% 测试标签 %’) as z order by z.time desc limit 0,10
 
 
3.2009-02-21
获取搜索的结果数
select sum(total) from (select count(*) as total from phpme_news as a where title like ‘%php atr%’ union select count(*) as total from phpme_news as a where title like ‘%php%’ union select count(*) as total from phpme_news as a where title like ‘%atr%’ ) as z
 
获取搜索的结果
select z.* from(SELECT a.*,b.surports,b.againsts,count(c.id),d.cat_name FROM phpme_news as a left join phpme_digg as b on (b.content_id=a.id and b.cat_id=a.cat_id) left join phpme_comment as c on(a.id=c.content_id and a.cat_id=c.cat_id) left join phpme_category as d on(d.cat_id=a.cat_id) where a.deleted!=1 and a.title like ‘%巴西 总统%’ group by a.id union SELECT a.*,b.surports,b.againsts,count(c.id),d.cat_name FROM phpme_news as a left join phpme_digg as b on (b.content_id=a.id and b.cat_id=a.cat_id) left join phpme_comment as c on(a.id=c.content_id and a.cat_id=c.cat_id) left join phpme_category as d on(d.cat_id=a.cat_id) where a.deleted!=1 and a.title like ‘%巴西%’ group by id union SELECT a.*,b.surports,b.againsts,count(c.id),d.cat_name FROM phpme_news as a left join phpme_digg as b on (b.content_id=a.id and b.cat_id=a.cat_id) left join phpme_comment as c on(a.id=c.content_id and a.cat_id=c.cat_id) left join phpme_category as d on(d.cat_id=a.cat_id) where a.deleted!=1 and a.title like ‘%总统%’ group by id ) as z order by z.time desc limit 0,20
 
关于count聚集函数的别名
SELECT a.*,b.surports,b.againsts,count(c.id) as comment,d.cat_name FROM phpme_news as a left join phpme_digg as b on (b.content_id=a.id and b.cat_id=a.cat_id) left join phpme_comment as c on(a.id=c.content_id and a.cat_id=c.cat_id) left join phpme_category as d on(d.cat_id=a.cat_id) where a.deleted!=1 group by id order by id desc limit 0,20
 
 
4.2009-02-22
关于多表不同列的SELECT联合查询问题。
由于表的列不同,是不能够使用union all联合查询的,它会提示错误,
我是这么解决的
 
select z.* from (
 SELECT a.id,a.title,a.time,a.clicked,a.author,a.cat_id,a.thumb,a.content,a.tags,a.content_url,b.cat_name,c.surports,c.againsts,count(d.id) FROM phpme_news as a left join phpme_category as b on(a.cat_id=b.cat_id) left join phpme_digg as c on (c.content_id=a.id and c.cat_id=a.cat_id) left join phpme_comment as d on(a.id=d.content_id and a.cat_id=d.cat_id) where tags like ‘% 测试标签 %’ group by id
 union all
 SELECT a.id,a.title,a.time,a.clicked,a.author,a.cat_id,a.thumb,a.content,a.tags,a.content_url,b.cat_name,c.surports,c.againsts,count(d.id) FROM phpme_article as a left join phpme_category as b on(a.cat_id=b.cat_id) left join phpme_digg as c on (c.content_id=a.id and c.cat_id=a.cat_id) left join phpme_comment as d on(a.id=d.content_id and a.cat_id=d.cat_id) where tags like ‘% 测试标签 %’ group by id
 union all
 SELECT a.id,a.title,a.time,a.clicked,a.author,a.cat_id,a.thumb,a.content,a.tags,a.content_url,b.cat_name,c.surports,c.againsts,count(d.id) FROM phpme_download as a left join phpme_category as b on(a.cat_id=b.cat_id) left join phpme_digg as c on (c.content_id=a.id and c.cat_id=a.cat_id) left join phpme_comment as d on(a.id=d.content_id and a.cat_id=d.cat_id) where tags like ‘% 测试标签 %’ group by id
 ) as z order by z.time desc limit 0,10
 
即不能对一张表完全查询,而只对所关心的列查出来,这样三张表查出来的列都是一样的。
不要用a.*。
 
 
DIGG获取相关内容
select z.* from (
 SELECT a.id,a.title,a.time,a.clicked,a.author,a.cat_id,a.thumb,a.content,a.tags,a.content_url,b.cat_name,c.surports,c.againsts,count(d.id) as comment FROM phpme_news as a left join phpme_category as b on(a.cat_id=b.cat_id) left join phpme_digg as c on (c.content_id=a.id and c.cat_id=a.cat_id) left join phpme_comment as d on(a.id=d.content_id and a.cat_id=d.cat_id) group by id
 union all
 SELECT a.id,a.title,a.time,a.clicked,a.author,a.cat_id,a.thumb,a.content,a.tags,a.content_url,b.cat_name,c.surports,c.againsts,count(d.id) as comment FROM phpme_article as a left join phpme_category as b on(a.cat_id=b.cat_id) left join phpme_digg as c on (c.content_id=a.id and c.cat_id=a.cat_id) left join phpme_comment as d on(a.id=d.content_id and a.cat_id=d.cat_id) group by id
 union all
 SELECT a.id,a.title,a.time,a.clicked,a.author,a.cat_id,a.thumb,a.content,a.tags,a.content_url,b.cat_name,c.surports,c.againsts,count(d.id) as comment FROM phpme_download as a left join phpme_category as b on(a.cat_id=b.cat_id) left join phpme_digg as c on (c.content_id=a.id and c.cat_id=a.cat_id) left join phpme_comment as d on(a.id=d.content_id and a.cat_id=d.cat_id) group by id
 ) as z ,phpme_digg as y where z.id=y.content_id and z.cat_id=y.cat_id order by z.surports desc,z.againsts asc,z.id desc limit 0,10

5.2009-03-16
看来那位SYU说的对,我居然还在用用LIKE进行站内搜索,我现在才发现,这并不是什么效率、百万级、千万级或者优化的问题,LIKE根本不适合搜索引擎,虽然MYSQL的全文检索对中文支持不好,可以我想总会有办法变通的,就像PHPCMS、DEDECMS、DISCUZ!等等一系列强大的PHP程序一样,我想我也能做到。
对了,DISCUZ!,目前跟我一样用的是LIKE,所以它的搜索效率不高,囧TL…
目前可能会花比较多的时间对PHPME_CMS进行测试,虽然以后求职或者个人的需要,但是PHPME_BLOG暂时不忙开发,
慢慢来,再过一些时间,慢慢来…

mysql全文检索对中文支持的不好
我测试过
的确如此
搜索字符串必须为4个字及以上
比如‘中亚地区’
如果是‘中国’则没有结果
不过检索速度绝对快一个数量级以上
可以用大数据量的表试试

为什么要设置 Mysql 的 ft_min_word_len=1 ?
从 Mysql 4.0 开始就支持全文索引功能,但是 Mysql 默认的最小索引长度是 4。如果是英文默认值是比较合理的,但是中文绝大部分词都是2个字符,这就导致小于4个字的词都不能被索引,全文索引功能就形同虚设了。国内的空间商大部分可能并没有注意到这个问题,没有修改 Mysql 的默认设置。
为什么要用全文索引呢?
一般的数据库搜索都是用的SQL的 like 语句,like 语句是不能利用索引的,每次查询都是从第一条遍历至最后一条,查询效率极其低下。一般数据超过10万或者在线人数过多,like查询都会导致数据库崩溃。这也就是为什么很多程序都只提供标题搜索的原因了,因为如果搜索内容,那就更慢了,几万数据就跑不动了。
Mysql 全文索引是专门为了解决模糊查询提供的,可以对整篇文章预先按照词进行索引,搜索效率高,能够支持百万级的数据检索。
如果您使用的是自己的服务器,请马上进行设置,不要浪费了这个功能。
如果您使用的是虚拟主机,请马上联系空间商修改配置。首先,Mysql 的这个默认值对于中文来说就是一个错误的设置,修改设置等于纠正了错误。其次,这个配置修改很简单,也就是几分钟的事情,而且搜索效率提高也降低了空间商数据库宕掉的几率。如果你把本篇文章发给空间商,我相信绝大部分都会愿意改的。

设置方法:
请联系服务器管理员修改 my.ini (Linux 下是 my.cnf ) ,在 [mysqld] 后面加入一行“ft_min_word_len=1”,然后重启Mysql,再登录网站后台(模块管理->全站搜索)重建全文索引,否则将无法使用全站搜索功能。

6.2009-03-17

PHPME_CMS搜索引擎完成初步开发,这是PHPME_CMS特有的搜索引擎,结合了PHPCMS,DEDECMS的设计思路,
鉴于MYSQL对中文的支持不太好,不管什么中文编码,少了4个字就不能全文检索,
根据它的一些原因,
首先将中文内容分词,分词是关键,可以自定义分词字典,根据字典中的排序量进行分词,
我这里建了个收集用户搜索关键字的表,用于收集关键字然后在后台分词,当然,为了排除一些恶意的用户,
搜索量必须大于自定义的一定数才会被定义为分词,
分词的一些关键:
中国人
一般的分词:中国 国人
好一点的分词: 中国 人
我的分词方法:中国人(“中国人”的排序量高于“中国”)

将一个文章标题与内容结合,相同的分词去掉,然后将这些分词转换为ASCII码。
为什么不转换成区位码呢?因为我比较喜欢ASCII。
这样“PHP”三个字节的数也能搜出来
每个UTF-8编码的汉字会有6个数的ASCII码,中间用空格分割,满足MYSQL全文检索的要求,
搜索起来很快,就算是千万级的搜索也不会上秒!!!!
 

该BLOG系统暂停修改,内容继续更新…

由于目前忙于PHP_CMS的工作,该版本BLOG的修改暂停,可能要半年后才能继续了,虽然CMS的开发不是一件很难的事,不过由于要处理其中的一些细节问题,最重要的是,在对PHPME_CMS的开发中,发现PHPME_BLOG的很多缺点和不足,如果要修改的话,可能要大换血,很多东西都要换、要改,特别是核心的一些函数和设计理念也要改,这可不是一两个周能完成的事情。一个人起码得花3个月的时间,这对于我现在的情况是不太现实的,特别是一年后即将忙于找工作,与找工作关系最大的可能是CMS,BLOG系统很少有客户要求,一般是门户、企业、商业网站,没有BLOG系统的份,这些东西写出来是当时闲着没事可干。


好吧,以前决定了自己以后作品的名字,即PHPME_系列,也就是说,以前的作品换名字,当然,是在发表开源作品的时候的名字。对于目前这个BLOG系统,以前随便命名的是PHPBLOG,以后它将有个新名字了PHPME_BLOG,当然,那是6个月以后的事情了。

update的多表更新

在开发中,数据库来回换,而有些关键性的语法又各不相同,这是一件让开发人员很头痛的事情.本文总结了Update语句更新多表时在SQL Server,Oracle,MySQL三种数据库中的用法.我也试了SQLite数据库,都没成功,不知是不支持多表更新还是咋的. 在本例中: 我们要用表gdqlpj中的gqdltks,bztks字段数据去更新landleveldata中的同字段名的数据,条件是当landleveldata 中的GEO_Code字段值与gdqlpj中的lxqdm字段值相等时进行更新.


SQL Server语法:UPDATE { table_name WITH ( < table_hint_limited > [ …n ] ) | view_name | rowset_function_limited } SET { column_name = { expression | DEFAULT | NULL } | @variable = expression | @variable = column = expression } [ ,…n ] { { [ FROM { < table_source > } [ ,…n ] ] [ WHERE < search_condition > ] } | [ WHERE CURRENT OF { { [ GLOBAL ] cursor_name } | cursor_variable_name } ] } [ OPTION ( < query_hint > [ ,…n ] ) ]


SQL Server示例: update a set a.gqdltks=b.gqdltks,a.bztks=b.bztks from landleveldata a,gdqlpj b where a.GEO_Code=b.lxqdm






Oracle语法: UPDATE updatedtable SET (col_name1[,col_name2…])= (SELECT col_name1,[,col_name2…] FROM srctable [WHERE where_definition])

 

Oracel 示例: update landleveldata a set (a.gqdltks, a.bztks)= (select b.gqdltks, b.bztks from gdqlpj b where a.GEO_Code=b.lxqdm)

 

 

 

 


MySQL语法: UPDATE table_references SET col_name1=expr1 [, col_name2=expr2 …] [WHERE where_definition]

 

MySQL 示例: update landleveldata a, gdqlpj b set a.gqdltks= b.gqdltks, a.bztks= b.bztks where a.GEO_Code=b.lxqdm

 

 

 

PS:

不知道是什么原因,我试了一个多小时进行MYSQL的UPDATE多表更新总是失败,语法是没有错误的。

最后发现要是几个表中有表没有值,即为空的情况下,多表更新操作就会失败,

所以,我还是老实巴交地分别更新吧哎。