前言
最近在写一个项目,正好在做标记这一块,所以就把它记录下来,供大伙分享分享,如果有什么指教的地方,请发送邮件到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);
三、总结
由于代码过多不一一在这里说明,代码里面也有注释。如果有疑问的,可以发邮箱给我,大家一起商讨,共同进步!
原来自己只注重去怎么做东西,一直都没有记录多少,现在看来要慢慢积累才行,开始记录一些东西可能有不好的地方,请大家多多指教!
下载地址:猛戳这里