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=" ...
随机推荐
- IOS开发 REST请求 ASIHTTPRequest用法
ASIHTTPRequest类库简介和使用说明 官方网站: http://allseeing-i.com/ASIHTTPRequest/ .可以从上面下载到最新源码,以及获取到相关的资料. 使用iOS ...
- Java虚拟机九 java.lang.String在虚拟机中的实现
在Java中,Java的设计者对String对象进行了大量的优化,主要有三个特点: 1.不变性: 不变性是指String对象一旦生成,则不能再对它进行改变.String的这个特点可以泛化成不变(imm ...
- Java虚拟机五 堆的参数配置
堆空间是Java进程的重要组成部分,几乎所有的应用相关的内存空间都和堆有关. 1.最大堆和初始堆的设置 当Java程序启动时,虚拟机就会分配一块初始堆空间,使用参数 -Xms 指定这块空间的大小.一般 ...
- backBone.js之Model篇 (1) 简单实例
“Model是js应用的核心,包括基础的数据以及围绕着这些数据的逻辑:数据转换.验证.属性计算和访问控制”. 一.初始化方法 我们先来看一个demo,initialize,这是一个初始化方法,但是写这 ...
- Java String, StringBuffer和StringBuilder实例
1- 分层继承2- 可变和不可变的概念3- String3.1- 字符串是一个非常特殊的类3.2- String 字面值 vs. String对象3.3- String的方法3.3.1- length ...
- 牛客网多校赛第九场A-circulant matrix【数论】
链接:https://www.nowcoder.com/acm/contest/147/A 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524 ...
- oracle 日期格式化和数据去重
1.获取系统日期: select sysdate as date1 from dual: 当前时间减去7分钟的时间 select sysdate,sysdate - interval '7' MINU ...
- 三种邻接表存图模板：vector邻接表、数组邻接表、链式前向星
vector邻接表: ; struct Edge{ int u,v,w; Edge(int _u=0,int _v=0,int _w=0){u=_u,v=_v,w=_w;} }; vector< ...
- JNUOJ 1187 - 哨兵
Time Limit: 10000ms Memory Limit: 262154KB 64-bit integer IO format: %lld Java class name: Main ...
- codeforces 792D - Paths in a Complete Binary Tree
#include<cstdio> #include<iostream> #define lowbit(x) x&(-x) typedef long long ll; u ...