AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就是由CSS渲染和JS来控制行为的组件。
比较不好理解就是Web组件,好像跟JS插件意思差不多,都是CSS和JS组成的。它们到底区别在哪?我们重点来讲这个。
我们通过学习如何调用Web组件(其中的手风琴组件)来一步一步了解其与JS插件的区别。
1 <section data-am-widget="accordion" class="am-accordion am-accordion-default"> 2 <!-- 这里面还有代码,本例的大概意思就是不写JS代码,直接调用Web组件。 --> 3 </section>
示例02.Web组件-通过模板来调用-示例1 (请下载附件查看示例)
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>
示例中关键代码2(定义一个模板)(话说这个模板也没啥实际意义,但官方的demo就是这么写的,我只是移植了一下):
1 <script type="text/x-handlebars-template" id="my-tpl"> 2 {{>accordion accordionData}} 3 </script>
示例中关键代码3(调用JS代码使其工作):
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>
示例中关键代码3(调用JS使其工作):
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}}\');
示例中关键代码2(引用相关js文件):
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>
示例中关键代码3(调用JS使其工作):
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); //显示结果