jquery 完整的标记插件

前言

最近在写一个项目，正好在做标记这一块，所以就把它记录下来，供大伙分享分享，如果有什么指教的地方，请发送邮件到[e-mail]

一、

现在对于静态的展示图片，而不对图片进行任何的操作，没有任何的交互已很少见了，对图片进行标记，现在很流行了，今天就给大家分享一下小弟的成果。对于标

记图片必须要完成几个动作，即添加标记、展示标记、删除标记、编辑标记

首先先来看几张效果图：

1、展示效果

2、添加效果

3、编辑效果

二、

标记插件需要jquery和jquery ui库的支持，jquery的功能就不用多说了，jquery ui的功能主要是起着，选择框的拖动和拉伸效果。

下面主要对源码做一个简单的介绍：

1、调用示例

$(function() {    $('.img').jQueryNotes({    loadNotes:false    });});

2、参数说明

minWidth: 30,//选择框最小宽度minHeight: 30,//选择框最小高度maxWidth: '',//选择框最大宽度maxHeight: '',//选择框最大宽度aspectRatio: false,allowAdd: true,//是否允许添加allowEdit: true,//是否可编辑allowDelete: true,//是否可删除allowHide: true,//是否可隐藏allowReload: true,//是否可重新加载hideNotes: false,//是否隐藏所有标记loadNotes: true,//是否可加载所有标记helper: '',//样式maxNotes: null,//最大标记限制titleLimit:7,//标题限制字数contentLimit:30,//内容的限制字数addUrl: '',//添加urlgetUrl: '',//加载urldelUrl: '',//删除urleditUrl: '',//编辑urlshowLabelId:null,//默认显示的标记IDdata:{}//额外的提交后台数据

3、核心函数说明

_initPlugin = function(){    ...}//初始化插件

//初始化容器_setContainer(this, pointer);//设置属性_getProperties(pointer);//配置转换_configSettings(pointer);//创建容器_createHtml(pointer);//后台加载标记_getNotes(pointer);

三、总结

由于代码过多不一一在这里说明，代码里面也有注释。如果有疑问的，可以发邮箱给我，大家一起商讨，共同进步！

原来自己只注重去怎么做东西，一直都没有记录多少，现在看来要慢慢积累才行，开始记录一些东西可能有不好的地方，请大家多多指教！

下载地址：猛戳这里