【HTML5&CSS3进阶03】Jser与Csser如何一起愉快的翻新老组件

1 <header class="cm-header" style="top: 50px;">
2   <span class="fl cm-header-icon icon-back ">span>
3   <span class="fr cm-header-btn">确认span>
4   <span class="fr cm-header-icon"><i class="icon-home">i>span>
5   <span class="fr cm-header-icon"><i class="icond-list">i>span>
6   <h1 class="cm-page-title">
7     页面标题h1>
8 header>

1 <header class="cm-header" style="top: 50px;">
2   <span class="fl cm-header-icon"><i class="icon-back">i>span>
3   <span class="fr cm-header-btn">确认span>
4   <span class="fr cm-header-icon"><i class="icon-home">i>span>
5   <span class="fr cm-header-icon"><i class="icond-list">i>span>
6   <h1 class="cm-page-title">
7     页面标题h1>
8 header>

 1 {
 2 left: [],
 3 center: [],
 4 right: [
 5   {
 6     'tagname': 'home', callback: function () {
 7       console.log('返回');
 8     }
 9   },
10   { 'tagname': 'search' },
11   {
12     'tagname': 'list', callback: function (e) {
13        //......
14     }
15   },
16   { 'tagname': 'tel', 'number': '56973144' },
17   {
18     'tagname': 'commit', 'value': '登录', callback: function () {
19       console.log('登录');
20     }
21   },
22   {
23     'tagname': 'custom', 'value': '定制化',
24     itemFn: function () {
25       return '定制化';
26     },
27     callback: function () {
28       console.log('定制化');
29     }
30   }
31 ]

1 var map = {
2   'home': 'icon',
3   'list': 'icond'
4 }

1 <span class="cm-header-icon <%=dir %>  js_<%=item.tagname %>" >
2   <% if(item.value) { %>
3     <%=item.value %>
4   <% } else { %>
5     <i class="icon-<%=item.tagname %>">i>
6   <% } %>
7 span>