jquery 完整的标记插件

前言

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

一、

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

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

首先先来看几张效果图：

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: '',//添加url
getUrl: '',//加载url
delUrl: '',//删除url
editUrl: '',//编辑url
showLabelId:null,//默认显示的标记ID
data:{}//额外的提交后台数据

3、核心函数说明

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

//初始化容器
_setContainer(this, pointer);

//设置属性
_getProperties(pointer);

//配置转换
_configSettings(pointer);

//创建容器
_createHtml(pointer);

//后台加载标记
_getNotes(pointer);

三、总结

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

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

下载地址：猛戳这里