javascript - Select box to appear inside jQuery Dialog on image click -
i trying modify example http://waynegm.github.io/imgnotes/examples/basic_interactive.html# in order select option appear inside dialog box when user clicks on image. code places marker on area user selects when in edit mode , opens dialog box allowing them enter text, options save / cancel. inside dialog box want change textarea select list like:
<select> <option value="head">head</option> <option value="leftarm">left arm</option> <option value="rightarm">right arm</option> <option value="leg">leg</option> </select> it seems should simple change, have made others samples simple on image click makes drop down appear. example has else need options delete , recording co-ords of place marker. current html:
<html> <head> <title>jquery imgnotes - interactive base</title> <style type="text/css" media="all">@import "css/marker.css";</style> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" media="screen"> <script type="text/javascript" src="src/imgnotes.js"></script> </head> <body> <div id="imgdiv" style="text-align: center"> <img id="image" src="image/personsit.jpg" style="border: 30px solid #ccc; padding:20px;" width=400/> <br/> <button id="toggleedit">edit</button> <button id="export">export</button> </div> <div id=txt></div> <script type="text/javascript"> ;(function($) { $(document).ready(function() { var $img = $("#image").imgnotes(); //$img.imgnotes("import", [ {x: "0.5", y:"0.5", note:"afl grand final trophy"}, // {x: "0.4", y:"0.269", note: "shoulder"}, // {x: "0.824", y: "0.593", note: "fluffy microphone"}]); var $toggle = $("#toggleedit"); if ($img.imgnotes("option","canedit")) { $toggle.text("view"); } else { $toggle.text("edit"); } $toggle.on("click", function() { var $this = $(this); if ($this.text()=="edit") { $this.text("view"); $img.imgnotes("option", "canedit", true); } else { $this.text('edit'); $img.imgnotes('option', 'canedit', false); } }); var $export = $("#export"); $export.on("click", function() { var $table = $("<table/>").addclass("gridtable"); var notes = $img.imgnotes('export'); $table.append("<th>x</th><th>y</th><th>note</th>"); $.each(notes, function(index, item) { $table.append("<tr><td>" + item.x + "</td><td>" + item.y + "</td><td>" + item.note + "</td></tr>"); }); $('#txt').html($table); }); }); })(jquery); </script> </body> </html> imgnotes.js file
;(function($) { $.widget("wgm.imgnotes", { options: { zoom: 1, zoomstep: 0.1, zoomable: true, canedit: false, vall: "middle", hall: "middle", /* * default callback create marker indicating note location * see examples more elaborate alternatives. */ onadd: function() { this.options.vall = "bottom"; this.options.hall = "middle"; return $(document.createelement('span')).addclass("marker black").html(this.notecount); }, /* * default callback when marker clicked , widget has canedit = true * opens dialog textarea write note. * see examples more elaborate alternative includes wysiwyg editor */ onedit: function(ev, elem) { var $elem = $(elem); $("#dialog-2").remove(); return $('<div id="dialog-2"></div>').dialog({ title: "body parts", resizable: false, modal: true, height: "300", width: "450", position: { my: "left bottom", at: "right top", of: elem}, buttons: { "save": function() { var txt = $('textarea', this).val(); // put editied note data area of element // important step included in custom callback implementations $elem.data("note", txt); $(this).dialog("close"); }, "delete": function() { $elem.trigger("remove"); $(this).dialog("close"); }, cancel: function() { $(this).dialog("close"); } }, open: function() { $(this).css("overflow", "hidden"); var textarea = $('<textarea id="txt" style="height:100%; width:100%;">'); $(this).html(textarea); // note text , put textarea editing textarea.val($elem.data("note")); } }) }, /* * default callback when marker clicked , widget has canedit = false * opens dialog displaying contents of marker's note * see examples alternatives such using tooltips. */ onshow: function(ev, elem) { var $elem = $(elem); $('#notedialog').remove(); return $('<div id="notedialog"></div>').dialog({ modal: false, resizable: false, height: 300, width: 250, position: { my: "left bottom", at: "right top", of: elem}, buttons: { "close" : function() { $(this).dialog("close"); } }, open: function() { // note text , put textarea editing $(this).html($elem.data("note")); $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }, close: function() { $(this).dialog("destroy"); } }); }, /* * default callback when markers repainted */ onupdatemarker: function(elem) { var $elem = $(elem); var $img = $(this.img); var pos = $img.imgviewer("imgtoview", $elem.data("relx"), $elem.data("rely")); if (pos) { $elem.css({ left: (pos.x - $elem.data("xoffset")), top: (pos.y - $elem.data("yoffset")), position: "absolute" }); } }, /* * default callback when image view repainted */ onupdate: function() { var self = this; $.each(this.notes, function() { self.options.onupdatemarker.call(self, this); }); } }, _create: function() { var self = this; if (!this.element.is("img")) { $.error('imgnotes plugin can applied img elements'); } // note/marker elements self.notes = []; // number of notes self.notecount = 0; // original img element self.img = self.element[0]; var $img = $(self.img); // attach imgviewer plugin zooming , panning custon click , update callbacks $img.imgviewer({ onclick: function(ev, imgv) { if (self.options.canedit) { ev.preventdefault(); var rpos = imgv.cursortoimg(ev.pagex, ev.pagey); if (rpos) { var elem = self.addnote(rpos.x, rpos.y); self._trigger("onedit", ev, elem); } } }, onupdate: function(ev, imgv) { self.options.zoom = imgv.options.zoom; self.options.onupdate.call(self); }, zoom: self.options.zoom, zoomstep: self.options.zoomstep, zoomable: self.options.zoomable }); $img.imgviewer("update"); }, /* * remove plugin */ destroy: function() { this.clear(); $(this.img).imgviewer("destroy"); $.widget.prototype.destroy.call(this); }, _setoption: function(key, value) { switch(key) { case 'vall': switch(value) { case 'top': break; case 'bottom': break; default: value = 'middle'; } break; case 'hall': switch(value) { case 'left': break; case 'right': break; default: value = 'middle'; } break; } var version = $.ui.version.split('.'); if (version[0] > 1 || version[1] > 8) { this._super(key, value); } else { $.widget.prototype._setoption.apply(this, arguments); } switch(key) { case 'zoom': $(this.img).imgviewer("option", "zoom", value); break; case 'zoomstep': $(this.img).imgviewer("option", "zoomstep", value); break; case 'zoomable': $(this.img).imgviewer("option", "zoomable", value); break; } }, /* * pan view centred @ given relative image location */ panto: function(relx, rely) { return $(this.img).imgviewer("panto", relx, rely); }, /* * add note */ addnote: function(relx, rely, text) { var self = this; this.notecount++; var elem = this.options.onadd.call(this); var $elem = $(elem); $(this.img).imgviewer("addelem",elem); $elem.data("relx", relx).data("rely", rely).data("note", text); switch (this.options.vall) { case "top": $elem.data("yoffset", 0); break; case "bottom": $elem.data("yoffset", $elem.height()); break; default: $elem.data("yoffset", math.round($elem.height()/2)); } switch (this.options.hall) { case "left": $elem.data("xoffset", 0); break; case "right": $elem.data("xoffset", $elem.width()); break; default: $elem.data("xoffset", math.round($elem.width()/2)); } $elem.click(function(ev) { ev.preventdefault(); if (self.options.canedit) { self._trigger("onedit", ev, elem); } else { self._trigger("onshow", ev, elem); } }); $elem.on("remove", function() { self._delete(elem); }); this.notes.push(elem); $(this.img).imgviewer("update"); return elem; }, /* * number of notes */ count: function() { return this.notecount; }, /* * delete note */ _delete: function(elem) { this.notes = this.notes.filter(function(v) { return v!== elem; }); $(elem).off(); $(elem).remove(); $(this.img).imgviewer("update"); }, /* * clear notes */ clear: function() { var self = this; var total = self.notes.length; ( var = 0; < total; i++ ){ var $this = self.notes[i]; $this.off(); $this.remove(); } self.notes=[]; self.notecount = 0; }, /* * add notes javascript array */ import: function(notes) { var self = this; $.each(notes, function() { self.addnote(this.x, this.y, this.note); }); $(this.img).imgviewer("update"); }, /* * export notes array */ export: function() { var notes = []; $.each(this.notes, function() { var $elem = $(this); notes.push({ x: $elem.data("relx"), y: $elem.data("rely"), note: $elem.data("note") }); }); return notes; } }); })(jquery); i appreciate if me out.
Comments
Post a Comment