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. Nginx基础知识之————RTMP模块中的中HLS专题(翻译文档)

    一.在Nginx配置文件的RTMP模块中配置hls hls_key_path /tmp/hlskeys; 提示错误信息: nginx: [emerg] the same path name " ...

  2. 参考__MySql

    博客 三范式 事务隔离级别 列表

  3. ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    在安装好的MySQL服务器上,配置了环境变量之后,发现用mysql无法登录,报如题的错误,实在没有办法,决定用安全模式对root用户修改密码: 首先关闭正在运行的MySQL; 在一个终端窗口运行命令: ...

  4. Python之路 day2 字符编码及转换

    #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa import sys print("sys default encodin ...

  5. [WPF]ComboBox.Items为空时,点击不显示下拉列表

    ComboBox.Items为空时,点击后会显示空下拉列表: ComboBox点击显示下拉列表,大概原理为: ComboBox存在ToggleButton控件,默认ToggleButton.IsChe ...

  6. 【LeetCode】#7 Reverse Integer

    [Question] Reverse digits of an integer. Example: x = 123, return 321 x = -123, return -321 [My Solu ...

  7. 破解YunFile下载间隔10分钟/下载等待30秒

    [破解10分钟间隔] 可以采用断网重连等方法重新获取IP地址,就不用再等十分钟了 [破解30秒等待] 收藏一个书签,书签地址如下 javascript:var downpage_link = docu ...

  8. 关闭显示器API及命令

    window下命令powercfg /change "Home/Office Desk" /moniter-timeout-ac 1C#中实现[DllImportAttribute ...

  9. SQL Server数据库脚本备份与还原

    use[master]go /*完整--备份* backup 备份 * disk='E:\USERDB.bak' 磁盘,备份文件存放的路径* name='user' 备份显示的文件名称,可随意修改* ...

  10. 【基本技能篇】>>第3篇《暗时间_指导学习的方法论——心得》

    暗时间——指导学习的方法论 ——2016年2月11日 打造自己的核心竞争力:①专业领域技能:②跨领域的技能(解决问题的能力,创新思维,判断与决策能力,表达沟通能力等等):③学习能力,持续学习和思考新知 ...