lettuce
Version:
Lettuce JS, Mini Mobile Framework for Romantic with DSL.
114 lines (111 loc) • 2.7 kB
HTML
<html>
<head>
<meta charset="utf8" />
<meta content="width=device-width,user-scalable=no,initial-scale=1.0" name="viewport" />
<meta name="-webkit-tap-highlight" content="no" />
<title>测试sun模块开发</title>
<script type="text/javascript" src="../../../test/unit/qunit.js"></script>
<script type="text/javascript" src="../../../builds/qmik.1.3.61.js"></script>
<style type="text/css">
div{
min-height: 60px;
}
#result{
right:0;
top:0;
background: #cfcfcf;
padding:3px;
overflow-y:scroll;
}
#append{
background: #00cffc;
}
</style>
</head>
<body>
<div>
<pre>
</pre>
<h3>执行结果</h3>
<div id="append"></div>
<div id="result" >
</div>
</div>
<script type="text/javascript">
(function($){
$.define("demo/Style",function(require, exports, module){
module.exports = {
render: function(data, target){
var thread;
$({
tag:'div[class="block" desc="使用方法render"]',
child:[{
tag:'h2',
text:'${title} 使用方法render' //1.6.1版本开始,支持 {{title}}
}],
exec: function(){
var me = this;
$.each(data.list, function(i, item){
me.add({//往子节点:child 里添加
tag:'div',
text:'{{desc}}'
}, item);
});
}
}).appendTo(target).on({
click: function(e){
$("#result").html("you click me");
var i=0;
thread && thread.stop();
thread = $.cycle(function(){
if(i++%2==0){
$(target).css({
backgroundColor:"red"
});
}else{
$(target).css({
backgroundColor:"green"
});
}
}, 1000, 5000);
}
});
},
renderHtml: function(data){
return $.render({
tag:'div[class="block"]',
child:[{
tag:'h2',
text:'${title}' //1.6.1版本开始,支持 {{title}}
}],
exec: function(){
var me = this;
$.each(data.list, function(i, item){
me.add({//往子节点:child 里添加
tag:'div',
text:'<p>{{desc}}</p>'
}, item);
});
}
})
}
};
});
$.use("demo/Style", function(Style){
var data={
title:'test render',
list:[{
desc:'haha'
},{
desc:'leo chen'
},{
desc:'we are fly'
}]
};
Style.render(data, "#append");
$("#result").text("使用方法:renderHtml: "+Style.renderHtml(data));
});
})(Qmik);
</script>
</body>
</html>