实例介绍
【实例简介】
【实例截图】
【核心代码】
{% if local is not defined %}
<div class="tabbable" id="myTabs">
{{ flash.output() }}
<div class="tab-content">
<div class="tab-pane active" id="tablist" >
{{ content() }}
{% if btn_new is defined or btn_search is defined %}
<nav class="navbar navbar-default" role="navigation">
<div class="col-sm-1">
{% if btn_new is defined %}
<ul class="nav navbar-nav navbar-left">
<li class="navbar-btn"><a href="#" onclick="insertABlock();">新建</a></li>
</ul>
{% endif %}
</div>
{% if btn_search is defined %}
<form id="toolbar">
<div class="col-sm-7">
<ul class="nav navbar-nav navbar-right">
{% if conditions is defined %}
{% for name,value in conditions %}
<li><a href="#">
{{ selectStatic([name,"class":"form-control selectpicker","onchange":"clickSearch('"~btn_search~"');"] ,value) }}
</a></li>
{% endfor %}
{% endif %}
</ul></div>
<div class="col-sm-4">
<div class="input-group" style="margin:12px">
{% if search_items is defined %}
{{ selectStatic(["search_item","class":"form-control selectpicker","onchange":"clickSearch('"~btn_search~"');"] ,search_items) }}
</a></li>
{% endif %}
<span class="input-group-addon">包含:</span>
{{ text_field("search", "size" : 10, "class" : "form-control", "id" : "fieldSearch") }}
<span class="input-group-addon"><a href="#" onclick="clickSearch('{{btn_search}}')">搜索</a></span>
</div>
</div>
</form>
{% endif %}
</nav>
{% endif %}
<div class="row" id="listplace">
{% endif %}
{{ hidden_field("p_type") }}
<input type="hidden" id="area_id" name="area_id" value="{{area_id}}">
{% if page.items is defined %}
{% for lc_block in page.items %}
<div class="block_list" id="block{{lc_block.id}}" >
<div class="info" >
{% if lc_block.p_type == 0 %}
<div id="title" class="title" >{{lc_block.code}}</div>
<div class="detail">分组：<span id="group">{{lc_block.p_group}}</span></div>
<div class="detail">旋转：<span id="rotate">{{lc_block.rotate}}</span></div>
<div class="detail">数量：<span id="nums">{{lc_block.nums}}</span></div>
{% else %}
<div id="title" class="pos_title" >{{lc_block.code}}</div>
<div class="detail">分组：<span id="group">{{lc_block.p_group}}</span></div>
<div class="detail" style="display:none">旋转：<span id="rotate">{{lc_block.rotate}}</span></div>
<div class="detail" style="display:none">数量：<span id="nums">{{lc_block.nums}}</span></div>
{% endif %}
<div id="notes" style="display:none">{{lc_block.notes}}</div>
<div class="detail" >(<span id="x">{{lc_block.x}}</span>,<span id="y">{{lc_block.y}}</span>)</div>
</div>
<div class="additon">
<ul>
<li onclick="changeBlock({{lc_block.id}});" > <i class="glyphicon glyphicon-edit" data-toggle="tooltip" data-placement="bottom" title="编辑"></i></li>
<li onclick="deleteBlock({{lc_block.id}});"><i class="glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="bottom" title="删除" ></i></button>
<li> <a id="showdiv" onclick="saveMe('{{ lc_block.id~","~lc_block.code }}')" title="{{ lc_block.code }}" href="#inline"> <i class="glyphicon glyphicon-qrcode" data-toggle="tooltip" data-placement="bottom" title="二维码"></i></a></li>
</ul>
</div>
</div>
{% endfor %}
{% endif %}
<div id="block_last"></div>
{{ partial("../../../framework/partials/pageinfo") }}
<div style="display:none">
<div id="inline" style="width:300px; height:300px;text-align:center">
<img id="myqrcode" src="" width="100%" height="100%" />
</div>
</div>
{% if local is not defined %}
</div>
</div>
<div class="tab-pane" id="tabedit" >
<div class="workplace" id="editplace">
</div>
</div>
</div>
</div>
{% endif %}
<style type="text/css">
.block_list {
margin:2px;
width:100px;
height:127px;
border:1px solid #E7E7EB;
position:relative;
float:left;
box-shadow:1px 1px 1px #000;
}
.block_list.selectit {
border:1px solid black;
}
.info {
width:100px;
height:100px;
}
.additon ul{
height:25px;
width:100%;
background:#E7E7EB;
}
.additon ul li{
height:25px;
line-height:25px;
width:33%;
list-style: none;
display:block;
float:left;
text-align:center;
color:#999999;
}
.additon ul li.hover{
color:black;
}
.title{
width:98px;
height:20px;
text-align:center;
background:yellow;
font-weight:bold;
}
.pos_title{
width:98px;
height:20px;
color:white;
text-align:center;
background:blue;
font-weight:bold;
}
.detail{
width:100%;
height:20px;
text-align:left;
}
</style>
<script>
function hideBlockModalAlert(){
$('#myBlockModalAlert').css("display","none");
}
function showBlockModalAlert(msg){
$('#myBlockModalAlert').css("display","block");
$('#myBlockModalAlert').html(msg);
}
function afterInsertABlock(data){
code = $('#myBlockModal #fieldCode').val();
flag = $('#p_type').val();
if (flag == 0){
$('#block_tmpl #divrotate').css("display","block");
$('#block_tmpl #divnums').css("display","block");
$('#block_tmpl #title').attr("class","title");
$('#block_tmpl #title').html(code);
}
else {
$('#block_tmpl #divrotate').css("display","none");
$('#block_tmpl #divnums').css("display","none");
$('#block_tmpl #title').attr("class","pos_title");
$('#block_tmpl #title').html(code);
}
$('#block_tmpl .block_list').attr("id","block" data.id);
$('#block_tmpl #x').html($('#myBlockModal #fieldX').val());
$('#block_tmpl #y').html($('#myBlockModal #fieldY').val());
$('#block_tmpl #group').html($('#myBlockModal #fieldBlockgroup').val());
$('#block_tmpl #rotate').html($('#myBlockModal #fieldRotate').val());
$('#block_tmpl #nums').html($('#myBlockModal #fieldNums').val());
$('#block_tmpl #notes').html($('#myBlockModal #fieldNotes').val());
$('#block_tmpl #changeblock').attr("onclick","changeBlock(" data.id ");");
$('#block_tmpl #deleteblock').attr("onclick","deleteBlock(" data.id ");");
$('#block_tmpl #showdiv').attr("onclick","saveMe('" data.id "," code "');");
$('#block_tmpl #showdiv').attr("title",code);
$('#block_last').before($('#block_tmpl').html());
}
function insertABlock(){
hideBlockModalAlert();
$('#blockmodalform')[0].reset();
$('#myBlockModal #id').val("");
flag = $('#p_type').val();
if (flag == 0){
$('#myBlockModal #more_info').css("display","block");
//$('#myBlockModal #posimg').attr("src","/img/car.png");
$('#myBlockModal #posimg').css("background-image","url(/img/car.png)")
}
else {
$('#myBlockModal #more_info').css("display","none");
//$('#myBlockModal #posimg').attr("src","/img/position.png");
$('#myBlockModal #posimg').css("background-image","url(/img/position.png)")
}
$('#myBlockModalOk').attr("onclick","blockSubmit(afterInsertABlock);");
//杨林增加旋转角度06.30 并且初始化位置
getPoint()
$('#myBlockModal').modal("show");
}
function afterEditABlock(data){
divid = '#listplace #block' data.id;
code = $('#myBlockModal #fieldCode').val();
$(divid ' #title').html(code);
$(divid ' #x').html($('#myBlockModal #fieldX').val());
$(divid ' #y').html($('#myBlockModal #fieldY').val());
$(divid ' #group').html($('#myBlockModal #fieldBlockgroup').val());
$(divid ' #rotate').html($('#myBlockModal #fieldRotate').val());
$(divid ' #nums').html($('#myBlockModal #fieldNums').val());
$(divid ' #notes').html($('#myBlockModal #fieldNotes').val());
$(divid ' #showdiv').attr("onclick","saveMe('" data.id "," code "')");
$(divid ' #showdiv').attr("title",code);
}
function deleteBlock(id){
$.ajax({
type: "Get",
url:'/mall/block/delete/' id,
dataType: 'json', //数据格式为json
beforeSend: function(){
showLoading();
hideBlockModalAlert();
},
error: function(request) {
hideToast();
showBlockModalAlert("网络连接错误");
},
success: function(data) {
hideToast();
if (data.errcode == "0")
{
$('#listplace #block' id).remove();
$('#myBlockModal').modal("hide");
}
else {
showBlockModalAlert(data.errmsg);
}
return false;
}
});
return false;
}
$('#listplace').delegate('ul li','mouseover',function(){
// $(".additon ul li").mousemove(function(){
$(this).addClass("hover");
})
$('#listplace').delegate('ul li','mouseleave',function(){
// $(".additon ul li").mouseleave(function(){
$(this).removeClass("hover");
})
$('#listplace').delegate('div','mouseover',function(){
$(this).addClass("selectit");
})
$('#listplace').delegate('div','mouseleave',function(){
$(this).removeClass("selectit");
})
function changeBlock(id){
hideBlockModalAlert();
$('#blockmodalform')[0].reset();
$('#myBlockModal #id').val("");
divid = '#listplace #block' id;
$('#myBlockModal #fieldCode').val($(divid ' #title').html());
x = $(divid ' #x').html();
y=$(divid ' #y').html();
$('#myBlockModal #fieldX').val(x);
$('#myBlockModal #fieldY').val(y);
$('#myBlockModal #fieldBlockgroup').val($(divid ' #group').html());
$('#myBlockModal #fieldRotate').val($(divid ' #rotate').html());
$('#myBlockModal #fieldNums').val($(divid ' #nums').html());
$('#myBlockModal #fieldNotes').val($(divid ' #notes').html());
flag = $('#p_type').val();
if (flag == 0){
$('#myBlockModal #more_info').css("display","block");
//$('#myBlockModal #posimg').attr("src","/img/car.png");
$('#myBlockModal #posimg').css("background-image","url(/img/car.png)")
}
else {
$('#myBlockModal #more_info').css("display","none");
//$('#myBlockModal #posimg').attr("src","/img/position.png");
$('#myBlockModal #posimg').css("background-image","url(/img/position.png)")
}
$('#myBlockModal #posimg').css("top",y "px");
$('#myBlockModal #posimg').css("left",x "px");
$('#myBlockModal #fieldNotes').val($(divid ' #notes').html());
$('#myBlockModal #id').val(id);
$('#myBlockModalOk').attr("onclick","blockSubmit(afterEditABlock);");
$('#myBlockModal').modal("show");
//杨林增加旋转角度06.30 初始化位置
getPoint()
}
function saveMe(msg){
$('#myqrcode').attr("src","http://api.vlooks.cn/qrcode.php?text=" msg "&level=l&size=10");
}
$("#showdiv").fancybox({'centerOnScroll':true});
function blockSubmit(callback){
$.ajax({
type: "Post",
url:'/mall/block/save',
data:$('#blockmodalform').serialize() "&p_type=" $('#p_type').val() "&area_id=" $('#area_id').val(),
dataType: 'json', //数据格式为json
beforeSend: function(){
showLoading();
hideBlockModalAlert();
},
error: function(request) {
hideToast();
showBlockModalAlert("网络连接错误");
},
success: function(data) {
hideToast();
if (data.errcode == "0")
{
callback(data);
$('#myBlockModal').modal("hide");
}
else {
showBlockModalAlert(data.errmsg);
}
return false;
}
});
return false;
}
</script>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myBlockModal" tabindex="-1" role="dialog"
aria-hidden="true" style="position:fixed;top:5%;left:5%;width:90%;height:90%">
<div class="modal-dialog" style="width:100%;">
<div class="modal-content" style="width:100%;">
<div class="alert alert-danger" id="myBlockModalAlert" style="display:none"></div>
<div class="modal-body" id="myBlockModalBody" style="width:100%;overflow-x: scroll;">
<div id="myselectimg" style="width:100%;">
<img id="myself" src="/img/layout/{{domain~"_"~area_id}}.png" width="100%" />
<!-------
<img src="/img/logo.png" style="position:absolute;width:58px;height:100px;top:0px;left:0px;z-index:9999">
---->
<style>
.show{
position:absolute;width:58px;height:100px;top:0px;left:0px;z-index:9999;
}
</style>
<div id="posimg" class="show" > </div>
</div>
<form id="blockmodalform" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group" style="width:100%;margin:10px;">
<div class="input-group col-sm-2" style="float:left">
<span class="input-group-addon" >代码:</span>
{{ text_field("code", "size" : 30, "class" : "form-control", "id" : "fieldCode") }}
</div>
<div class="input-group col-sm-2" style="float:left">
<span class="input-group-addon" >分组:</span>
{{ text_field("block_group", "type" : "numeric", "class" : "form-control", "id" : "fieldBlockgroup") }}
</div>
<div class="input-group col-sm-2" style="float:left;">
<span class="input-group-addon" >坐标:</span>
{{ text_field("x", "size" : 10, "class" : "form-control", "id" : "fieldX") }}
<span class="input-group-addon">X</span>
{{ text_field("y", "size" : 10, "class" : "form-control", "id" : "fieldY") }}
</div>
<div class="input-group col-sm-2" style="float:left">
<span class="input-group-addon" >备注:</span>
{{ text_field("notes", "size" : 30, "class" : "form-control", "id" : "fieldNotes") }}
</div>
<div id="more_info">
<div class="input-group col-sm-2" style="float:left">
<span class="input-group-addon" >数量:</span>
{{ text_field("nums", "type" : "number", "class" : "form-control", "id" : "fieldNums") }}
</div>
<div class="input-group col-sm-2" style="float:left">
<span class="input-group-addon" >角度：</span>
<!-------
{{ text_field("rotate", "type" : "number", "class" : "form-control", "id" : "fieldRotate") }}---->
<input class="form-control" id="fieldRotate" type="number" name="rotate" step="5">
</div>
</div>
{{ hidden_field("id") }}
<br>
</div>
</form>
</div>
<div class="modal-footer" style="margin-top:10px">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button id="myBlockModalOk" type="button" class="btn btn-primary" onclick="">
确认
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div id="block_tmpl" style="display:none">
<div class="block_list" >
<div class="info">
<div id="title" class="title"></div>
<div class="detail">分组：<span id="group"></span></div>
<div class="detail" id="divrotate">旋转：<span id="rotate"></span></div>
<div class="detail" id="divnums">数量：<span id="nums"></span></div>
<div id="notes" style="display:none"></div>
<div class="detail">(<span id="x"></span>,<span id="y"></span>)</div>
</div>
<div class="additon">
<ul>
<li id="changeblock" onclick=""> <i class="glyphicon glyphicon-edit" data-toggle="tooltip" data-placement="bottom" title="编辑"></i></li>
<li id="deleteblock" onclick=""><i class="glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="bottom" title="删除"></i>
</li><li> <a id="showdiv" onclick="" title="" href="#inline"> <i class="glyphicon glyphicon-qrcode" data-toggle="tooltip" data-placement="bottom" title="二维码"></i></a></li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function()
{
//图片固定好 屏蔽bootstrap影响
$("#myself").attr("width",1400)
$("#myself").css("max-width","1400px")
$("#posimg").mousedown(function(e)//e鼠标事件
{
$(this).css("cursor","move");//改变鼠标指针的形状
var offset = $(this).position();//DIV在对于离他最近的定位元素
var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
{
$("#posimg").stop();//加上这个之后
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
//这是控制位置
$("#posimg").animate({left:_x "px",top:_y "px"},10);
//这里是改变
$("#fieldX").val(parseInt(_x))
$("#fieldY").val(parseInt(_y))
});
});
$(document).mouseup(function()
{
$("#posimg").css("cursor","default");
$(this).unbind("mousemove");
})
})
function getPoint(){
var _x =$("#fieldX").val()
var _y =$("#fieldY").val()
var _z=$("#fieldRotate").val()
if(_x==""&&_y==""){//判断是否初始化位置
_x=0
_y=0
}
$("#posimg").animate({left:_x "px",top:_y "px"},10);
document.getElementById('posimg').style['transform'] = 'rotate(' _z*3.6 'deg)';
}
fieldRotate.onchange = function () {//改变角度
var mydiv = document.getElementById('posimg');
mydiv.style['transform'] = 'rotate(' this.value*3.6 'deg)';
}
</script>
标签： 商场
好例子网口号：伸出你的我的手 — 分享！
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论