方式一: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节点树渲染。
tab1
tab2
tab3

  //静态渲染 tpl 来自页面上已有的Dom节点
   var tab3 = new Tabs({
		tpl:'#staticTab'
   });
  
方式四:标签渲染,div上有特殊的fui属性,页面会自动渲染

  //标签渲染,会自动把body内带data-fui-widget属性的节点以指定组件的方式动态渲染
  AutoRender.render();