AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

1 <section data-am-widget="accordion" class="am-accordion am-accordion-default">
2     <!-- 这里面还有代码，本例的大概意思就是不写JS代码，直接调用Web组件。 -->
3 </section>

1 <!-- handlebars.js 是一个开源的js库，用于在网页上实现语义模板。 -->
2 <script src="assets/js/handlebars.min.js"></script>
3 <!-- 妹子UI调用 handlebars 的辅助类 -->
4 <script src="assets/js/amazeui.widgets.helper.js"></script>

1 <script type="text/x-handlebars-template" id="my-tpl">
2     {{>accordion accordionData}}
3 </script>

1 var $tpl = $(‘#my-tpl‘); //得到原始模板
2 var template = Handlebars.compile($tpl.text()),  //得到编译后的模板
3 //...这里定义了数据...代码较多...略...
4 var html = template(data); //传入数据，运行模板，得到结果
5 var $tpl.before(html); //显示结果

1 var template = Handlebars.compile(‘{{>accordion}}‘), //得到编译后的模板 (字符串就算是原始模板了)
2 var html = template(data.accordionData); //传入数据，运行模板，得到结果
3 $("#div1").before(html); //显示结果

1 <!-- 自定义原始模板 -->
2 <script type="text/x-handlebars-template" id="demo-template">
3 //这里还有很多代码，因为不关键就省略了...
4 <!-- 关键代码：添加图标 icon 属性 -->
5 {{#if icon}}<img src="{{icon}}" style="width:20px;" />{{/if}} 
6 //这里还有很多代码，因为不关键就省略了...
7 </script>

 1 var demoData = { //定义数据
 2     "content": [..省略.., {
 3         "title": "标题二",
 4         "content": "内容二",
 5         "icon": "assets/i/favicon.png" //关键：多出一个icon属性
 6     }, ..省略..]
 7 };
 8 var demoTemplate = Handlebars.compile($("#demo-template").html()); //得到编译后的模板
 9 var demoHtml = demoTemplate(demoData); //传入数据，运行模板，得到结果
10 $("#div1").html(demoHtml); //显示结果

 1 //注册一个新组件，名叫：hr-accordion
 2 hbs.registerPartial(‘hr-accordion‘, ‘ 3 {{#this}} 4 <section data-am-widget="accordion" class="am-accordion {{#if theme}}am-accordion-{{theme}}{{else}}am-accordion-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}" {{#if id}} id="{{id}}" {{/if}} data-am-accordion=\‘{ {{#if options.multiple}}"multiple": true{{/if}} }\‘> 5     {{#each content}} 6     <dl class="am-accordion-item{{#if active}} am-active{{/if}}{{#if disabled}} am-disabled{{/if}}"> 7         <dt class="am-accordion-title" style="color:#0094ff;"> 8             <!-- 添加图标的关键代码 --> 9             {{#if icon}}<img src="{{icon}}" style="width:20px;" />{{/if}}10             {{{title}}}11                 </dt>12                 <dd class="am-accordion-bd am-collapse {{#if active}}am-in{{/if}}">13                     <div class="am-accordion-content">14                         {{{content}}}15                     </div>16                 </dd>17             </dl>18     {{/each}}19 </section>20 {{/this}}‘);

1 <!-- handlebars.js 是一个开源的js库，用于在网页上实现语义模板。 -->
2 <script src="assets/js/handlebars.min.js"></script>
3 <!-- 华瑞手风琴组件，调用 handlebars.js 的辅助类 -->
4 <script src="assets/js/huarui.accordion.helper.js"></script>

 1 var demoData = {  //定义数据
 2     "content": [..略.., {
 3         "title": "标题二",
 4         "content": "内容二",
 5         "icon": "assets/i/favicon.png" //关键：多出一个icon属性
 6     }, ..略..]
 7 };
 8 //得到编译后的模板，传入数据，运行模板，得到结果
 9 var demoHtml = Handlebars.compile(‘{{>hr-accordion}}‘)(demoData); 
10 $("#div1").html(demoHtml); //显示结果