手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:jquery

Yii使用EClientScript遇到的一点小问题

eclientscript是hightman开发的一个yii插件,用来对于script和css文件进行合并、压缩
当然在自己的项目中,我也为它加了不少的功能和组件,只是因为这是并非公用的东西,拿出来分享意义也不大。
比如,我定义了一个变量path,定义了几个全局的assetUrl,assetPath,然后可以指定目录生成压缩文件,把项目中关于商城、资讯、用户中心等的JS就可以彻底分开了(JS是无所谓,关键是CSS,因为它是认相对目录的)

好了,开始说我遇到的问题吧,目前我有一个JS,二级联动的JS,它是这样写的。

JavaScript代码
  1. (function($){  
  2.    $.fn.xxx = function(){}  
  3. })(jQuery);  

是的,它没有什么问题,而且也挺不错,这样的写法可以防止项目中的$被污染,而使用$只在这一个包里被使用,单独引用的时候,一点问题没有。然而问题就发生在它被合并到一个文件后,上面的代码就无法执行了。。。后来直接改成

XML/HTML代码
  1. $.fn.xxx = function(){}    

好吧,我偷懒了,但,将就点吧,没时间扑在上面。。。招人啊招人啊。。。
本文纯属工作记录,谢谢

Tags: yii, clientscript, jquery

cnbeta:2010年最佳jQuery插件

这个玩意,纯收藏了,象QuickSand这个玩意已经被很多人转过了,每年都能在各个推荐中出现,真没劲。还有colortip,如今其实已经真不算稀奇了吧。不过还是转一下,因为对其中有两个插件非常感兴趣:Lettering.jsMasonry

好吧,上原文【文字版】:

在前两周国外知名博客WDL先后分享了“2010最佳系列”中的“最佳免费WordPress主题”和“最佳免费字体”, 在这个星期又发布了2010年最佳jQuery插件。在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来。满目琳琅,难以 选择心头之好。WDL的作者从大量的优秀jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best。

2010年最佳jQuery插件(排名不分先后):

Nivo Slider

一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容。

Quicksand

通过一个非常不错的洗牌动画实现选项内容重新排序,只需要指定源容器和替换源的目标collection 。新元素将会以奇特缩放+阿尔法效果出现,消失的元素(non-existant in destination collection)平滑地消失或重新排位,移动到它们的目标位置。

Spritely

Spritely 是一个由Artlogic开发的 jQuery插件,用于使用纯HTML和JavaScript创建动态物体和背景动画。

Lettering.js

Lettering.js是一个轻量经的、易于使用的 jQuery插件,可创造出极具个性的网页排版。

Colortip

Colortip可转换你的页面元素的标题属性为一系列色彩丰富的提示(当你的鼠标移动到不同的标题上会出现不同颜色的字体文本提示)。支持六种色彩主题,这样你可更加容易融合到你的个人网页中去。

Masonry

Masonry是一个 jQuery布局插件. 你可以将它看作CSS floats的另一面。浮动元素的排列是先水平后垂直,Masonry排列内容是根据一个网格先垂直后水平的。

gvChart

gvChart是一个使用Google Charts了的jQuery插件,可通过HTML table tag的数据实现交互可视化。它非常容易上手,此外它支持创建五种风格的图标。

Animated table sort

这是一个用于创建表格的jQuery插件,所创建的表格可以根据不同的列项目进行A-Z,升序排列,切换效果非常不错。

jQuery Image Scale Carousel

网站图片保持完整的纵横比比什么都重要。这个jQuery插件可以完美地在slider展示你所有的图片,而不需担心产生变形。 jQuery Image Scale Carousel插件自动改变你所有图片到适合大小,一切都是那么的简单。

YoxView

YoxView是一个免费的多媒体播放jQuery插件。它易于使用,功能丰富。你可以用它来展示各种媒体,如图像,视频,内嵌的内容,iframes,Flash等等。

MK编译  via  WDL

原文地址:http://www.x-berry.com/best-jquery-plugins-of-2010

--EOF--

然后那个gvchart也可以,方便你调用了google chart的一些参数了

Tags: jquery, plugin

jquery笔记:让input从disabled变成enabled

在页面处理的时候,有时候我们会使用这样的小技巧,在没有点击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

GreaseMonkey with jQuery

习惯了用jQuery,因此在使用greasemonkey的时候,也总是想着用jQuery,找了下,确实有这样的例子。。

JavaScript代码
  1. var $;  
  2.   
  3. // Add jQuery  
  4.     (function(){  
  5.         if (typeof unsafeWindow.jQuery == 'undefined') {  
  6.             var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,  
  7.                 GM_JQ = document.createElement('script');  
  8.       
  9.             GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';  
  10.             GM_JQ.type = 'text/javascript';  
  11.             GM_JQ.async = true;  
  12.       
  13.             GM_Head.insertBefore(GM_JQ, GM_Head.firstChild);  
  14.         }  
  15.         GM_wait();  
  16.     })();  
  17.   
  18. // Check if jQuery's loaded  
  19.     function GM_wait() {  
  20.         if (typeof unsafeWindow.jQuery == 'undefined') {  
  21.             window.setTimeout(GM_wait, 100);  
  22.         } else {  
  23.             $ = unsafeWindow.jQuery.noConflict(true);  
  24.             letsJQuery();  
  25.         }  
  26.     }  
  27.   
  28. // All your GM code must be inside this function  
  29.     function letsJQuery() {  
  30.         alert($); // check if the dollar (jquery) function works  
  31.         alert($().jquery); // check jQuery version  
  32.     }  

