注意:以下文档只适用于TOP接口,请谨慎使用!

文档中心 > 装修市场

JS模块开发

更新时间:2015/09/18 访问次数:91915

1. 开启TAE_SDK,创建新模板,其中模板类型选择“JS模板”,例如我们创建的模板名称为“MyTest”。

T1r37jXe4bXXb1JgzX-1024-656.jpg

2. 开发模块。添加新模块,其中文件创建选中“创建JS文件”,例如我们新建的模块名称是“tshop-um-myJs”。创建成功后在本地的TAE_SDK\htdocs\Mytest\modules\tshop-um-myJs\assets\目录下会出现一个javascripts文件夹,我们可以在其中的module.js文件中编辑需要的JS代码。

T1Rg.iXeVfXXb9A_.Q-969-619.jpg

3. JS代码的编写。举一个简单的例子,我们想实现鼠标点击按钮动态生成文本的功能。想了解系统支持的JS API,请移步JS API。请严格遵守JS API,否则您所编写的JS文件将不生效。

php:

	<div class="tb-module tshop-um tshop-um-myJs">
    <div class="content">
        <div class="hd">
            <h4>JS模板测试模块</h4>
        </div>
        <div class="bd">
            <button class="btn">点我吧</button>
            <p></p>
        </div>
    </div>
</div>

CSS:

	.tshop-um-myJs{
    width:948px;
    border:1px solid #ccc;
    margin-bottom:20px;
}
.tshop-um-myJs .hd{
    border-bottom:1px solid #ccc;
    height:30px;
    text-align:center;
    margin-bottom:20px;
    line-height:30px;
    background:#f5f8fc;
    font-size:14px;
}
.tshop-um-myJs .bd button{
    margin:10px 45%;
    width:60px;
}
.tshop-um-myJs .bd p{
    color:red;
    heigth:20px;
    line-height:20px;
    width:120px;
    margin:20px auto;
}

JS:

	console.log('开始喽...');
var DOM = KISSY.DOM,
    Event = KISSY.Event,
    btn = DOM.query('.btn');   
console.log(btn);
Event.on(btn[0],'click',function(){
    DOM.text('p','哈哈,你得到了它!')
});

4. 回到首页预览,看一下模块的效果。

T1SUz_XixjXXXFBxTg-1027-375.jpg

4.1 firebug控制台信息

T1wzUiXodcXXcLcekD-752-151.jpg

4.2 点击按钮效果

T1b9UhXXFgXXaWSD_A-998-413.jpg

FAQ

关于此文档暂时还没有FAQ
返回
顶部