jQuery插件综合应用(二)文字为主的页面
一、介绍
文字内容是每个网站都有的内容,网站在展示文字内容时,总是比图片、视频等富媒体内容要难一些,因为富媒体容易被用户接受。尤其是越多的文字内容越难以被用户通篇的阅读,跳跃式阅读往往是阅读的主要方式。 那么做为站长的我们,该如何使用户轻松阅读我们写的文章,也是非常重要的事情,因为我们发布一篇文章,目的是为了供网友阅读,产生共鸣。如果发布一篇文章没人看,或者看完了也不知道文章在说些什么,那发布文章也没有意义。
为了使用户轻松阅读文章,改进的方面主要有以下3点。1)文章的选题,做为开发人员,可以选择 工作中遇到或解决的问题,或学习的内容做为文章的主题。2)写作技巧,怎样写文章,写文章注意的事项,从小在语文课中学习的写作技巧。3)文章的布局(排版),本文的主要内容。书面文章可能千篇一律,文字基本也就几种格式如宋体、仿宋体等,行距固定,字体大小也基本固定,颜色也基本以黑色为主(彩色图书除外)。
而在博客中发布文章,我们可以合理的毫无限制的使用文字的字体、大小、颜色等,也可以在文章中添加图片、视频等信息。我们通过使用html+css+js可以提供更好地阅读体验。
而本文主要讲解通过html+css提供文章页面布局,jquery插件提供丰富的阅读体验。
在说明实现的功能之前,先以图书的形式进行说明。图书是相关文章的汇总,对我们阅读者来说,最主要的内容有:1)目录,可能是翻阅一本书时最先浏览的地方。方便我们知道图书的内容如何组织,也方便我们跳跃式的阅读。2)内容,涉及到具体的知识和操作。3)引用和术语解释,尤其是翻译的图书,在图书的最后或每章的后面都有引用或术语说明,以附录的形式表示。当然图书还有前言、作者介绍等说明,但重要性相对低一些。所以在本文中只实现目录、内容和引用术语说明3个功能。
二、使用的插件
目录:
我们在发布文章时,如果能够合理的使用h2标记表示”章“、h3标记表示”节“。那么我们就可以用js遍历body,提取出全部的h2,h3形成文章的“章-节”。在本文只是测试jquery插件的综合应用,所以目录是人工输入的。
然后我们使用scrolltofixed,scrollTo两个插件实现目录固定、内容滚动,向用户提供跳跃式阅读的功能。
内容:
对设置的关键词以链接的方式显示,如网站设置的分类,点击关键词链接,跳转到相应的分类。以遍历的方式寻找文章中的关键词,加链接(不遍历代码中的,如type=’text/javascript’,文章中出现的’javascript’关键词加链接,代码中的不予添加)。
引用和术语解释:
使用cluetip插件直接在文章中以提示框的形式对术语进行解释。
插件的使用说明可以看下面的文章
网站开发常用jQuery插件总结(13)定位插件scrollto
网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed
网站开发常用jQuery插件总结(六)关键词说明插件cluetip
三、插件实现的功能
scrolltofixed插件:
页面滚动时固定“目录”的位置。
scrollTo插件:
滚动到指定元素的位置,按“目录”可进行跳跃式阅读。
cluetip插件:
对术语或引用进行说明。
backstretch插件:
添加页面(body)和头部(header)的背景,只是为了增加页面美观,在选择背景图片时,对于图片的要求是质量越高越好(如清晰度,图片大小等)。backstretch插件只能适当使用,如果设置的背景图片过大,加载会非常缓慢,如果图片太小,背景模糊甚至变形(本文只是演示插件的使用,图片来自于网络)。使用说明可以看 网站开发常用jQuery插件总结(七)背景插件backstretch
四、实现流程
页面样式:
主要用于定义页面居中显示、双列、边距、字体格式、大小等。具体信息看“测试页面”。
插件的样式:
主要定义了cluetip插件样式,修改了插件中的jquery.cluetip.css文件,具体信息看测试文件。scrolltofixed,scrollto使用过程中,无需定义
js编码: 操作主要涉及到 设置透明度,点击“目录”链接时,禁止回滚操作
$("#wrap").css({ opacity: .86 }); //透明度
$('#left a').attr('href','javascript:void(0)'); //禁止回滚
backstretch插件设置背景
//背景图片
$.backstretch(["http://1100w.com/ref/backstretch/bg.jpg"]);
//头部图片,设置了两张图片,切换显示,间隔时间为4000毫秒
$("#header").backstretch(["http://1100w.com/ref/backstretch/b.jpg","header2.jpg"],{duration:4000});
scrolltofixed插件固定元素 ,固定文章的”章与节”
$('#articleinfo').scrollToFixed();
scrollTo插件滚动到指定元素
$('#left li > a').click(function(){
var id='#h'+$(this).attr("id");
$.scrollTo(id,800);
});
遍历关键词 ,为关键词添加链接。如在本例中对关键词jquery,css,插件,javascript添加了链接,使用正则忽略关键词的大小写。
function KeywordAddLink(json) {
$.each(json,function(key, value) {
if(json[key] instanceof Object){
TraversalJson(json[key]);
}else{
$('.box p').each(function(){
var reg=new RegExp(key,'ig');
$(this).html($(this).html().replace(reg, '<a href="'+json[key]+'">'+key+'</a>'));
});
}
});
}
cluetip插件为术语添加说明,说明的术语有 排版 、富媒体
function TermInfo(json){
$.each(json,function(key, value) {
$('.box p').each(function(){
var reg=new RegExp(key,'ig');
$(this).html($(this).html().replace(reg, '<a href="#" title="'+key+'|'+json[key]+'" class="term">'+key+'</a>'));
});
});
}
$('.box a.term').cluetip({
splitTitle: '|',
sticky: true,
closeText: '<img src="http://1100w.com/ref/cluetip/cross.png" alt="关闭" />',
closePosition: 'title',
dropShadow: false,
positionBy: 'mouse'
//truncate: 60
});
本例使用的数据,在寻找关键词和术语时,使用的是两个json数据。
var keywords={'jquery':'http://www.1100w.com/category/jquery/','css':'http://www.1100w.com/category/css/','插件':'http://www.1100w.com/tag/jquery%e6%8f%92%e4%bb%b6/','javascript':'http://www.1100w.com/category/javascript/'};
var terms={'排版':'在固定版面内,排版摆置各种不同型态的数据,如数字、文字、表格、图形和图像等等,以最合适的方法呈现。印刷品中的版面安排,网页文案的编排,若要引人注意和阅读上的舒适,皆应留意排版方面的问题。','富媒体':'富媒体包括多媒体(二维和三维动画、影像及声音)。它包括HTML、Java scripts, Interstitial间隙窗口,Microsoft Netshow、RealVideo,和RealAudio,Flash等等,随着技术的进步,名单可能会进一步加长。'};
五、测试环境
ie8以上浏览器、chrome版本 29.0.1547.76 m、firefox12.0测试通过
测试地址:http://1100w.com/ref/p/page.html
jQuery插件综合应用(二)文字为主的页面的更多相关文章
- jQuery插件综合应用(三)发布文章页面
一.使用的插件 一个折叠的功能导航,由Akordeon插件实现.Nanoscroller插件与Tagit插件主要用于美化页面.这里只是测试,其实还可以综合使用其它的插件,例如将Akordeon插件换成 ...
- jQuery插件综合应用1
jQuery插件综合应用(一)注册 一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQu ...
- jQuery插件综合应用(一)注册
一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQuery插件的使用非常简单,如果只按照jQ ...
- jQuery插件综合应用(四)头像设置
一.操作流程 会员点击头像设置,弹出一个层,在层中,有上传图片的按钮,用户点击按钮上传图片,图片在服务器端按大小压缩保存(方便剪切).保存后,在前端显示,然后用户可修剪图片.选择图片区域,点击提交,保 ...
- jquery插件生成简单二维码
除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...
- jQuery插件之路(二)——轮播
还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了 ...
- 2014年50个程序员最适用的免费JQuery插件
有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎 ...
- 程序员们必备的10款免费jquery插件
本周带来10款免费的jquery插件.如果你也有好的作品,欢迎分享到社区中来,在得到帮助的同时,也能与更多人分享来自你的作品. jQuery导航菜单置顶插件 - stickyUp . 在线演示 sti ...
- 七个帮助你处理Web页面层布局的jQuery插件
1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可 ...
随机推荐
- PHP两个字符串比较(人为出错),两字符串类型和数据表面相等,但strcmp()结果不为0
PHP中,比较两个字符串是否相等用:strcmp(): PHP strcmp() 函数 PHP String 函数 定义和用法 strcmp() 函数比较两个字符串. 该函数返回: 0 - 如果两个字 ...
- Spark RDD/Core 编程 API入门系列 之rdd实战(rdd基本操作实战及transformation和action流程图)(源码)(三)
本博文的主要内容是: 1.rdd基本操作实战 2.transformation和action流程图 3.典型的transformation和action RDD有3种操作: 1. Trandform ...
- linux使用FIO测试磁盘的iops 【转载】
linux使用FIO测试磁盘的iops 2013-09-23 10:59:21 分类: LINUX FIO是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括 ...
- c#类的初始化顺序
本文转载:http://www.cnblogs.com/ybhcolin/archive/2010/09/24/1834219.html c#类的初始化顺序 类在初始化时的执行顺序,依次如下: 1: ...
- [Oracle] - 性能优化工具(1) - AWR
AWR快照 默认情况下,Oracle每隔一小时会自己主动产生一个快照,保存近期8天的快照. 我们能够通过例如以下语句获得产生快照的时间间隔和保存的天数: SYS@orcl(lx15)> sele ...
- 安装Win7和Ubuntu12.04双系统后,意外删除Ubuntu12.04引导文件,出现error:unknown filesystem;grub rescue>错误的解决方案
很久之前在Win7基础上安装了Ubuntu12.04系统,采用硬盘安装的方法.分了1个10G的硬盘分区F盘用于存放Ubuntu12.04的引导文件,其实完全可以制作一个Ubuntu12.04的U盘启动 ...
- 基于HBase0.98.13搭建HBase HA分布式集群
在hadoop2.6.0分布式集群上搭建hbase ha分布式集群.搭建hadoop2.6.0分布式集群,请参考“基于hadoop2.6.0搭建5个节点的分布式集群”.下面我们开始啦 1.规划 1.主 ...
- window mac iPhone 三种比较相似的字体
win: 华文黑体 mac:stheiti iphone:heitisc-light heitisc-medium
- C++数据结构和算法每天一练(线性表)
#include <iostream> using namespace std; class ArrayLinerTable { public: void InitLine ...
- iOS 网络编程:socket
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...