然后代码就得全部扔在letsJQuery()方法里了。
由于是async,所以,尽量选择快一点地址,比如本地的localhost之类的,HOHO,不过,这就得本地WEB服务常开了。

原文来自:http://joanpiedra.com/jquery/greasemonkey/

Tags: greasemonkey, jquery

javascript模版系统

用javascript做模版的话,说来也算是比较方便的,特别是对于PHP开发来说,只要扔一个json数组过来。然后剩下的就可以让javascript来完成了。
搜索一下jQuery的plugin,可以找到大约5~6个模版程序。好象用的比较多的还是jTemplate,上一次司徒正美用javascript写了一个简单的例子,这次又写了一个比较详细的,说是v2,有兴趣的朋友可以尝试一下。。
--start--司徒正美认为模版要处理复杂的玩意,所以写的功能就强大了。
本版本主要是对原模板系统进行提速,去掉消耗巨大的辅助函数。本来想用它与John Resig的 Micro-Templating比较一下速度,发现对方无法处理复杂的模板,残念。

JavaScript代码
  1. //司徒正美 javascript template - http://www.cnblogs.com/rubylouvre/ - MIT Licensed  
  2.      (function () {  
  3.                if(!String.prototype.trim){  
  4.                    String.prototype.trim = function(str) {  
  5.                        return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');  
  6.                    }  
  7.                }  
  8.                var dom = {  
  9.                    quote: function (str) {  
  10.                        str = str.replace(/[\x00-\x1f\\]/g, function (chr) {  
  11.                            var special = metaObject[chr];  
  12.                            return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)  
  13.                        });  
  14.                        return '"' + str.replace(/"/g, '\\"') + '"';  
  15.                    }  
  16.                },  
  17.                metaObject = {  
  18.                    '\b''\\b',  
  19.                    '\t''\\t',  
  20.                    '\n''\\n',  
  21.                    '\f''\\f',  
  22.                    '\r''\\r',  
  23.                    '\\': '\\\\' 
  24.                }, 
  25.                parser = document.createElement("div"), 
  26.                startOfHTML = "\t__views.push(", 
  27.                endOfHTML = ");\n"; 
  28.            
  29.                //onsite,可选,Boolean,是否就地替换掉模板容器,默认true,如果为false,则返回一个文档碎片,交由用户自己插入到需要的地方 
  30.                dom.ejs = function (obj) { 
  31.                    var onsite = obj.onsite === void 0 , 
  32.                    left = obj.left || "<%", 
  33.                    right =obj.right || "%>", 
  34.                    selector = obj.selector, 
  35.                    isLeft = true, 
  36.                    buff = ["var __views = [];\n"], 
  37.                    fragment = document.createDocumentFragment(), 
  38.                    el = document.getElementById(selector), 
  39.                    ejs = dom.ejs; 
  40.                    if (!el) throw "找不到目标元素"; 
  41.                    var str = el.text.trim(); 
  42.                    if(!ejs[selector]){ 
  43.                        while(str.length){ 
  44.                            var condition = isLeft ? left :right; 
  45.                            var index = str.indexOf(condition); 
  46.                            if(index !== -1){//取左边 
  47.                                var text = str.slice(0,index); 
  48.                                if(isLeft){ 
  49.                                    buff.push(startOfHTML, dom.quote(text.trim()), endOfHTML); 
  50.                                }else{ 
  51.                                    switch (text.charAt(0)) { 
  52.                                        case "#"://处理注释 
  53.                                            break; 
  54.                                        case "="://处理后台返回的变量(输出到页面的); 
  55.                                            buff.push(startOfHTML, text.slice(1), endOfHTML) 
  56.                                            break; 
  57.                                        default: 
  58.                                            buff.push(text, "\n") 
  59.                                    }; 
  60.                                } 
  61.                            }else{ 
  62.                                if(isLeft){ 
  63.                                    buff.push(startOfHTML, dom.quote(str), endOfHTML); 
  64.                                    break; 
  65.                                }else{ 
  66.                                    throw "在字符串{{ "+dom.quote(str)+" }}中找不到右界定符"+right 
  67.                                } 
  68.                            } 
  69.                            str = str.slice(index+2).trim(); 
  70.                            isLeft = !isLeft; 
  71.                        } 
  72.                        ejs[selector] = new Function("json", "with(json){"+buff.join("") + '};return __views.join("");')  
  73.                    }  
  74.                    parser.innerHTML = ejs[selector](obj.json || {});  
  75.                    while (parser.firstChild) {  
  76.                        fragment.appendChild(parser.firstChild)  
  77.                    }  
  78.                    return onsite ? el.parentNode.replaceChild(fragment, el) : fragment;  
  79.                };  
  80.                window.dom = dom;  
  81.   
  82.            })();  

这种使用原生代码写的例子,可以被任何代码所使用,如果你有兴趣也可以看看司徒正美的例子的。原文网址在javascript 模板系统 ejs v2,可以移步一观。

Tags: jquery, template, 模版, 模板