jQueryNotes仿QQ空间添加标记

Posted Gala_L

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQueryNotes仿QQ空间添加标记相关的知识,希望对你有一定的参考价值。

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/javascriptsrc="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 是否加载标记 -

以上是关于jQueryNotes仿QQ空间添加标记的主要内容,如果未能解决你的问题,请参考以下文章

jsp实现仿QQ空间新建多个相册名称,向相册中添加照片

如何用react实现仿QQ空间拖拽模块

仿QQ空间送礼物功能

jsp实现仿QQ空间新建多个相冊名称,向相冊中加入照片

Html - 仿QQ空间右下角工具浮动块

仿QQ空间视差效果,ListView.setHeader( )