第三課常用js解讀 · 萬能Web開發文檔筆記

# 第三課常用js解讀 ### foxui是人人商城微信端樣式文本框 ``` <pre class="calibre14">``` <div class="fui-cell bank-group" {if empty($type_array[3]['checked'])}style="display: none;"{/if}> <div class="fui-cell-label" style="width: 120px;">銀行開戶行</div> <div class="fui-cell-info"><input type="text" id="bankaddress" name="bankaddress" class='fui-input' value="{$last_data['bankaddress']}" /></div> </div> ``` ``` 上傳 ``` <pre class="calibre14">``` <div class='fui-cell'> <div class='fui-cell-label'>上傳身份證</div> <div class='fui-cell-info'> <ul class="fui-images fui-images-sm"></ul> <div class="fui-uploader fui-uploader-sm" data-max="5" data-count="0"> <input type="file" name='cid' id='cid' multiple="" accept="image/*" > </div> </div> </div> ``` ``` html模板中使用js模板 - html代碼 ``` <pre class="calibre14">``` <div class="fui-list-group" id="qq"></div> <script type="text/html" id="tpl_list"> <%each list as item%> <a class="fui-list" href="{php echo mobileUrl('qa/detail')}&id=<%item.id%>"> <div class="fui-list-inner"> <div class="title"><%item.title%></div> </div> <div class="fui-list-angle"> <div class="angle"></div> </div> </a> <%/each%> </script> ``` ``` - 模板加載 ``` <pre class="calibre14">``` <script> var result = {list: [ { title: '<油價>調整周期縮至10個工作日無4%幅度限制', url: 'http://finance.qq.com/zt2013/2013yj/index.htm' }, { title: '明起汽油價格每噸下調310元單價回歸7元時代', url: 'http://finance.qq.com/a/20130326/007060.htm' }, { title: '廣東副縣長疑因拋棄情婦遭6女子圍毆紀檢調查', url: 'http://news.qq.com/a/20130326/001254.htm' }, { title: '湖南27歲副縣長回應質疑：父親已不是領導', url: 'http://news.qq.com/a/20130326/000959.htm' }, { title: '朝軍進入戰斗工作狀態稱隨時準備導彈攻擊美國', url: 'http://news.qq.com/a/20130326/001307.htm' } ]}; core.tpl('#qq', 'tpl_list', result); </script> ``` ``` - 其他語法 ``` <pre class="calibre14">``` <%content%> 輸出內容 <%#content%> 不輸出條件語句 <%if k>0%> <%else if k<0%> <%else%> <%/if%> 循環數組或對象 <%each list as k v%> <%k%>-<%v.user%> <%/each%> 子模板 <%include 'temp_name'%> 輔助方法 ``` ``` FoxUI方法 ``` <pre class="calibre14">``` FoxUI.loader.show('mini');//loading FoxUI.loader.hide(); FoxUI.toast.show('取消支付');//自動消失 FoxUI.alert('下單失敗'); FoxUI.confirm('內容','標題',function(){ console.log("確定"); },function(){ console.log("取消"); }); FoxUI.message.show({ title: "很遺憾，您沒有中獎!", icon: 'icon icon-wrong', content: '', buttons: [{ text: '確定', extraClass: 'btn-danger', onclick: function () { console.log(11) } }] }); ``` ``` 調用clipboard.min.js不使用flash復制插件 ``` <pre class="calibre16">``` require([myconfig.path+'dist/clipboard.min.js'], function(Clipboard){ var clipboard = new Clipboard('.jsclip', { text: function(e) { return $(e).data('url')||$(e).data('href'); } }); clipboard.on('success', function(e) { tip.msgbox.suc('復制成功'); }); }) ``` ```