Submitted by gouki on 2010, December 29, 9:35 AM
eclientscript是hightman开发的一个yii插件,用来对于script和css文件进行合并、压缩
当然在自己的项目中,我也为它加了不少的功能和组件,只是因为这是并非公用的东西,拿出来分享意义也不大。
比如,我定义了一个变量path,定义了几个全局的assetUrl,assetPath,然后可以指定目录生成压缩文件,把项目中关于商城、资讯、用户中心等的JS就可以彻底分开了(JS是无所谓,关键是CSS,因为它是认相对目录的)
好了,开始说我遇到的问题吧,目前我有一个JS,二级联动的JS,它是这样写的。
JavaScript代码
- (function($){
- $.fn.xxx = function(){}
- })(jQuery);
是的,它没有什么问题,而且也挺不错,这样的写法可以防止项目中的$被污染,而使用$只在这一个包里被使用,单独引用的时候,一点问题没有。然而问题就发生在它被合并到一个文件后,上面的代码就无法执行了。。。后来直接改成
XML/HTML代码
- $.fn.xxx = function(){}
好吧,我偷懒了,但,将就点吧,没时间扑在上面。。。招人啊招人啊。。。
本文纯属工作记录,谢谢
Tags: yii, clientscript, jquery
PHP | 评论:0
| 阅读:16604
Submitted by gouki on 2010, December 7, 8:25 AM
这个玩意,纯收藏了,象QuickSand这个玩意已经被很多人转过了,每年都能在各个推荐中出现,真没劲。还有colortip,如今其实已经真不算稀奇了吧。不过还是转一下,因为对其中有两个插件非常感兴趣:Lettering.js和Masonry。
好吧,上原文【文字版】:
在前两周国外知名博客WDL先后分享了“2010最佳系列”中的“最佳免费WordPress主题”和“最佳免费字体”, 在这个星期又发布了2010年最佳jQuery插件。在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来。满目琳琅,难以 选择心头之好。WDL的作者从大量的优秀jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best。
2010年最佳jQuery插件(排名不分先后):
一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容。
通过一个非常不错的洗牌动画实现选项内容重新排序,只需要指定源容器和替换源的目标collection 。新元素将会以奇特缩放+阿尔法效果出现,消失的元素(non-existant in destination collection)平滑地消失或重新排位,移动到它们的目标位置。
Spritely 是一个由Artlogic开发的 jQuery插件,用于使用纯HTML和JavaScript创建动态物体和背景动画。
Lettering.js是一个轻量经的、易于使用的 jQuery插件,可创造出极具个性的网页排版。
Colortip可转换你的页面元素的标题属性为一系列色彩丰富的提示(当你的鼠标移动到不同的标题上会出现不同颜色的字体文本提示)。支持六种色彩主题,这样你可更加容易融合到你的个人网页中去。
Masonry是一个 jQuery布局插件. 你可以将它看作CSS floats的另一面。浮动元素的排列是先水平后垂直,Masonry排列内容是根据一个网格先垂直后水平的。
gvChart是一个使用Google Charts了的jQuery插件,可通过HTML table tag的数据实现交互可视化。它非常容易上手,此外它支持创建五种风格的图标。
这是一个用于创建表格的jQuery插件,所创建的表格可以根据不同的列项目进行A-Z,升序排列,切换效果非常不错。
网站图片保持完整的纵横比比什么都重要。这个jQuery插件可以完美地在slider展示你所有的图片,而不需担心产生变形。 jQuery Image Scale Carousel插件自动改变你所有图片到适合大小,一切都是那么的简单。
YoxView是一个免费的多媒体播放jQuery插件。它易于使用,功能丰富。你可以用它来展示各种媒体,如图像,视频,内嵌的内容,iframes,Flash等等。
MK编译 via WDL
原文地址:http://www.x-berry.com/best-jquery-plugins-of-2010
--EOF--
然后那个gvchart也可以,方便你调用了google chart的一些参数了
Tags: jquery, plugin
Javascript | 评论:0
| 阅读:16070
Submitted by gouki on 2010, September 9, 3:35 PM
在页面处理的时候,有时候我们会使用这样的小技巧,在没有点击XX按钮时,YY按钮是disabled的,当选中了XX时,YY也变成了enabled的状态。
在使用普通的JS的时候,我们很可能就直接document.getElementById('YY').disabled = false;就解决了。但是在jQuery里却不是每个浏览器都支持这样的作法,即:$('#yy').attr('disabled',false);也试了一下$('#yy').attr('disabled','');,不知道是我的人品问题还是确实 有问题,反正都没有成功,于是我又尝试$('#yy').attr('enabled','enabled'),也没有成功。 最后一发狠,来了一句:$('#yy').removeAttr('disabled'),得成了。
果然还是怕狠人的。在这里做个记录而已。虽然大多数情况下不一定用得到。
Tags: jquery, inpu, disabled, enabled
Javascript | 评论:0
| 阅读:18440
Submitted by gouki on 2010, August 30, 10:00 AM
习惯了用jQuery,因此在使用greasemonkey的时候,也总是想着用jQuery,找了下,确实有这样的例子。。
JavaScript代码
- var $;
-
-
- (function(){
- if (typeof unsafeWindow.jQuery == 'undefined') {
- var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
- GM_JQ = document.createElement('script');
-
- GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
- GM_JQ.type = 'text/javascript';
- GM_JQ.async = true;
-
- GM_Head.insertBefore(GM_JQ, GM_Head.firstChild);
- }
- GM_wait();
- })();
-
-
- function GM_wait() {
- if (typeof unsafeWindow.jQuery == 'undefined') {
- window.setTimeout(GM_wait, 100);
- } else {
- $ = unsafeWindow.jQuery.noConflict(true);
- letsJQuery();
- }
- }
-
-
- function letsJQuery() {
- alert($);
- alert($().jquery);
- }
然后代码就得全部扔在letsJQuery()方法里了。
由于是async,所以,尽量选择快一点地址,比如本地的localhost之类的,HOHO,不过,这就得本地WEB服务常开了。
原文来自:http://joanpiedra.com/jquery/greasemonkey/
Tags: greasemonkey, jquery
Javascript | 评论:0
| 阅读:17819
Submitted by gouki on 2010, August 22, 11:32 PM
用javascript做模版的话,说来也算是比较方便的,特别是对于PHP开发来说,只要扔一个json数组过来。然后剩下的就可以让javascript来完成了。
搜索一下jQuery的plugin,可以找到大约5~6个模版程序。好象用的比较多的还是jTemplate,上一次司徒正美用javascript写了一个简单的例子,这次又写了一个比较详细的,说是v2,有兴趣的朋友可以尝试一下。。
--start--司徒正美认为模版要处理复杂的玩意,所以写的功能就强大了。
本版本主要是对原模板系统进行提速,去掉消耗巨大的辅助函数。本来想用它与John Resig的 Micro-Templating比较一下速度,发现对方无法处理复杂的模板,残念。
JavaScript代码
-
- (function () {
- if(!String.prototype.trim){
- String.prototype.trim = function(str) {
- return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
- }
- }
- var dom = {
- quote: function (str) {
- str = str.replace(/[\x00-\x1f\\]/g, function (chr) {
- var special = metaObject[chr];
- return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)
- });
- return '"' + str.replace(/"/g, '\\"') + '"';
- }
- },
- metaObject = {
- '\b': '\\b',
- '\t': '\\t',
- '\n': '\\n',
- '\f': '\\f',
- '\r': '\\r',
- '\\': '\\\\'
- },
- parser = document.createElement("div"),
- startOfHTML = "\t__views.push(",
- endOfHTML = ");\n";
-
- //onsite,可选,Boolean,是否就地替换掉模板容器,默认true,如果为false,则返回一个文档碎片,交由用户自己插入到需要的地方
- dom.ejs = function (obj) {
- var onsite = obj.onsite === void 0 ,
- left = obj.left || "<%",
- right =obj.right || "%>",
- selector = obj.selector,
- isLeft = true,
- buff = ["var __views = [];\n"],
- fragment = document.createDocumentFragment(),
- el = document.getElementById(selector),
- ejs = dom.ejs;
- if (!el) throw "找不到目标元素";
- var str = el.text.trim();
- if(!ejs[selector]){
- while(str.length){
- var condition = isLeft ? left :right;
- var index = str.indexOf(condition);
- if(index !== -1){//取左边
- var text = str.slice(0,index);
- if(isLeft){
- buff.push(startOfHTML, dom.quote(text.trim()), endOfHTML);
- }else{
- switch (text.charAt(0)) {
- case "#"://处理注释
- break;
- case "="://处理后台返回的变量(输出到页面的);
- buff.push(startOfHTML, text.slice(1), endOfHTML)
- break;
- default:
- buff.push(text, "\n")
- };
- }
- }else{
- if(isLeft){
- buff.push(startOfHTML, dom.quote(str), endOfHTML);
- break;
- }else{
- throw "在字符串{{ "+dom.quote(str)+" }}中找不到右界定符"+right
- }
- }
- str = str.slice(index+2).trim();
- isLeft = !isLeft;
- }
- ejs[selector] = new Function("json", "with(json){"+buff.join("") + '};return __views.join("");')
- }
- parser.innerHTML = ejs[selector](obj.json || {});
- while (parser.firstChild) {
- fragment.appendChild(parser.firstChild)
- }
- return onsite ? el.parentNode.replaceChild(fragment, el) : fragment;
- };
- window.dom = dom;
-
- })();
这种使用原生代码写的例子,可以被任何代码所使用,如果你有兴趣也可以看看司徒正美的例子的。原文网址在javascript 模板系统 ejs v2,可以移步一观。
Tags: jquery, template, 模版, 模板
Javascript | 评论:0
| 阅读:17825