jquery-notes有以下特点：
- 支持添加备注图像
- 丰富的API
- 支持标记伸缩
- 支持更改主题
- 支持图片标记添加链接
- 不需要数据库
HTML
首先在页面上放置一张添加标志的图片
<div class="samples-box clearfix">
<img src="samples/sample_1.jpg width="333" height="500" class="jquery-note_1-2"
/>
</div>引入jquery和jquery-notes相关组件
<link rel="stylesheet" title="Standard" href="jquery-notes_css/style.css"
type="text/css" media="all" />
<!--[if lte IE 8]>
<link rel="stylesheet" title="Standard" href="jquery-notes_css/lteIE8.css"
type="text/css" media="all" />
<![endif]-->
<script type="text/javascript" src="jquery-notes_js/jquery.js">
</script>
<script type="text/javascript" src="jquery-notes_js/jquery-ui.js">
</script>
<script type="text/javascript" src="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'
});
});| 参数 | 描述 | 默认值 |
| operator | 远程加载列表url | - |
| maxNotes | 最大标记数量 | - |
| minWidth | 最小标记宽度 | - |
| minHeight | 最小标记高度 | - |
| allowAdd | 是否允许添加标记 | - |
| allowEdit | 是否允许编辑标记 | - |
| allowDelete | 是否允许删除标记 | - |
| allowHide | 是否允许隐藏标记 | - |
| allowLink | 是否允许添加链接 | - |
| loadNotes | 是否加载标记 | - |