TP模型管理之預覽模型靜態頁 · TP5常用代碼

~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H+ 后臺主題UI框架 - 選項卡 & 面板</title> <meta name="keywords" content="H+后臺主題,后臺bootstrap框架,會員中心主題,后臺HTML,響應式后臺"> <meta name="description" content="H+是一個完全響應式，基于Bootstrap3最新版本開發的扁平化主題，她采用了主流的左右兩欄式布局，使用了Html5+CSS3等現代技術"> <link rel="shortcut icon" href="favicon.ico"> <link href="__ADMIN__/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="__ADMIN__/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="__ADMIN__/css/plugins/iCheck/custom.css" rel="stylesheet"> <link href="__ADMIN__/css/animate.min.css" rel="stylesheet"> <link href="__ADMIN__/css/style.min862f.css?v=4.1.0" rel="stylesheet"> <link href="__ADMIN__/css/plugins/datapicker/datepicker3.css" rel="stylesheet"> <link href="__ADMIN__/plugins/webuploader-0.1.5/xb-webuploader.css" rel="stylesheet"> <link rel="stylesheet" href="__ADMIN__/css/admin.css"> </head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeIn"> <div class="row"> <div class="col-sm-12"> <div class="tabs-container"> <ul class="nav nav-tabs"> <li><a href="{:url('models/index')}"><i class="fa fa-mail-reply text-navy"></i>返回模型管理</a></li> <li class="{if condition="input('tab',1) eq 1"}active{/if}"><a data-toggle="tab" href="#tab-1" aria-expanded="true">{$modelName}字段管理</a> </li> <li class="{if condition="input('tab',1) eq 2"}active{/if}"><a data-toggle="tab" href="#tab-2" aria-expanded="false">添加字段</a> </li> <li id="showtab" class="{if condition="input('tab',1) eq 3"}active{/if}" style="{if condition="input('tab',1)!=3"}display:none{/if}"><a data-toggle="tab" href="#tab-3" aria-expanded="false">編輯字段</a> </li> <li class="{if condition="input('tab',4) eq 3"}active{/if}" ><a data-toggle="tab" href="#tab-4" aria-expanded="false">預覽模型</a> </li> </ul> <div class="tab-content"> <div id="tab-1" class="tab-pane {if condition="input('tab',1) eq 1"}active{/if}"> <div class="panel-body"> <form method="post" class="form-horizontal" action="{:url('models_field/index')}" data-type="ajax"> <input type="hidden" name="tab" value="1" /> <input type="hidden" name="id" value="{:input('id',0)}" /> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th width="10%">排序</th> <th width="20%">字段名</th> <th width="20%">別名</th> <th width="20%">類型</th> <th width="30%">操作</th> </tr> </thead> <tbody> {volist name="modelsfield" id="vo"} <tr> <td> <input type="text" class="form-control" name="sort[{$vo.id}]" value="{$vo.sort}" {eq name="vo.issystem" value="1"}disabled{/eq}> </td> <td>{$vo.field}</td> <td>{$vo.name}</td> <td>{$vo.formtype}</td> <td> {if condition="$vo.issystem == 1"} <a href="javascript:;"><i class="fa fa-ban text-navy"></i></a>  <a href="javascript:;"><i class="fa fa-ban text-navy"></i></a> {else/} <a href="{:url('index',['tab'=>3,'id'=>$vo.modelid,'fid'=>$vo.id])}" title="編輯"><i class="fa fa-edit text-navy"></i></a>   <a name="delete" href="{:url('delete',['id'=>$vo.id,'modelid'=>$vo.modelid])}" title="刪除"><i class="fa fa-trash-o text-navy"></i></a> {/if} </td> </tr> {/volist} </tbody> </table> </div> <div class="form-group"> <div class="col-sm-4 col-sm-offset-2"> <button class="btn btn-primary" type="submit">提交</button> </div> </div> </form> </div> </div> <div id="tab-2" class="tab-pane {if condition="input('tab',1) eq 2"}active{/if}"> <div class="panel-body"> <form method="post" class="form-horizontal" action="{:url('models_field/add')}" data-type="ajax"> <input type="hidden" name="tab" value="2" /> <input type="hidden" name="modelid" value="{:input('id',0)}" /> <div class="form-group"> <label class="col-sm-2 control-label">字段名稱</label> <div class="col-sm-10"> <input type="text" name="field" class="form-control" value=""> </div> </div>  <div class="form-group"> <label class="col-sm-2 control-label">字段別名</label> <div class="col-sm-10"> <input type="text" name="name" class="form-control" value=""> </div> </div>  <div class="form-group"> <label class="col-sm-2 control-label">字段類型</label> <div class="col-sm-10"> <select class="form-control m-b" name="formtype" onchange="field_setting(this.value)"> <option value="" selected>≡ 請選擇字段類型 ≡</option> <option value="text">單行文本</option> <option value="textarea">多行文本</option> <option value="editor">編輯器</option> <option value="box">選項</option> <option value="image">圖片</option> <option value="images">多圖片</option> <option value="number">數字</option> <option value="datetime">日期和時間</option> <option value="downfile">單文件上傳</option> <option value="downfiles">多文件上傳</option> </select> </div> </div>  <div class="form-group"> <label class="col-sm-2 control-label">參數設置</label> <div class="col-sm-10"> <div id="setting"> </div> </div> </div>  <div class="form-group"> <label class="col-sm-2 control-label">排序</label> <div class="col-sm-10"> <input type="text" name="sort" class="form-control" value=""> </div> </div>  <div class="form-group"> <div class="col-sm-4 col-sm-offset-2"> <button class="btn btn-primary" type="submit">提交</button> </div> </div> </form> </div> </div> <div id="tab-3" class="tab-pane {if condition="input('tab',1) eq 3"}active{/if}"> <div class="panel-body"> <form method="post" class="form-horizontal" action="{:url('models_field/edit')}" data-type="ajax"> <input type="hidden" name="tab" value="3" /> <input type="hidden" name="id" value="{$fieldinfo.id}" /> <input type="hidden" name="modelid" value="{:input('id',0)}" /> <input type="hidden" name="formtype" value="{$fieldinfo.formtype}" /> <div class="form-group"> <label class="col-sm-2 control-label">字段名稱</label> <div class="col-sm-10"> <input type="text" name="field" class="form-control" value="{$fieldinfo.field}"> </div> </div>  <div class="form-group"> <label class="col-sm-2 control-label">字段別名</label> <div class="col-sm-10"> <input type="text" name="name" class="form-control" value="{$fieldinfo.name}"> </div> </div>  <div class="form-group"> <label class="col-sm-2 control-label">字段類型</label> <div class="col-sm-10"> <label class="control-label">{$fieldinfo.formtype}</label> </div> </div>  <div class="form-group"> <label class="col-sm-2 control-label">參數設置</label> <div class="col-sm-10"> <div id="setting"> {$fieldinfo.setting} </div> </div> </div>  <div class="form-group"> <label class="col-sm-2 control-label">排序</label> <div class="col-sm-10"> <input type="text" name="sort" class="form-control" value="{$fieldinfo.sort}"> </div> </div> <div class="form-group"> <div class="col-sm-4 col-sm-offset-2"> <button class="btn btn-primary" type="submit">提交</button> </div> </div> </form> </div> </div> <div id="tab-4" class="tab-pane {if condition="input('tab',1) eq 4"}active{/if}"> <div class="panel-body"> <form method="post" class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">標題</label> <div class="col-sm-10"> <input type="text" class="form-control" name="title" value=""> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">摘要</label> <div class="col-sm-10"> <textarea type="text" class="form-control" name="description" style="height:100px"></textarea> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">縮略圖</label> <div class="col-sm-10"> <div id="file-pretty"> <input type="file" class="form-control"> </div> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group" id="data_1"> <label class="col-sm-2 control-label">發布日期</label> <div class="col-sm-10"> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="text" class="form-control" value="2016-12-1"> </div> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">發布時間</label> <div class="col-sm-10"> <label class="laydate-icon"></label> <input class="form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">單選框</label> <div class="col-sm-10"> <div class="radio i-checks"> <label style="padding-left:0"> <input type="radio" value="option1" name="a"> <i></i> 選項1      <input type="radio" checked="" value="option2" name="a"> <i></i> 選項2 </label> </div> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">復選框</label> <div class="col-sm-10"> <div class="checkbox i-checks"> <label style="padding-left:0"> <input type="checkbox" value=""> <i></i> 選項1      <input type="checkbox" value="" checked=""> <i></i> 選項2 </label> </div> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">下拉框</label> <div class="col-sm-10"> <select class="form-control m-b" name="account"> <option>選項 1</option> <option>選項 2</option> <option>選項 3</option> <option>選項 4</option> </select> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">多選列表框</label> <div class="col-sm-10"> <select class="form-control" multiple=""> <option>選項 1</option> <option>選項 2</option> <option>選項 3</option> <option>選項 4</option> </select> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">多圖上傳</label> <div class="col-sm-10"> <div id="uploader-demo"> <div id="fileList" class="uploader-list"></div> <div id="filePicker">選擇圖片</div> </div> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">縮略圖</label> <div class="col-sm-10"> <div id="uploader" class="xb-uploader"> <div class="queueList"> <div class="placeholder"> <div class="filePicker"></div> <p>或將照片拖到這里，單次最多可選300張</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div class="webuploader-container filePicker2"> <div class="webuploader-pick">繼續添加</div> <div style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;" id="rt_rt_1armv2159g1o1i9c2a313hadij6"> </div> </div> <div class="uploadBtn">開始上傳</div> </div> </div> </div> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">編輯器</label> <div class="col-sm-10"> <script id="container" name="content" type="text/plain">雪狐網</script> <script src="__ADMIN__/plugins/ueditor1_4_3_3/ueditor.config.js"></script> <script src="__ADMIN__/plugins/ueditor1_4_3_3/ueditor.all.js"></script> <script> var um = UE.getEditor('container',{ initialFrameHeight:300, autoHeightEnabled:false, catchRemoteImageEnable:true }); </script> </div> </div> <div class="hr-line-dashed"></div> </form> </div> </div> </div> </div> </div> </div> </div> <script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script> <script src="__ADMIN__/js/bootstrap.min.js?v=3.3.6"></script> <script src="__ADMIN__/js/content.min.js?v=1.0.0"></script> <script src="__ADMIN__/js/plugins/iCheck/icheck.min.js"></script> <script> $(document).ready(function(){ $(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",}); $( 'input[type="file"]' ).prettyFile(); // 在BootStrap的tab組件中加入webuploader，如果不是默認頁會出現點擊無法彈出打開對話框， // 解決方法即將初始化代碼放在單獨的函數中調用 $('a[data-toggle="tab"]').on('shown.bs.tab',function(e){ var target = e.target.toString(); if(target.indexOf('tab-4')>0){ initWebUploader(); } }); }); function field_setting(formtype){ $.getJSON("{:url('field_setting')}",{fieldtype:formtype},function(data){ $('#setting').html(data.setting); }); } function initWebUploader(){ var BASE_URL = '__ADMIN__/plugins/webuploader-0.1.5'; // 初始化Web Uploader var uploader = WebUploader.create({ // 選完文件后，是否自動上傳。 auto: true, // swf文件路徑 swf: BASE_URL + '/js/Uploader.swf', // 文件接收服務端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建，可能是input元素，也可能是flash. pick: '#filePicker', // 只允許選擇圖片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); } </script> <script type="text/javascript"> var BASE_URL = "__ADMIN__/plugins/webuploader-0.1.5"; </script> <script src="__ADMIN__/js/uploader.js"></script> <script src="__ADMIN__/plugins/webuploader-0.1.5/webuploader.js"></script> <script src="__ADMIN__/js/plugins/layer/layer.min.js"></script> <script src="__ADMIN__/js/layer_hplus.js"></script> <script src="__ADMIN__/js/plugins/prettyfile/bootstrap-prettyfile.js"></script> <script src="__ADMIN__/js/plugins/datapicker/bootstrap-datepicker.js"></script> <script src="__ADMIN__/js/plugins/cropper/cropper.min.js"></script> <script src="__ADMIN__/js/demo/form-advanced-demo.min.js"></script> <script src="__ADMIN__/js/plugins/layer/laydate/laydate.js"></script> </body> </html> ~~~