<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会议室布局</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/gridstack.css"/>
<!--[if IE]>
<script src="js/html5.min.js"></script>
<![endif]-->
</head>
<body class="bgcolor-3">
<div class="jq22-container">
<div class="jq22-content">
<div class="container-top">
<div class="btns">
<div data-bind="click: add_new_widget" class="btn btn-primary">+ 新增一个位置(上限 <span class="add-span">0</span> 当前 <span class="add-span">0</span>)</div>
<div onclick="clear_style(this);" class="btn btn-warning clear_style">去除编辑样式</div>
<div class="btn btn-default">门入口设置:</div>
<div class="btn btn-success door-op" data-type="0" data-index="0">上边</div>
<div class="btn btn-success door-op" data-type="1" data-index="0">右边</div>
<div class="btn btn-success door-op" data-type="2" data-index="0">下边</div>
<div class="btn btn-success door-op" data-type="3" data-index="0">左边</div>
<div class="btn btn-danger door-op" data-type="4" data-index="0">左移</div>
<div class="btn btn-danger door-op" data-type="5" data-index="0">右移</div>
<div class="btn btn-default">投影设置:</div>
<div class="btn btn-success door-op" data-type="0" data-index="1">上边</div>
<div class="btn btn-success door-op" data-type="1" data-index="1">右边</div>
<div class="btn btn-success door-op" data-type="2" data-index="1">下边</div>
<div class="btn btn-success door-op" data-type="3" data-index="1">左边</div>
<div class="btn btn-danger door-op" data-type="4" data-index="1">左移</div>
<div class="btn btn-danger door-op" data-type="5" data-index="1">右移</div>
<div onclick="submitHandler();" class="btn btn-success" style="float: right;">保存数据</div>
<div onclick="names_style(this);" class="btn btn-primary" style="float: right;">隐藏水牌</div>
</div>
<p class="tips" style="">请根据会场进行布局,位置按钮可以拖拽放大缩小,上下位置,不能有空位,可使用隐藏功能占位</p>
</div>
<div id="container-data">
<div class="names"></div>
<div class="container-fluid" style="padding: 15px;">
<div data-bind="component: {name: 'dashboard-grid', params: $data}" class="template-base"></div>
<div class="door-ty door"><img src="img/door.png"></div>
<div class="door-ty ty"><img src="img/ty.png"></div>
</div>
</div>
</div>
</div>
<input name="id" type="hidden" value="">
<input name="type" type="hidden" value="">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/knockout-min.js"></script>
<script src="js/gridstack.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="layer/layer.min.js"></script>
<script type="text/javascript">
//数据
//格式:[{x: 0, y: 0, width: 1, height: 1, input: '姓名1', hide: '隐藏', class: '',rate:0}];
var json = "";
//数量
var roomIdNum = "60";
roomIdNum = parseInt(roomIdNum);
$(".add-span").html(roomIdNum);
//虚拟对齐显示数量,用来美化页面
var roomIdNumYushu = roomIdNum % 10;
var roomIdNumShow = roomIdNum+(roomIdNumYushu>0?(10-roomIdNumYushu):0);
//操作类型
var type = "0";
//门、投影的位置
//格式:[{"t":"bottom","t1":"0","l":"left","l1":"50"},{"t":"top","t1":"0","l":"left","l1":"50"}]
//下标0为门位置1为投影位置
var doors = "";
//水牌
//格式:['张三','李四']
var names = "";
//初始化组件相关参数
ko.components.register('dashboard-grid', {
viewModel: {
createViewModel: function (controller, componentInfo) {
var ViewModel = function (controller, componentInfo) {
var grid = null;
this.widgets = controller.widgets;
this.afterAddWidget = function (items) {
if (grid == null) {
grid = $(componentInfo.element).find('.grid-stack').gridstack({
auto: false
}).data('gridstack');
}
var item = _.find(items, function (i) { return i.nodeType == 1 });
grid.add_widget(item);
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
grid.remove_widget(item);
});
};
};
return new ViewModel(controller, componentInfo);
}
},
template:
[
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
' <div class="grid-stack-item" data-bind="attr: {\'data-input\': $data.input,\'data-class\': $data.class,\'data-hide\': $data.hide,\'data-rate\': $data.rate,\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
' <div class="grid-stack-item-content">' +
' <input placeholder="未填写序号或名称">' +
' <span class="grid-style-span">' +
' <span data-type="0">☐型</span>' +
' <span data-type="1">u型</span>' +
' <span data-type="2">⊂型</span>' +
' <span data-type="3">∩型</span>' +
' <span data-type="4">⊃型</span>' +
' <span data-type="5">○型</span>' +
' </span>' +
' <span class="opacity-span"></span>' +
' </div>' +
' <button class="grid-stack-item-close" data-bind="click: $root.delete_widget"></button>',
' </div>',
'</div> '
].join('')
});
$(function () {
//模块形状点击事件
$(".template-base").on('click','.grid-style-span span',function(){
$(this).parent().parent().removeClass("grid-style-0").removeClass("grid-style-1").removeClass("grid-style-2").removeClass("grid-style-3").removeClass("grid-style-4").removeClass("grid-style-5").addClass("grid-style-"+$(this).data("type"));
});
//显示或隐藏组件
$(".template-base").on('click','.opacity-span',function(){
if($(this).parent().hasClass("active")){
$(this).parent().find(".grid-style-span").show();
$(this).parent().find("input").removeClass("input-show");
$(this).parent().removeClass("active");
$(this).html("隐藏");
}else{
$(this).parent().find(".grid-style-span").hide();
$(this).parent().find("input").addClass("input-show");
$(t
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
1、会场进行布局,需要设置布局包含的座位,桌子,设置在指定的位置,按照领导席位进行排布。 2、桌子可能时U型(四个开口方向)、圆形、方形。 3、根据每个座位序号设置水牌。 4、保存为图片,方便直接打印,图片为base64,可在服务端进行转储。 5、功能包括:新增位置、去除/恢复编辑样式、门入口设置、投影设置、显示/隐藏水牌、保存数据(数据保存时进行截图,截图格式为去除编辑样式后的截图)。 6、保存数据时,会将所有数据打包为json进行打印。 7、修改时,传入初始化数据,会进行数据初始化。 8、包中包含所有文件素材,开箱即用。 9、文件包含一个index.html文件,为主文件。 10、index-base.html文件为原始拖动插件。 11、其他js、css等用到的插件已经全部打包,没有文件遗漏。 12、本插件全部使用js+Jquery进行编写,代码没有进行紧密封装,可以根据自己需要进行修改和封装,中间使用到的jquery选择器比较多,但是主要功能操作都进行了注释,方便读者了解编写时的逻辑,方便进行二次开发和修改。 12、如有疑问可联系作者,欢迎指出bug和不足之处,以便完善内容。
资源推荐
资源详情
资源评论
收起资源包目录
dashboard-grid.zip (33个子文件)
index-base.html 6KB
js
jquery-ui.min.js 235KB
bootstrap.min.js 35KB
lodash.min.js 48KB
knockout-min.js 53KB
html2canvas.min.js 194KB
jquery.min.js 94KB
gridstack.js 31KB
html5.min.js 4KB
img
door.png 9KB
ty.png 9KB
css
font-face.css 6KB
default.css 14KB
bootstrap.css 145KB
font-awesome.min.css 28KB
gridstack.css 10KB
index.html 19KB
layer
layer.min.js 23KB
theme
default
loading-2.gif 2KB
loading-1.gif 701B
loading-0.gif 6KB
icon-ext.png 6KB
layer.css 16KB
icon.png 11KB
moon
style.css 4KB
default.png 7KB
fonts
icomoon.woff 1KB
icomoon.svg 2KB
fontawesome-webfont.woff 87KB
fontawesome-webfont.woff2 69KB
icomoon.eot 2KB
fontawesome-webfont.ttf 147KB
icomoon.ttf 1KB
共 33 条
- 1
资源评论
生命无须向死而生
- 粉丝: 48
- 资源: 34
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功