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 是否加载标记 -

jQueryNotes仿QQ空间添加标记的更多相关文章

  1. 仿QQ空间和微信朋友圈,高解耦高复用高灵活

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...

  2. 仿QQ空间动态界面分享

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...

  3. Fragment,仿QQ空间

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451          在今天的这篇文章当中,我依然会以实战加理论结合 ...

  4. iOS传感器集锦、飞机大战、开发调试工具、强制更新、Swift仿QQ空间头部等源码

    iOS精选源码 飞机大作战 MUPhotoPreview -简单易用的图片浏览器 LLDebugTool是一款针对开发者和测试者的调试工具,它可以帮... 多个UIScrollView.UITable ...

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

    仿QQ空间右下角工具浮动块 <style type="text/css"> .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text { ...

  6. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  7. QQ空间添加背景音乐

    QQ空间背景音乐方式 1.QQ音乐添加背景音乐一种是开通绿砖[有矿的忽略此条]2.QQ空间添加网络音乐的方法步骤:1.首先,需要先下载好想要音乐作为QQ空间背景音乐的歌曲文件(建议为MP3格式)[我这 ...

  8. android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片,上拉回弹 上拉滚动顶部title 颜色渐变

    首先要知道  自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...

  9. mui开发app之多图压缩与上传(仿qq空间说说发表)

    欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...

随机推荐

  1. asp.net开发中遇到的奇葩bug及解决办法(会持续更新。。。)

    1,不知道你们遇没遇到过,在vs2010或更高版本上运行程序的时候,完全没问题,放在IIS中出现了问题,就比如左侧是菜单项,点击菜单右边显示,如果菜单链接是这样:content.aspx,而另一个链接 ...

  2. hostapd与wpa_supplicant

    hostapd与wpa_supplicant hostapd hostapd includes IEEE 802.11 access point management (authentication ...

  3. 7 -- Spring的基本用法 -- 4...

    7.4 使用 Spring 容器 Spring 有两个核心接口:BeanFactory 和 ApplicationContext,其中ApplicationContext 是 BeanFactory ...

  4. OpenBSD内核之引导PBR

    OpenBSD引导的第二部PBR,也是活动分区的一个扇区的代码,由第一步的MBR加载到0x7C00处,manpage里详细的讲解了过程和大致实现 biosboot(8) (http://man.ope ...

  5. UI测试 错题分析

    从服务器端获取的json对象,可以直接访问对象中的属性 该属性的作用就是C text属性显示节点文本,state属性默认为open 看错行  不能用 ' ' 包裹 state:节点状态,'open' ...

  6. Android开发--ListView的应用

    1.简介 ListView用于以列表的形式展示数据.它在装载数据时,不能使用ListView类的add()等相关方法添加,而要借助Adapter对象进行添加.另外,由于 系统提供的Adapter往往不 ...

  7. jfinal基本应用 --报主键重复

    在使用jfinal 的Model过程中有一个很怪异的问题,发布到服务器上,只要是往表中添加字段,就报主键重复. 1.我添加表的时候调用了 public void create(Map map){ St ...

  8. 3level_menus

    # encoding: utf-8 # Creator:耿亚月 Creation time:2017-1-2 # Modifier:耿亚月 Modification time:2017-1-2 #输入 ...

  9. Adb refused a command 解决方法

    原文:How To Fix Android Error Adb Refused A Command 地址:http://downloadfixit.com/android-error-adb-refu ...

  10. 实验一 DOS命令解释程序的编写

    一.目的和要求 1. 实验目的 (1)认识DOS: (2)掌握命令解释程序的原理: (3)掌握简单的DOS调用方法: (4)掌握C语言编程初步. 2.实验要求 编写类似于DOS,UNIX的命令行解释程 ...