方式一:js动态渲染,模板代码取自js文件
//动态渲染无需传入tpl参数,因为组件内部js中已定义
var tab = new Tabs({
container:'#dynamicTab',
items: [{
label: 'Tab1',
content: '<p> Tab1 content</p> '
}, {
label: 'Tab2',
content: '<p> Tab2 content</p> '
}, {
label: 'Tab3',
content: '<p> Tab3 content</p> '
}]
});
方式二:js动态渲染,模板代码取自页面上script标签中的内容
//动态渲染 tpl 来自页面的script标签中的内容,将覆盖js中定义的模板变量
var tab2 = new Tabs({
container:'#dynamicTab2',
tpl:'#tpl_from_script',
items: [{
label: 'Tab1',
content: '<p> Tab1 content</p> '
}, {
label: 'Tab2',
content: '<p> Tab2 content</p> '
}, {
label: 'Tab3',
content: '<p> Tab3 content</p> '
}]
});
方式三:静态渲染,直接使用页面上的Dom节点树渲染。
//静态渲染 tpl 来自页面上已有的Dom节点
var tab3 = new Tabs({
tpl:'#staticTab'
});
方式四:标签渲染,div上有特殊的fui属性,页面会自动渲染
//标签渲染,会自动把body内带data-fui-widget属性的节点以指定组件的方式动态渲染
AutoRender.render();