存档

文章标签 ‘Plugin’

今天用jQuery UI.Layout Plug-in做的后台管理界面

2009年9月22日 IT北瓜 61 条评论

jQuery UI.Layout Plug-in是jQuery世界中少有的布局插件中做得最好的一个,该插件可以用少量代码实现类似Extjs的界面布局。今天用这个插件做了一个后台界面,自我感觉效果还可以,⊙﹏⊙,leeo我不懂美工,所以就将就着吧,亮个相:

点这里查看原图

2009年10月28日0:29:13:整理源代码

之前说过有时间会把这个框架的代码整理发布出来,可是由于有些忙,其实也是比较懒,哈哈。。。所以一直没有花时间去整理,今天又有访客问我要源码,也觉得不好意思再拖了,说过的话还是要算数的,于是今晚整理出来给大家,由于要从整个后台框架抽取出来同时还要转化为静态页面的方式进行模拟,所以还是花了不少时间的。。。

点击这里看演示页面

点击这里下载源代码

部分人反应说源代码下载不了,现在提供另一个下载地址:

从RayFile下载源代码

通过meebo与来自捷克的macek关于niceTitle的一次谈话

2009年9月18日 IT北瓜 1 条评论

自2009年9月11日为IT北瓜安上即时聊天工具meebo(见文章:停用SMCF插件启用Meebo即时聊天)一周以来,没人通过meebo给我留言,⊙﹏⊙b汗。今天下午突然meebo客户端提示有人给我留言,一看还是英文内容,有点意外,于是进入meebo一探究竟。真的一时有点没反应过来,因为我的英语水平实在是so pool!谈话中得知他是来自捷克的macek,问我关于niceTitle的事情。他说喜欢我写的jQuery niceTitle plugin,但是该插件对于input标签无效。我告诉他由于input标签没有href属性,所以这个插件现在是无法对input标签实现niceTitle效果的,但可以通过简单的改写一下代码来实现,具体做法如下:

将45行的

this.tmpHref = this.href;

修改为

this.tmpHref = "";

将55行的

this.tmpHref = (this.tmpHref.length > _length ? this.tmpHref.toString().substring(0,_length) + "..." : this.tmpHref);

修改为

this.tmpHref = "";

然后这用调用插件就可以实现input的niceTitle提示效果

$("input").niceTitle();

不过这只是暂时的解决方法,很感谢macek提出的建议,我会在插件的下一个版本实现相关功能,让插件对拥有title属性的标签都能适用。

下面是我和macek本次交谈的内容,我想macek大概明白的那点难登大雅之堂的英文想表达的意思,O(∩_∩)O哈哈~

原创插件之jQuery Simple Ajax Message plugin

2009年9月12日 IT北瓜 没有评论

这个插件的功能十分简单,用于提示ajax执行过程的等待效果及执行结果的成功或者失败提示。

说明:

1.需要pngFix插件支持以实现IE浏览器下png背景图片的透明效果

2.如果设置draggable参数为true,则还需要jqDnR插件实现拖动效果,这款插件十分小巧。

3.提供两套皮肤,通过skin: ‘aero’,//允许值::"aero"、"aero2"来设置。

4.参数timeout默认值为0,不设置该值则插件不会自动关闭需要通过hideSAM();来关闭,设置了该值则会定时关闭。

实例演示DEMO

使用Auto HighSlide代替Highslide4WP

2009年9月11日 IT北瓜 3 条评论

其实一直很喜欢mg12Highslide4WP,但是直接在WordPress后台撰写日志感觉比较麻烦,Highslide4WP的插入图片的操作也比较繁琐,所以现在一直用Windows live writer来写日志。不过有得必有失,这样一来,插入图片就没有Highslide特效了。不过我想既然有需求那就应该会有供应的,本来还想自己用jQuery写一个js文件来绑定onclick事件条用Highslide4WP插件,但后来想想这样也不是很方便,况且自己不懂php。结果通过Google搜索到了Showfom的这款插件Auto HighSlide,其中介绍说到这款插件是“Highslide4WP的精简加强版”,但这两款插件不能同时使用。于是停用了Highslide4WP而使用Auto HighSlide,效果如下:

点击前图片显示:

点击后图片显示:

这样不但以后写的日志可以有Highslide特效,以前写的日志同样也有,这款插件也支持键盘方向键操作,很不错,(*^__^*) 嘻嘻……

原创插件之jQuery niceTitle plugin

2009年9月4日 IT北瓜 27 条评论

历史版本:

Version 1.00  2009年9月1日  第一个发布版本

