Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "jquery.picsign picture annotation components", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "jquery.picsign picture annotation components how to achieve" article.

1. Component dependency

Jquery

Bootstrap

Layer

Webui-popover

two。 Reference component files

3. Use

Add a DIV to the page

Initialize the component

$("# picsign") .picsign (option); / / option is a component parameter. For more information, please see option parameter description.

Option parameter description

Var option= {picurl: null,// Picture address signdata: [], / / initial data, details refer to basic data format editable: {/ / editable (default editable setting to false disables all edits) add: true,// can add update: true,// can modify del: true,// can delete move: true// is removable}, signclass: 'signdot',// callout style popwidth: 400 / / callout content display window width popheight: 247Gramplash / tagged content display window height inputwidth: 400Gramplash / tagging content editing window width inputheight: 247Grampash / tagging content editing window height beforeadd: function (data) {/ / method performed before adding and saving Return false blocking add}, onadd: function (data) {/ / add the completed method}, beforeupdate: function (data) {/ / the method executed before the modification is saved, return false block the modification}, onupdate: function (data) {/ / modify the completed method}, beforedel: function (data) {/ / the method executed before deletion and save Return false to block deletion}, ondel: function (data) {/ / delete the method to complete execution}}

Basic data format

[{left:'50%', top:'50%', msg:' this is the annotation information', signid:' this is the unique identifier of the annotation, the user does not need to assign a value, it is related to the logic of the component, please do not use this keyword'}]

The data added by the user must contain left, top, and msg attributes

Users can extend other attributes on their own

Special note: please do not add and use the signid keyword

Method call

$("# picsign") .picsign ('functionName',parameter); / / functionName is the name of the method and parameter is the parameter of the method. For more information, see method description

Method description

Get dimension data

Method name: getData

Parameter: none

$("# picsign"). Picsign ('getData')

Add dimension data

Method name: addSign

Parameter: basic data Json, whether to trigger events (default is true)

$("# div_picsign"). Picsign ("addSign", [{left:'50% floor, top:'10% floor, msg: "123"}, {left:'80% floor, top:'10% floor, msg: "456"}], true)

Toggle Dimension display statu

Method name: toggle

Parameter: none

$("# div_picsign") .picsign ("toggle")

Component destruction

Method name: destroy

Parameter: none

$("# div_picsign"). Picsign ("destroy") above is the content of this article on "how to implement the jquery.picsign image annotation assembly". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.