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

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

Submitted by gouki on 2010, December 29, 9:35 AM

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

PHP | 评论:0 | 阅读:16604

cnbeta:2010年最佳jQuery插件

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插件（排名不分先后）：

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

Javascript | 评论:0 | 阅读:16070

jquery笔记：让input从disabled变成enabled

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

GreaseMonkey with jQuery

Submitted by gouki on 2010, August 30, 10:00 AM

习惯了用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 | 评论:0 | 阅读:17819

javascript模版系统

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代码
  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, 模版, 模板

Javascript | 评论:0 | 阅读:17825

Records:70‹12345678910›»