Version 1.10  2009年9月7日  修正在IE浏览器下改变背景颜色无效的bug

Version 1.20  2009年9月14日  更新后,当a标签之间的内容为一张图片时,不显示图片的alt和title,这样更美观。

Version 2.00 2009年9月19日 更新到v2.0.0,现在niceTitle能够对所有HTML标签起作用,感谢来自捷克的Macek提出的建议。v1版本只对a标签起作用。

Version 2.10 2009年9月29日 更新到v2.1.0,增加了一个showLink参数,修正了当niceTitle靠右超出屏幕显示范围时导致出现X轴滚动条的bug。感谢来自捷克的Macek的热心测试。

Version 2.20 2009年10月16日 更新到v2.1.0,增加了一个brFlag参数用于控制标题换行显示。感谢来自捷克的Macek。

History:

Version 1.00 (1-SEP-2009) The first release version

Version 1.10 (7-SEP-2009) Amendments in the IE browser to change the background color of the bug is invalid (add code: line: 68,69)

Version 1.20 (14-SEP-2009) Hide the “img” tag’s alt and title attributes if  ”a” tag includes an image.(code line: 21,46-53,84-87)

Version 2.00 (19-SEP-2009) Update to v2.0.0,Now niceTitle can works for all HTML tags. Thanks Macek for his advice.

Version 2.10 (29-SEP-2009) Add a parameter “showLink” to show or hide tag a’s href and tag img’s src. Fixed the bug, now niceTitle never marks scroll bar appears.Thanks Macek!

Version 2.20 (16-Oct-2009) Add a parameter “brFlag” to make title content multi-line display. Thanks Macek.

最近由于一个项目客户要求鼠标经过链接的时候显示一个美观一些的提示信息,因此就花了点时间写了这个小插件。效果如下:

niceTitle

虽然之前也写过几个插件,但都还没正式的去整理出来,这次是我第一次发布自己的插件,同时也将这个插件发布到jQuery官方网站上了,有兴趣的童鞋可以点击这里jQuery niceTitle plugin进行访问。

插件功能:

这个小插件只要是用来替换<a>标签title属性的默认显示效果,可以看这里的实际效果Demo

插件的使用也很简单:

<script type="text/javascript">
    $(document).ready(function(){
	    $("a, input, img, div, span").niceTitle();//要排除一些例外的元素,例如可以用a:not([class='nono'])来排除calss为"nono"的a元素
    });
</script>

该插件在IE6、IE7、Chrome、Firefox3下测试通过,如果各位童鞋发现什么bug,请给我留言以便使插件更完善,谢谢~~~

100%保证成功获取Akismet API KEY

2009年8月30日 IT北瓜 1 条评论

经过一番折腾(域名注册、空间购买、WP安装,这些就不在此唠叨啦),IT北瓜总算投入运作了。对于不懂PHP的来说,也只能磕磕撞撞、按部就班的来把这“瓜”给种起来,那么首先就从酋长老大的大作10件安装WordPress后需要做的事开始吧,好吧,唠叨了,进入主题。

很明显Akismet是本文的主角,也是10件事中的第一件。可是路途还真是坎坷啊+_+第一件事就碰钉子,Akismet是WordPress默认自带的反垃圾程序,启用该插件后提示需要一个Key来使其运作,

Akismet需要一个API KEY使其工作!

Akismet需要一个API KEY使其工作!

其实这倒也不是什么打不了的事,不就到WordPress官方网站注册一个帐号就可以轻而易举获得需要的Key吗?可是问题来了,但你满心欢喜的去点击那个“Sign up now”按钮的时候却发现给伟大的GFW了(+﹏+)~!当然认为知道“代理”为何物的你也跟一样不会就此放弃滴!!!

那么就该我们伟大的主角2号(这名份有点委屈仁兄您了,但主角1号给了Akismet,您就屈就一回吧,⊙﹏⊙,其伟大我想地球人都知道!)登场了,其尊姓大名这里就不明说了,GFW北瓜我还是很惧怕滴⊙﹏⊙,还等什么,赶紧下吧我就是主角2号

时光飞逝,岁月如梭…

下载完毕,OK,解压–>运行–>IE中打开WordPress官方网站–>Sign up now(一切风平浪静,畅通无阻)–>注册完毕收到激活邮件–>激活账号–>再次收到邮件(万事大吉,API Key已在邮件内容中)

接下来顺理成章、按部就班,本文到此结束,结果如下:

请输入一个API KEY!

请输入一个API KEY!

API KEY已经激活!

API KEY已经激活!