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="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));
