jquery-notes有以下特点：

• 支持添加备注图像
• 丰富的API
• 支持标记伸缩
• 支持更改主题
• 支持图片标记添加链接
• 不需要数据库

HTML

首先在页面上放置一张添加标志的图片

<div class="samples-box clearfix"> 
    <img src=http://www.mamicode.com/"samples/sample_1.jpg  width="333" height="500" class="jquery-note_1-2" 
    /> 
</div>

引入jquery和jquery-notes相关组件

<link rel="stylesheet" title="Standard" href=http://www.mamicode.com/"jquery-notes_css/style.css" 
type="text/css" media="all" /> 
<!--[if lte IE 8]> 
    <link rel="stylesheet" title="Standard" href="http://www.mamicode.com/jquery-notes_css/lteIE8.css" 
    type="text/css" media="all" /> 
<![endif]--> 
<script type="text/javascript" src=http://www.mamicode.com/"jquery-notes_js/jquery.js"> 
</script> 
<script type="text/javascript" src=http://www.mamicode.com/"jquery-notes_js/jquery-ui.js"> 
</script> 
<script type="text/javascript" src=http://www.mamicode.com/"jquery-notes_js/jquery-notes_1.0.8.js"> 
</script>

调用jquery-notes插件

$(function() { 
    $(‘.jquery-note_1-2‘).jQueryNotes({ 
        minWidth: ‘10%‘, 
        minHeight: 20, 
        aspectRatio: true, 
        helper: ‘helper-class‘, 
        allowLink: false, 
        dateFormat: ‘D.M.Y‘, 
        operator: ‘jquery-notes_php/notes.php‘ 
    }); 
});

jQueryNotes仿QQ空间添加标记