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

最新推荐文章于 2016-09-28 16:07:29 发布

iteye_20231

最新推荐文章于 2016-09-28 16:07:29 发布

阅读量226

点赞数

分类专栏： jCT 文章标签： jQuery JavaScript HTML SVN XHTML ViewUI

jCT 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

更多信息请看我博客里的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的使用步骤

获取模板源代码:
```
$('#abcnav').html();
```

得到jCT实例

var Instance = new jCT($('#abcnav').html());

实例自构建
```
Instance.Build();
```
由实例得到视图
```
Instance.GetView()
```
把视图放置到具体的页面中
```
$('#abcnav').html(Instance.GetView());
```

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

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

iteye_20231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jCT 使用教程之[嵌入模板]

更多信息请看我博客里的jCT专题，或者jCT开源主页示例里面有最简单的例子此教程是适用于jCT3版为了书写方便例子中引用了jQuery库,为了方便不对样式进行控制嵌入模板:模板代码直接在最终的html页,经过jCT实例化后,重新表现在原页面上,这是最简单的一种用法例1:字母菜单,有些应用中需要快速的用字母A-Z做快速搜索,我们用jCT实现 &lt...
复制链接

扫一扫