html 部分
iPicture first demo 标号宽度：标号高度：序号字体：
引用的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 
').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(' 
') $("#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 = $(' ').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 = $(' ').appendTo(div).bind('dblclick', function() { $('#operateModal').modal('toggle'); }); //生成已有浮动窗 var divInput = $(' ').insertAfter(imgButton);//父窗口 divInput在imgButton后 var input = $('').appendTo(divInput).bind('dblclick', function() { $('#operateModal').modal('toggle'); }); //生成删除标记，并绑定事件 $('').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 = $('
').appendTo('#' + value); //左上角色块可以拖动 $('.' + value + '-button').draggable({ helper : 'clone',//拖拽元素时的显示方式如果是函数，必须返回值是一个DOM元素可选值：'original', 'clone', Function // containment: picture, stop : function(event, ui) { $('#operateModal').modal('toggle');console.log(this) $('' + ui.position.top + '
' + ui.position.left + '
').appendTo(this); } }); var plus = 0; $('#' + value).droppable({ //放置被拖放元素的容器 accept : '.' + value + '-button',//仅允许符合适配器的元素激活拖放的事件 drop : function(event, ui) { //当一个被允许(accept)的可拖动元素移动并覆盖可拖放元素松开鼠标时激活 plus++; //落下时生成一个div放在picture1中 var 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 = $(' ').appendTo(div).bind('dblclick', function() { $('#operateModal').modal('toggle'); }); var divInput = $(' ').insertAfter(imgButton);//divInput在后 var input = $('').appendTo(divInput).focus().bind('click', function() { $('#operateModal').modal('toggle'); }); $('').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'); //删除符号 $('').css("width",width2); $('').css("background-size",width2); $('').css("left",width3+"px"); imgButton.css("height",height1+'px'); imgButton.css("line-height",height+'px'); $(".listContainer li").css("height",height1+'px'); $('').css("height",height1+'px'); $('').css("background-size",height1+'px'); } }); $(' ').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)); 