EonerCMS——做一个仿桌面系统的CMS（五）

　　这次主要讲一下js模板和鼠标右键功能，东西比较简单，我就没有做demo，简单说下原理吧。

js模板

　　为什么要使用js模板？因为在这个系统里，我经常要打开一个或多个窗口，但实际上这些窗口的HTML代码都是一样的，只是其中的参数稍微有点变化。既然如此，何不写成模板，把参数定义成指定格式的标签，然后用正则批量替换，生成真正的HTML代码，再插入页面中。这样不仅阅读方便，而且修改也方面。

　　说改就改，改之前我考虑了另一个问题，就是要不要使用网上现有的js模板引擎，这方面因为之前完全没了解过，所以搜了几个，有的似乎很有名，比如JST，但也非常大，所以我没有考虑；有的很小，也就是一些JSer自己写的插件，我担心会有BUG，所以也没考虑。最终我打算自己写，因为我不需要ajax--json--dom这么一个流程，所以，我就找了一个替换模板参数的方法，虽然不是我写的，但是很好用，来看一下吧：

var FormatModel = function(str,model){
	for(var k in model){
		var re = new RegExp("{"+k+"}","g");
		str = str.replace(re,model[k]);
	}
	return str;
}

　　要怎么用呢，其实很简单，看下for循环里面的操作就清楚了，str是传入的模板，model是个key--value数组，看下具体用法吧：

//图标模板
var shortcutTemp = '<li style="left:{left}px;top:{top}px" title="{title}" shortcut="{shortcut}"><img src="{imgsrc}"><span>{title}</span><em></em></li>';
_cache.shortcutTemp = {"top":_top,"left":_left,"title":shortcut[sc][1],"shortcut":shortcut[sc][0],"imgsrc":shortcut[sc][2]};
$(ul).append(FormatModel(shortcutTemp,_cache.shortcutTemp));

　　shortcutTemp是图标模板，其中需要替换参数的书写格式是{...}，_cache.shortcutTem就是那个参数数组了，这个方法我建议大家可以收藏一下，挺好用的。最终替换后输出就是这个样子了：

<li shortcut="0" title="小睿的博客" style="left:20px;top:20px;">
	<img src="img/shortcut/news.png">
	<span>小睿的博客</span>
	<em></em>
</li>

　　下面说下鼠标右键，这个功能其实是必不可少的。可能大部分人知道网页上点击鼠标右键都是弹出浏览器设定的工具条，所以一般没人会点。但是我记得之前看到过一句话，就是“一个好的产品，就是能让用户在使用的过程中，突然说出：‘我靠，居然还有这功能’。那么，这个产品就成功了”，所以，关于右键，这个功能必不可少，哪怕就一两个地方能用上。

鼠标右键

　　这快没有太大难点，简单给段代码自己去尝试下吧：

//绑定任务栏点击事件
$('.task-window li').live('contextmenu',function(e){
	//展示自定义右键菜单
	Core.taskwindowrightmenu($(this));
	//屏蔽浏览器自带右键菜单
	return false;
});

　　右键点击我

　　下面我补充一张图，就是前几天发的一篇文章《一款腾讯UED设计的提示插件（使用教程）》，感觉调用方便，效果也不错，就直接拿来用了，直接看图吧

　　因为是在iframe里调用，所以要在调用方法前加上“window.parent”，也就是这样：

window.parent.ZENG.msgbox.show("设置成功！", 4, 2000);

　　OK，内容说完了，今天是国庆，所以祝大家国庆快乐，玩的开心。像我这种没什么活动，工作能力又不是很强的，只能趁大家都休息的时候偷偷学学，努力赶超，想必应该也有一群和我一样处境的人吧，相信总有一天我们的能力会得到大部分人认可的。

　　不说了，忙了一晚上，也该休息下了，打dota去了<(￣︶￣)>