jCT 使用教程之[嵌入模板]

更多信息请看我博客里的jCT专题 或者jCT开源主页示例 里面有最简单的例子

 

此教程是适用于jCT3版

 

为了书写方便例子中引用了jQuery库,为了方便不对样式进行控制

 

嵌入模板: 模板代码直接在最终的html页,经过jCT实例化后,重新表现在原页面上,这是最简单的一种用法

 

例1: 字母菜单,有些应用中需要快速的用字母A-Z做快速搜索,我们用jCT实现  

<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jct.js"></script>
<script type="text/javascript">
$().ready(function(){
  var Instance = new jCT($('#abcnav').html());
  Instance.Build();
  $('#abcnav').html(Instance.GetView());
});
</script>
</head>
<body>
<ul id="abcnav">
	<!---for(var i=65;i<=90;i++){-->
	<li><span>+-String.fromCharCode(i)-+</span></li>
	<!---}-->
</ul>
</body>
</html>

从这个例子里,可以看出jCT的使用步骤

  1. 获取模板源代码:
    $('#abcnav').html();
    
  2. 得到jCT实例
    var Instance = new jCT($('#abcnav').html());
  3. 实例自构建
    Instance.Build();
  4. 由实例得到视图
    Instance.GetView()
  5. 把视图放置到具体的页面中
    $('#abcnav').html(Instance.GetView());
    

基本上就是这些步骤了,而事实上如果用jQuery的话一句就可以做好所有这些步骤

$('#abcnav').html(new jCT($('#abcnav').html()).Build().GetView());

 

你可能感兴趣的:(JavaScript,html,jquery,SVN,XHTML)