大家肯定都有这样的体验,正当我们在专注的阅读某位大神的最新大作的时候,一个电话过来,当我们接完电话的时候,发现自己迷失在文章中,于是自己再从某部分开始重新阅读。我相信很多人都有类似的糟糕阅读体验,而今天我们介绍的这款jQuery插件 - youRhere,将能够让你的用户在阅读文章过程中,解决这个继续阅读的问题。希望大家喜欢这个插件,个人觉得很不错!
主要特性
1.免费开源,自由下载,当然你去youRhere网站看不到jQuery下载地址,可以在本文演示下载地址
2.使用HTML5的本地存储API,需要你使用现代浏览器
3.支持“左到右“和“右到左“阅读
4.初次使用的向导
5.使用简单
6.支持多浏览器,IE,Firefox,Chrome,并且支持Chrome插件
7.10k的javascript,需要jQuery类库支持
如何使用
使用很简单,你可以直接在本文的演示下载地址下载,下载类库后,调用如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.yourhere.js"></script>
调用方法并且设置参数,如下:
$(document).ready(function(){
$('#gbin1demo').yourhere({
markerBackground:'url(images/marker.png) no-repeat center center',
markerWidth: '13px',
tempMarkerBackground: 'url(images/tempMarker.png) no-repeat center center',
markerLineBackground:'#CCC’
});
});
全部代码完成,这个jQuery的插件是不是很简单。
参数说明
参数名和缺省值,如下:
firstTimeWizard: true - 是否使用首次使用向导
useLocalStorage: true - 是否使用HTML5本地存储
autoScrollToMarker: true - 是否自动滚动标记
markerDirection: ‘left’ - 书签标记位置
tempMarkerBackground: ‘#b7b7b7’ - 选择行时悬浮的书签标记背景图片
markerLineBackground: ‘#FFF82A’ - 书签标记背景图片
markerBackgroundOpacity: ‘0.7’ - 背景图片透明度
markerBackground: ‘#000’ - 书签标记背景图片背景颜色
markerWidth: ‘5px’ - 书签标记宽度
supportedElements: ‘h1, h2, h3, h4, h5, h6, p, ul, li’ - 书签标记支持的元素
来源:一个帮助你提高阅读体验的jQuery页内书签插件 - youRhere