~~~
<!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="hr-line-dashed"></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="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="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="hr-line-dashed"></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="hr-line-dashed"></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="hr-line-dashed"></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="hr-line-dashed"></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="hr-line-dashed"></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="hr-line-dashed"></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="hr-line-dashed"></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>
~~~
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作