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=" ...
随机推荐
- 微信小游戏 修改appid
微信开发者工具中,当你使用一个公众号开发一个项目,有需求切换到另外一个公众号继续开发时,需要修改appid. 修改微信小游戏 project.config.json 文件的appid
- Xcode - Debug汇编模式切换调试
一.概念 1.汇编指令: 模拟器上运行的是Intel指令,而真机上运行的是arm指令, 2.每条汇编指令的格式总是由: 操作码, 操作数1,操作数2,操作数3组成. 操作数要么就是常数,要么就是寄存储 ...
- tomcat启动报错“Error: Exception thrown by the agent : java.net.MalformedURLException: Local host name unknown: java.net.UnknownHostException: iZ25fsk1ifk: iZ25fsk1ifk”
在启动了Tomcat的时候出现下面的错误,导致启动不了,卡在读日志的状态 Error: Exception thrown by the agent : java.net.MalformedURLExc ...
- Linux监控远程端口是否开启脚本
#!/bin/bash #author Liuyueming #date 2017-07-29 #定时检测邦联收单及预付卡系统 pos_num=`nmap 远程IP地址 -p 端口号|sed -n & ...
- windows10下笔记本电脑外接显示器设置
笔记本屏幕小,故外接一个显示器,方便使用. 我的电脑没有VGA接口,有HDMI接口,所以我买了一个HDMI到VGA接口转换器. 直接把外界显示器安装到笔记电脑上,如下图所示 接下来是屏幕设置 打开系统 ...
- 使用IntelliJ IDEA进行Python远程调试的需求（未完）
使用IntelliJ IDEA进行Python远程调试的需求(未完) 在研究深度学习Machlearning时,有时候需要借助ubuntu搭建的tensorflow环境,另外也有越来越多的运算程序只能 ...
- django比较相等或者不相等的模板语法ifequal / ifnotequal
转自:http://blog.csdn.net/goupper1991/article/details/50768346 ifequal / ifnotequal 在模板语言里比较两个值并且 ...
- HTML_body标签
常用符号:空格:  大于号:> 小于号: < 块级标签:H标签(加大加粗),P标签(段落间有间距),DIV(白板) 行内标签:SPAN标签(白板) <!- ...
- 2018/03/16 echo、print_r、print、var_dump之间的区别
还是先说下我对这个方法的理解 print_r()用于 cli模式下的输出调试,error_log() 调试 var_dump() 用于页面的显示调试 echo() 用处比较多,__toString() ...
- es新增字段，并设置默认值
重新设置mapping 添加新的字段. 设置es允许脚本执行:elasticsearch.yml script.inline: true 然后执行脚本 POST linewell_assets_mgt ...