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

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 | 阅读:20037

常用函数：copyToClipboard

Submitted by gouki on 2010, August 18, 11:56 PM

COPY文字到剪贴板很方便，我是指在IE下面，而其他的就有点复杂了。firefox下面有安全选项的。所以很多人都采用了flash来实现。如果不计flash，那么下面这个函数就十分有用了，可能是转的过多了，也不记得来源是哪里了。如果是原作者看到，请提示一下，一定加上您的链接。

JavaScript代码
  1. function copyToClipboard(txt) {     
  2.     if(window.clipboardData) {     
  3.             window.clipboardData.clearData();     
  4.             window.clipboardData.setData("Text", txt);     
  5.     } else if(navigator.userAgent.indexOf("Opera") != -1) {     
  6.          window.location = txt;     
  7.     } else if (window.netscape) {     
  8.          try {     
  9.               netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");     
  10.          } catch (e) {     
  11.               alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");     
  12.          }     
  13.          var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);     
  14.          if (!clip)     
  15.               return;     
  16.          var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);     
  17.          if (!trans)     
  18.               return;     
  19.          trans.addDataFlavor('text/unicode');     
  20.          var str = new Object();     
  21.          var len = new Object();     
  22.          var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);     
  23.          var copytext = txt;     
  24.          str.data = copytext;     
  25.          trans.setTransferData("text/unicode",str,copytext.length*2);     
  26.          var clipid = Components.interfaces.nsIClipboard;     
  27.          if (!clip)     
  28.               return false;     
  29.          clip.setData(trans,null,clipid.kGlobalClipboard);     
  30.          alert("复制成功！")     
  31.     }     
  32.     

Tags: clipboard, flash, firefox

Javascript | 评论:0 | 阅读:20088

CSS中media标签的作用

Submitted by gouki on 2010, August 16, 11:16 AM

在网页中，看到使用CSS的地方，大多数都会有这么一句：

XML/HTML代码
  1. <link rel="stylesheet" type="text/css" href="global.css" media="screen">    

那么，究竟这个media有什么作用呢？通过查下资料了解到：

XML/HTML代码
  1. all-- 用于所有设备类型  
  2. aural-- 用于语音和音乐合成器  
  3. braille-- 用于触觉反馈设备  
  4. embossed-- 用于凸点字符（盲文）印刷设备  
  5. handheld-- 用于小型或手提设备  
  6. print-- 用于打印机  
  7. projection-- 用于投影图像，如幻灯片  
  8. screen-- 用于计算机显示器  
  9. tty-- 用于使用固定间距字符格的设备。如电传打字机和终端  
  10. tv-- 用于电视类设备   

虽然media有10个值，但我们经常看到的也就print,和screen两种。当然也会有没有media标签的情况，这个时候其实就是默认media="all"。
既然如此，那我们也就相当于了解了，如果你需要打印，那么你在按下打印的时候，系统就会默认调用media="print"所对应的CSS文件了。也因此这样可以让你更好的整理你的打印页面，比如把一些不需要打印的内容屏蔽掉、优化打印页面（让内容更利于被打印）等等

虽然我不是前端，但。。了解一下这些内容还是有点用处的。

Tags: css, media, screen, print

Javascript | 评论:0 | 阅读:25293

关注：jQuery Mobile来了！

Submitted by gouki on 2010, August 15, 2:26 PM

　　为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project（http://jquerymobile.com）。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。

　　对于大名鼎鼎的jQuery开发团队来说，当然要让jQuery Mobile支持全球主流的移动平台，而不仅仅是北美流行的移动平台。想要知道jQuery Mobile项目将要做些什么吗？请看jQuery移动平台策略；想要知道jQuery Mobile项目将会支持哪些浏览器吗？请看Mobile Graded Browser Support。

大小: 58.04 K 尺寸: 480 x 376 浏览: 2134 次 点击打开新窗口浏览全图

　　jQuery Mobile开发团队正在紧张工作，准备那些要支持的移动设备并针对这些设备进行测试。他们争取在今年晚些时候发布jQuery Mobile。如果你想为jQuery Mobile提供帮助，请加入jQuery Mobile社区的讨论组。

　　jQuery Mobile项目已经得到了Palm, Mozilla等移动浏览器厂商的赞助。

　　jQuery Mobile开发团队说：“能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。”

　　编者：移动互联网，挡不住的趋势...

　　英文原文：Announcing the jQuery Mobile Project

　　博客园编译

Tags: jquery, jquery mobile

Javascript | 评论:0 | 阅读:24400

jQuery 绑定自定义事件

Submitted by gouki on 2010, August 11, 10:40 PM

一般情况下，我们对于jQuery的事件绑定都是采用bind，从1.3开始。可以同时绑定多个事件了。这是非常方便的情况，但是对于checkbox和radio来说会有几种情况，比如checkbox选中时，本身就触发了click事件，这时候怎么办？如果为checkbox添加label那么lable在点击时，能不能触发checkbox的click事件？这都需要研究一下。比如，我们在checkbox上绑定了click事件，平时我们在选中的时候都有触发。但是在label上点击的时候，就要再额外加一下了。

$("input[type=checkbox]").bind('click',function(){
  //...
})
$('label').click(function(){
   $(this).children('input[type=checkbox]').click();
})

基本上也可以触发这种事件。
一般元素在绑定的时候，都是绑定click,change,等

//但如果想触发系统事件，就必须是evtClick了。【这里其实是自定义事件。在绑定后还是需要单独触发一下。原来我写错了。】

可以参考http://www.cnblogs.com/mamboer/archive/2010/08/11/1797532.html

Tags: jquery, bind

Javascript | 评论:0 | 阅读:20888

Records:306«‹22232425262728293031›»