jQuery实用HTML元素热点标记插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

jquery-hotspot是一款在然后元素上创建和显示热点标记的jQuery插件。该热点标记有两种模式：admin模式和display模式。admin模式下一行可以在所需的元素上创建热点标记。display模式只能够用于显示热点标记。热点标记是可以完全自定义的，一行可以通过CSS来控制热点标记的样式。

使用方法

使用该热点标记插件先要引入jQuery和jquery.hotspot.js及jquery.hotspot.css文件。

<link rel="stylesheet" type="text/css" href="css/jquery.hotspot.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hotspot.js"></script>

HTML结构

将需要制作热点标记的元素使用另一个块级元素进行包裹。

<div id="theElement">
    <img src="theImage.jpg" width="600" height="400">
</div>

后面会使用该包裹元素#theElement来调用插件。

注意：告别元素的position属性不需要设置为绝对定位，你可以按照下面的代码来设置：

#theElement {
    position: relative;
    display: inline-block;
}

Display模式

热点标记关联的数据可以直接通过插件参数来传递，也可以通过ajax来动态调用热点标记的数据。

在热点标记互动中有三个可用的参数： hover， click 和 none。

hover：热点标记关联的数据会在鼠标滑过热点时显示。
click：热点标记关联的数据会在鼠标点击热点时显示。
none：热点标记关联的数据将会静态显示，不受任何事件的影响。

已知坐标系时的基本调用

$('#theElement').hotspot(
    data: [
        { "x":288, "y":390, "Title":"The Title","Message":"Create the Message here" },
        { "x":143, "y":400, "Title":"jQuery Hotspot","Message":"This jQuery Plugin lets you create hotspot to any HTML element." }
    ],
    tag: 'img', //optional (default is img)
    interactivity: "hover", // options : click, none (default is hover)
    hotspotClass: 'Hotspot'
);

上面的data对象中可以有任意数量的属性，并且可以使用CSS来定义样式。tag变量用于决定热点标记的类型。hotspotClass是热点标记的class名称。可以通过下盖该class来修改热点标记的外观样式。

通过AJAX调用来附加数据

$("#theElement").hotspot({
    ajax: true, // Switching on the ajax
    ajaxOptions: {
        url: 'parse.php',
        type: 'GET',
        ...
    },
    interactivity: "hover" // options : click, none (default is hover)
});

热点标记的数据来自于服务器端的JSON格式数据。ajaxOptions对象可以用来修改HTTP的请求头。

Admin模式

标准调用

$("#theElement").hotspot({
    mode: "admin", // Switching to admin mode
    ajax: true, // Turn on ajax
    ajaxOptions: {
        url: 'parse.php',
        type: 'POST',
        ...
    },
    interactivity: "hover" // options : click, none (default is hover)
});

这里ajax和ajaxOptions是必须的，用于在admin模式中创建热点标记内容并保存于服务器端。在一些不能使用AJAX的情况下，数据会被保存在浏览器的LocalStorage中。

关键特性

任何数量的信息/节点都可以填充在单个的热点中。可以使用dataStuff参数来进行传递。默认情况先该参数有两个节点：标题和内容。

$("#theElement").hotspot({
    mode: "admin", // Switching to admin mode
    ajax: true, // Turn on ajax
    ajaxOptions: {
        url: 'parse.php',
        type: 'POST',
        ...
    },
    dataStuff: [
        {
            'property': 'Time',
            'default': '5:40am'
        },
        {
            'property': 'Date',
            'default': '12/11/2014'
        },
        {
            'property': 'Place',
            'default': 'Siberia'
        },
    ]
});

上面的dataStuff参数中的default属性在每次创建新的热点时都会被覆盖。

该插件在创建热点标记的线程中也提供了一些可用的回调函数。

$("#theElement").hotspot({
    mode: "admin", // Switching to admin mode
    ajax: true, // Turn on ajax
    ajaxOptions: {
        url: 'parse.php',
        type: 'POST',
        ...
    },
    afterSave: function(message) {
        alert(message);
    },
    afterRemove: function(message) {
        alert(message);
        window.location.reload();
    },
    afterSyncToServer: function(message) {
        alert(message);
    }
});

这些事件可以用来跟踪热点标记的创建过程。

该热点标记插件可以用于页面中任何数量的HTML标签中。要制作这种效果，可以使用LS_Variable变量来传递页面中元素标识符（每个元素必须是唯一的ID标识符）。这样做可以使插件在使用HTML5 LocalStorage是避免产生冲突。还有保存、删除和服务器同步按钮也必须使用唯一的标识符。

<div id="theElement-a">
    <img src="theImage-a.jpg" width="600" height="400">
</div>
<div id="theElement-b">
    <img src="theImage-b.jpg" width="600" height="400">
</div>

$("#theElement-a").hotspot({
    mode: "admin",
    ...
    LS_Variable: "HotspotPlugin-a",
    done_btnId: 'done-a',
    remove_btnId: 'remove-a',
    server_btnId: 'server-a',
});

$("#theElement-b").hotspot({
    mode: "admin",
    ...
    LS_Variable: "HotspotPlugin-b",
    done_btnId: 'done-b',
    remove_btnId: 'remove-b',
    server_btnId: 'server-b',
});