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', });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!