通过css类便利前端应用开发

作者:  最后修改:2015年08月11日  浏览数:196

我们知道,使用css类作为标识符为HTML元素赋予功能和特性在某些时候会非常便利,现在举一个实际的例子。

我们在ZCMS的前端功能开发时经常会为链接加${FrontAppContext}前缀和SiteID=${Site.ID}后缀,类似于

       <a class="member_photo" href="${FrontAppContext}member/info?SiteID=${Site.ID}">

这种写法大量存在于前端动态功能模板中,写起来既不便利也不美观。很显然这种小问题不太可能去封装一个标签,如果封装成模板函数(类似于${frontlink('member/info')})也差不太多,那么使用css类怎么做呢?

可以这样:

首先,写一个空的ccs类到公共css文件中,类似于:

.front-link{}

然后,加一段js到公共js文件中,类似于:

	// 所有前端链接统一前缀和后缀
	$("a.front-link").each(function() {
		var href = $(this).attr("href");
		if (href.indexOf("?") > 0) {
			href += "&";
		} else {
			href += "?";
		}
		href += "SiteID=" + siteID;
		href = frontAppContext + href;
		$(this).attr("href", href);
	});

最后,在前端模板中使用此样式:

       <a class="member_photo front-link" href="member/info">


很明显,用起来酸爽多了。