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',}); |
