jq 自定义标注小组件 $.widget
html 部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <title>iPicture first demo</title>
<link rel="stylesheet" type="text/css" href="../../css/system/swiper.min.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="../../js/jquery/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../js/jquery/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../js/jquery/jqGrid.overrides.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jQuery.iPicture.css"/>
<link rel="stylesheet" type="text/css" href="../../css/system/ysp.css"/> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="/mjlms/pc/js/jquery/jquery-2.1.4.js"></script>
<script type="text/javascript" src="/mjlms/pc/js/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/jQuery.iPicture.js"></script>
<script src="../../js/jquery/grid.locale-zh_CN.js" type="text/javascript"></script>
<script src="../../js/jquery/jquery.jqGrid.js" type="text/javascript"></script>
<script type="text/javascript" src="../../js/system/upload.js"></script>
<script src="../../html/basic/unitJointViewDesign.js" type="text/javascript"></script>
<script src="../../html/basic/unit_joint_show.js" type="text/javascript"></script> <script src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script> <style type="text/css">
body {
font-size: 12px;
margin:20px;
}
#slideshow {
position:relative;
}
#slideshow #iPicture {
margin:0 auto;
width:800px;
/*height:263px;*/
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #iPicture .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #iPicture to avoid horizontal scroll */
/*height:263px;*/
} /**
* Slideshow controls style rules.
*/
.control {
display:block;
width:74px;
height:128px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
z-index:100;
}
.tip {
display:none;
color:red;
font-size:12px;
font-weight:700;
} #leftControl {
top:40%;
left:0;
background:transparent url(images/left-gold.png) no-repeat 0 0;
}
#rightControl {
top:40%;
right:0;
background:transparent url(images/right-gold.png) no-repeat 0 0;
}
#pageContainer {
margin:0 auto;
width: 800px;
}
body{
background-color: #eee;
color: #ffffff;
}
.buttonSave{
color: #ffffff;
border-bottom: 2px dashed #ffffff;
border-top: 2px dashed #ffffff;
} #file {
display: block;
height: 30px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 40px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
margin-top:40px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style> </head>
<body>
<div align='right'>
<div id = "tipsDialog_success"></div>
<div id = "tipsDialog_cancel"></div>
</div> <div class="row">
<div class="col-xs-11 search-form" style="padding-left: 20px;">
<div class="col-xs-3 select-label" style="color:#444">
标号宽度：
</div>
<div class="col-xs-3 select-input">
<select id="indexWidth" class="selectpicker show-tick form-control">
<option>36px</option>
<option>35px</option>
<option>34px</option>
<option>33px</option>
<option>32px</option>
<option>31px</option>
<option>30px</option>
<option>29px</option>
<option>28px</option>
<option>27px</option>
<option>26px</option>
<option>25px</option>
<option>24px</option>
<option>23px</option>
<option>22px</option>
<option>21px</option>
<option>20px</option>
</select>
</div>
<div class="col-xs-3 select-label" style="color:#444">
标号高度：
</div>
<div class="col-xs-3 select-input">
<select id="indexHeight" class="selectpicker show-tick form-control">
<option>12px</option>
<option>11px</option>
<option>10px</option>
<option>9px</option>
<option>8px</option>
<option>7px</option>
<option>6px</option>
<option>5px</option>
<option>4px</option>
<option>3px</option>
<option>2px</option>
<option>1px</option>
</select>
</div>
<div class="col-xs-3 select-label" style="color:#444">
序号字体：
</div>
<div class="col-xs-3 select-input">
<select id="indexFont" class="selectpicker show-tick form-control">
<option>10px</option>
<option>9px</option>
<option>8px</option>
<option>7px</option>
<option>6px</option>
<option>5px</option>
<option>4px</option>
<option>3px</option>
<option>2px</option>
<option>1px</option>
</select>
</div>
</div>
</div> <hr />
<div id="pageContainer" class="swiper-container">
<div id="iPicture" class="swiper-wrapper" style="width:800px;height:500px;position:relative;">
</div> <div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="modal fade" id="operateModal" tabindex="-1" role="dialog" aria-labelledby="operateModalLabel" aria-hidden="true" data-backdrop=”static” data-keyboard="false">
<div class="modal-dialog" style="width:470px;">
<div class="modal-content">
<div class="modal-header f60">
<button type="button" class="close f60" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">法兰绑定</h4>
</div>
<div class="modal-body info">
<table id="jointList"></table>
</div>
<div class="modal-footer"> </div>
</div>
</div>
</div> </body> </html>
<script type="text/javascript"> </script>
引用的js文件
$(function(){
var unit =JSON.parse(localStorage.getItem("unit"));
if(unit == null ){return;}
var unitId = unit.unitId;
var url = '/mjlms/units/'+ unitId+'/withJoints';
$.ajax({
url : url,
cache : false,
type : 'GET',
beforeSend : function(xhr) {
},
success : function(ret) {
if (ret != null && ret.responseStatus == 1) {
var unit = ret.units[0];
var imgs=unit.layoutImg.split(',');
for(var i=0;i<imgs.length;i++){
if(imgs[i]!=''){
$(".swiper-wrapper").append('<div class="swiper-slide" id="picture1"><img src="' + imgs[i] +'"></div>').clone('.pic');
//console.log(imgs[i])
//$("#picture1").css("background",'url(' + imgs[i] + ' ) no-repeat');
$("#iPicture").iPicture({
animation: true,
animationBg: "bgblack",
animationType: "ltr-slide",
pictures: ["picture1"],
button: "moreblack",
moreInfos:unit,
modify: true,
initialize: false
});
}else{
//$("#picture1").css("background",'url(images/background.jpg) no-repeat');
$(".swiper-wrapper").append('<div class="swiper-slide" ><img src="data:images/background.jpg" ></div>')
$("#iPicture").iPicture({
animation: true,
animationBg: "bgblack",
animationType: "ltr-slide",
pictures: ["picture1"],
button: "moreblack",
moreInfos:{},
modify: true,
initialize: false
});
}
};
//lunbo
var swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
pagination: '.swiper-pagination',
onlyExternal:true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
sliderPerview:'auto',
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true//修改swiper的父元素时，自动初始化swiper
});
}
}
});
$("#cancel").click(function(){
history.back();
});
// $("#upload").click(function(){
// uploadUnitLayoutFile(unit.id);
// });
$("#showUnits").click(function(){
window.open("../../html/basic/unit_joint_show.html","_blank",'width=400,height=600,location=0,resizable=no');
});
function uploadUnitLayoutFile(id){
uploadFileUrl = '/mjlms/uploadUnitLayoutFile?id=' + id;
startUploading();
};
});
自定义的jq小组件 标注
(function($) {
$.widget("justmybit.iPicture", {
options : {
animation : false,
animationBg : "bgblack",// 绑定图标
animationType : "ltr-slide",
button : "moreblack",
modify : false,//true
initialize : false,
moreInfos : {},
pictures : []
},
// Set up the widget
_create : function() {
var self = this;
var picture = $('#picture1');//内层div
var info = (self.options.moreInfos);
if (info.joints != undefined) {
$.each(info.joints, function(index, value) {
//如果法兰未绑定位置信息，继续循环
if(value.topPos==0&&value.leftPos==0) return;
//显示已经绑定的法兰色块
//生成父div
var div = $('<div id="' + value.jointId + '" class="more more32"></div>').css('top', value.topPos+"px").css('left', value.leftPos+"px") .css('background','red').css('position', "absolute").appendTo(picture);
var left=value.leftPos;
var top=value.topPos;
//左上角色块可以拖动
$('.more32').draggable({
// containment: picture,
stop : function(event, ui) {
var data={};
data.jointId=$(this).attr("id");
data.topPos=ui.position.top;
data.leftPos=ui.position.left;
$.ajax({
url : '/mjlms/joints/qr',
cache : false,
type : 'PUT',
contentType :'application/json',
dataType : 'json',
beforeSend : function(xhr) {
},
data : JSON.stringify(data),
success : function(ret) {
}
});
}
});
//生成已有图片 插入到已经绑定的色块中div
var imgButton = $('<div class="imgButtonDrag ' + self.options.button + '" title="在图片上拖拽移动,双击绑定">'+parseInt(value.jindex)+'</div>').appendTo(div).bind('dblclick', function() {
$('#operateModal').modal('toggle');
});
//生成已有浮动窗
var divInput = $('<div class="inputDiv"></div>').insertAfter(imgButton);//父窗口 divInput在imgButton后
var input = $('<textarea type="textarea" rows="9" id="' + value.topPos + "-" + value.leftPos + '" title="type here this tooltip" style="margin: 0px; width: 150px;display:none" readonly="true">' + value.descr + '</textarea>').appendTo(divInput).bind('dblclick', function() {
$('#operateModal').modal('toggle');
});
//生成删除标记，并绑定事件
$('<p class="pDelete" title="删除标注"></p>').insertAfter(input).bind('click', function() {
$(div).remove();
var data={};
data.jointId=$(this).parent().parent().attr("id");
data.topPos=0;
data.leftPos=0;
$.ajax({
url : '/mjlms/joints/qr',
cache : false,
type : 'PUT',
contentType :'application/json',
dataType : 'json',
beforeSend : function(xhr) {
},
data : JSON.stringify(data),
success : function(ret) {
}
});
});
});
}
// move option management
if (self.options.modify) {
if (self.options.animation) {
$(".more").addClass(self.options.animationBg);
} else {
$(".more").addClass('noAnimation');
}
$(".more32").css('overflow', 'visible');
this.initialization();
return;
}
// set animation
if (self.options.animation) {
this.animation();
}
},
//鼠标滑过 动画
animation : function() {
var self = this;
switch (self.options.animationType) {
case "ltr-slide":
$(".more").addClass('ltr-slide ' + self.options.animationBg);
// Animation function left to right sliding
$(".more").hover(function() {
$(this).stop().animate({
width : '225px',
height : '250px'
}, 200).css({
'z-index' : '10'
});
}, function() {
$(this).stop().animate({
width : '55px',
height : '12px'
}, 200).css({
'z-index' : '1'
});
});
break;
}
},
//生成左上角色块
initialization : function() {
var self = this;
var value="picture1";//内部
var picture = $('#'+value);
//生成左上角色块
var listContainer = $('<div class="listContainer"><ul><li class="' + value + '-button ' + self.options.button + '" title="在图片上拖拽移动,双击绑定"></li></ul></div>').appendTo('#' + value);
//左上角色块可以拖动
$('.' + value + '-button').draggable({
helper : 'clone',//拖拽元素时的显示方式如果是函数，必须返回值是一个DOM元素可选值：'original', 'clone', Function
// containment: picture,
stop : function(event, ui) {
$('#operateModal').modal('toggle');console.log(this)
$('<p class="top">' + ui.position.top + '</p><p class="left">' + ui.position.left + '</p>').appendTo(this);
}
});
var plus = 0;
$('#' + value).droppable({//放置被拖放元素的容器
accept : '.' + value + '-button',//仅允许符合适配器的元素激活拖放的事件
drop : function(event, ui) {
//当一个被允许(accept)的可拖动元素移动并覆盖可拖放元素松开鼠标时激活
plus++;
//落下时生成一个div放在picture1中
var div = $('<div id="' + value + '-more' + plus + '" class="' + value + ' more more32"></div>').css('top', ui.position.top + "px").css('left', ui.position.left + "px").css('position', "absolute").draggable().appendTo(picture);
localStorage.setItem("top",ui.position.top);
localStorage.setItem("left",ui.position.left);
if (self.options.animation) {
$(".more").addClass(self.options.animationBg);
} else {
$(".more").addClass('noAnimation');
}
$(".more32").css('overflow', 'visible');
var inputId = "input-" + plus;
var imgButton = $('<div class="imgButtonDrag ' + self.options.button + '" title="在图片上拖拽移动,双击绑定"></div>').appendTo(div).bind('dblclick', function() {
$('#operateModal').modal('toggle');
});
var divInput = $('<div clas="inputDiv"></div>').insertAfter(imgButton);//divInput在后
var input = $('<textarea type="textarea" rows="9" id="' + inputId + '" title="type here this tooltip" style="margin: 0px; width: 150px;display:none" readonly="true" />').appendTo(divInput).focus().bind('click', function() {
$('#operateModal').modal('toggle');
});
$('<p class="pDelete" title="删除标注"></p>').insertAfter(input).bind('click', function() {
$(div).remove();
var data={};
data.jointId=$(this).parent().parent().attr("id");
data.topPos=0;
data.leftPos=0;
$.ajax({
url : '/mjlms/joints/qr',
cache : false,
type : 'PUT',
contentType :'application/json',
dataType : 'json',
beforeSend : function(xhr) {
},
data : JSON.stringify(data),
success : function(ret) {
if (ret != null && ret.responseStatus == 1) {
}
}
});
});
var width=$("#indexWidth").find("option:selected").val();
var height=$("#indexHeight").find("option:selected").val();
$("#picture1 .more").css("width",width);
$("#picture1 .more").css("height",height);
var width1=Math.round(5*parseInt(width)/9);
console.log(width1)
var width2=Math.round(parseInt(width)/3)+"px";
var width3=width1+2;
var height1=Math.round(6*parseInt(height)/7);
div.css("width",width);
div.css("height",height);
//标号大小
imgButton.css("width",width1+'px');
$(".listContainer li").css("width",width1+'px');
//删除符号
$('<p class="pDelete" title="删除标注"></p>').css("width",width2);
$('<p class="pDelete" title="删除标注"></p>').css("background-size",width2);
$('<p class="pDelete" title="删除标注"></p>').css("left",width3+"px");
imgButton.css("height",height1+'px');
imgButton.css("line-height",height+'px');
$(".listContainer li").css("height",height1+'px');
$('<p class="pDelete" title="删除标注"></p>').css("height",height1+'px');
$('<p class="pDelete" title="删除标注"></p>').css("background-size",height1+'px');
}
});
$('<div style="position:absolute;left:84%;z-index: 1;" class="pic"> <input type="button" value="返回" class="back" /></div><form id="upload_form" style="margin-bottom:0px;position: absolute;z-index:1" enctype="multipart/form-data" method="post" action="/mjlms/uploadFile"> <span style="color:#292929;font-weight:bold;">点击上传布局图：</span><div class="input-file" align="left"> <!--<span class="uploadText">选择</span> --> <span><img id="preview" style="width:40px; height:30px; border:0px solid #ccc" alt="上传图片" src="/mjlms/pc/images/system/addPic.png"/></span> <input id="file" name="uploadFile" type="file" onChange="fileSelected();"/></div> <div id="upload" class="input-file uploadText upload" style="left: 114%;top:0px" onClick="">上传</div> <div id="error">选择有效的图像文件！</div> <div id="error2">上传文件时出错</div><div id="abort">该上传已被取消</div> <div id="warnsize">文件大小不超过512KB</div> <div id="upload_response"></div></form><br/>').prependTo(self.element);
console.log(self.element)
$('#' + self.element.attr('id') + ' .back').bind('click', function() {
window.open("../../html/basic/plant_unit.html", "_self");
});
$('#' + self.element.attr('id') + ' .upload').bind('click', function() {
var unit = JSON.parse(localStorage.getItem("unit"));
var unitId = unit.id;
uploadFileUrl = '/mjlms/uploadUnitLayoutFile?id=' + unitId;
startUploading();
location.reload("../../css/iPicture/slideshow.html");
});
},
//初始化结束
_setOption : function(key, value) {
$.Widget.prototype._setOption.apply(this, arguments);
},
destroy : function() {
$.Widget.prototype.destroy.call(this);
}
});
}(jQuery));
jq 自定义标注小组件 $.widget的更多相关文章
- Android-Widget桌面小组件
1, 掌握Widget的用:Widget的用途,能够添加到手机桌面的程序 2, Widget的特点和用法步骤: 特点:快捷,方便,个性化,可自定义功能,可及时控制更新Widget显示内容 3, 用法步 ...
- iOS桌面小插件 Widget Extension
iOS桌面小插件 Widget Extension 这个插件时iOS14以后才出现的,基于SwiftUI 旧项目新建时可能一堆错误,其中一个时要把插件target 开发sdk版本设置为14.0以上 新 ...
- Vue组件之自定义表单组件
今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...
- iOS原生地图开发指南续——大头针与自定义标注
iOS原生地图开发指南续——大头针与自定义标注 出自:http://www.sxt.cn/info-6042-u-7372.html 在上一篇博客中http://my.oschina.net/u/23 ...
- 百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）
百度地图Api之自定义标注:(获得标注的经纬度和中心经纬度即缩放度) <%@ Page Language="C#" AutoEventWireup="true&qu ...
- Swift之高德地图自定义标注弹出气泡样式
在用到地图类的sdk,sdk自带的样式必定不能满足开发者的需求,于是开发者不得不进行自定义,由于官方同样是object-c 版语法,不得不将其转为swift语法,以满足项目需求. 新建两个类 Cust ...
- OpenCV探索之路（二十五）：制作简易的图像标注小工具
搞图像深度学习的童鞋一定碰过图像数据标注的东西,当我们训练网络时需要训练集数据,但在网上又没有找到自己想要的数据集,这时候就考虑自己制作自己的数据集了,这时就需要对图像进行标注.图像标注是件很枯燥又很 ...
- Android桌面小插件——Widget
Android桌面小插件--Widget 效果图 实现 1. 创建Widget类 创建一个Widget类,并实现页面创建的时候,就实现显示时间 package com.kongqw.kqwwidget ...
- 百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
随机推荐
- SSH 服务器不用密码
1 A: user assh-keygen -t rsa 2 Created a directory on B, if ~/.ssh exists, which is fine.a@A:~> s ...
- 一个简单web系统的接口性能分析及调优过程
在测试一个简单系统接口性能压力时,压到一定数量,程序总是崩溃,查看相关机器相关数据时,CPU.内存.IO占用均不高,问题自然出现在其它地方先介绍下系统部件架构 Resin版本为:[root@local ...
- Spring Cloud Eureka 服务消费者
参考<spring cloud 微服务实战> 现在已经构建了服务注册中心和服务提供中心,下面就来构建服务消费者: 服务消费者主要完成:发现服务和消费服务.其中服务的发现主要由Eureka的 ...
- Python 多进程应用示例
import multiprocessing import time def func(name): outputline=name for i in range(3): outputline+= & ...
- 在CentOS6.8下安装Docker
在CentOS6.8下安装Docker 一.查看系统版本 [root@localhost opt]# uname -a Linux localhost.localdomain -.el6.x86_64 ...
- POJ-1887 Testing the CATCHER（dp,最长下降子序列）
Testing the CATCHER Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 16515 Accepted: 6082 ...
- android bluetooth
Android bluetooth介绍(一):基本概念及硬件接口 BlueZ为调试和与蓝牙子系统通信提供很多设置命令行工具,包含下面这些: hciconfig hcitool hcidump sdpt ...
- iOS-CoreLocation简单介绍（转载）
一.简介 1.在移动互联网时代,移动app能解决用户的很多生活琐事,比如 (1)导航:去任意陌生的地方 (2)周边:找餐馆.找酒店.找银行.找电影院 2.在上述应用中,都用到了地图和定位功能,在iOS ...
- 2018/03/30 每日一个Linux命令 之 创建用户/密码
感悟: 感觉每天学习下指令真的很不错,虽然感觉也没啥东西,但是真的用到了,马上就能想起来个大概,忘了详细的用法,就回来看看自己的博客. 话说今天GitHub上有个人 star 了我的项目,很开心,嘎嘎 ...
- MongoDB的"副本“数据库服务器
1.假设1数据库服务器为活跃服务器(主服务器),2和3为备份服务器,当1出现故障的时候,那么会在2和3中推选出一个(根据权重的等规则)作为活跃服务器,而当1又恢复正常了之后呢,它将以备份服务器的身份出 ...