zoukankan      html  css  js  c++  java
  • 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/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 是否加载标记 -
  • 相关阅读:
    第03组 团队git现场编程实战
    第二次结对编程作业
    团队项目-选题报告
    第一次结对编程作业
    第一次编程作业
    软件工程第一次作业
    第09组 团队Git现场编程实战
    第二次结对编程作业
    团队项目-需求分析报告
    团队项目-选题报告
  • 原文地址:https://www.cnblogs.com/galal/p/6033538.html
Copyright © 2011-2022 走看看