第三课常用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('复制成功'); }); }) ``` ```