基本信息
源码名称：ruby 商场自助停车
源码大小：8.70KB
文件格式：.zip
开发语言：Ruby
更新时间：2016-07-08
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

{%  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>