最近几天没有更新文章,有点小忙!呵呵,不说废话,直接进入正题。
今天主要说的是,如何在图片上添加标记(一个或多个)。从网上搜到很多的例子,总体来说,感觉这个很不错!!
我就简单说一下这个标记是怎么存储的!!首先我们放到php的运行环境下,这个index.html是调用notes这个js的,代码:$('.jquery-note_1-1').jQueryNotes({ operator: 'notes.php', //要提交到的文件 maxNotes: 10, //最多显示标记的个数 allowDelete: false, //是否允许删除标记 allowEdit: false, //是否允许编辑标记 allowLink: false, //标记是否有链接 allowAdd: false, //是否允许添加标记 allowHide: false, //是否隐藏标记 });
当我添加标记成功之后,提交到 notes.php,数值会变成json格式,这时候是调用本身的notes.clss.php里面的某个函数,写入到文件中!(下面有例子可以下载看下)
题外:如果想存入数据库,那咱们把写入文件的那步改写成链接数据库就可以了。如果大家看的不是很清楚,可以给我留言或者去看下 官方网站。
注:我在使用的过程中,添加notes时在谷歌浏览器下可以移动到图片的外面。经过排查问题出现在样式上面(自带样式)。解决办法:打开css/style.css文件,找到.jquery-notes-container{ 这行(行数:33),把.jquery-notes-container .notes { position:relative; } .jquery-notes-container .notes img { position:relative; }
这几行都删除,并且在jquery-notes_1.0.8.js里面这一行:$('#jquery-notes_'+pointer+' .notes .select').css({ 加上position。 整体代码:$('#jquery-notes_'+pointer+' .notes .select').css({ width: ID.minWidth, height: ID.minHeight, left: position.left, top: position.top, cursor: 'move', position: 'absolute' }).draggable({ containment: 'parent', cursor: 'move' }).resizable({ containment: 'parent', minWidth: ID.minWidth, minHeight: ID.minHeight, maxWidth: ID.maxWidth, maxHeight: ID.maxHeight, aspectRatio: ID.aspectRatio, handles: 'ne, se, sw, nw' });