IT技术 – 第 8 页

元素到网页顶部距离计算方法

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

先来看看这个来着作者lisatisfy的方法:

function getAbsPoint(e) {
    //再封装个函数吧。传进来的e可以是字符串类型（即id）,也可以是htmlElement对象。觉得getEL是个累赘的话，就把它删除掉。
    e = getEL(e);
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while (e = e.offsetParent) {
    x += e.offsetLeft;
    y += e.offsetTop;
    }
    return {
    "x": x,
    "y": y
    };
}
//使用getEL，不用$，避免冲突。
function getEL(id) {
    if (typeif == "undefined") {
    return null;
    }
    if (typeof id == "string") {
    return document.getElementById(id);
    }
    return id;
}

这个的确不错,但是有一些缺陷.我也给作者留言了.并指出了可能出现的问题(当父级多个为相对定位时计算会出现问题,,,以及元素本身的边框值无法计算进去).不过思路是很好的,通过计算与父级层的距离不断计算叠加高度获取最终值.我的表达可能不够清晰,建议自己用这个js写个demo测试.

继续阅读“元素到网页顶部距离计算方法”

JSP循环中为变量名赋值一个变量名?

标题我也不知道怎么说的好.不过还是得描述一下:

在一个三次循环的代码内,我新建一个变量,让每次循环,这个变量的名称都不同,而且三个变量的值也不同.如何才能最简单的写出来呢?

先来看看一段错误的(天真的代码):


<%@ page language="java" contentType="text/html; charset=gbk"
 pageEncoding="GBK"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
</head>
<body>
<c:set var="arry">aaa|6,bbb|6,ccc|4</c:set>
<c:forTokens var="item" items="${arry}" delims="," varStatus="vs">
 <c:set var="index" value="${vs.count}"></c:set>
 <c:set var="tit">${fn:split(item,'|')[0]}</c:set>
 <c:set var="num">${fn:split(item,'|')[1]}</c:set>
 <c:set var="p${vs.count} }">
 name: ${tit}, number: ${num} <br />
 </c:set>
</c:forTokens>
${p1}${p2}${p3}
<!--
期望输出
栏目名称: 评测, 该栏目输出文章数量为6
栏目名称: 导购, 该栏目输出文章数量为6
栏目名称: 文化, 该栏目输出文章数量为4
-->
</body>
</html>

当然上面肯定不能输出成功的.根本不能在c:set内创建一个含有变量的变量名~~var=”p${vs.count}”~~!

所以我只好改成下面这段:


<%@ page language="java" contentType="text/html; charset=gbk"
 pageEncoding="GBK"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
</head>
<body>
<c:set var="arry">aaa|6,bbb|6,ccc|4</c:set>
<c:forTokens var="item" items="${arry}" delims="," varStatus="vs">
 <c:set var="index" value="${vs.count}"></c:set>
 <c:set var="tit">${fn:split(item,'|')[0]}</c:set>
 <c:set var="num">${fn:split(item,'|')[1]}</c:set>
 <c:set var="p">
 name: ${tit}, number: ${num} <br />
 </c:set>
 <c:if test="${vs.count == 1}">
 <c:set var="p1" value="${p}"></c:set>
 </c:if>
 <c:if test="${vs.count == 2}">
 <c:set var="p2" value="${p}"></c:set>
 </c:if>
 <c:if test="${vs.count == 3}">
 <c:set var="p3" value="${p}"></c:set>
 </c:if>
</c:forTokens>
${p1}${p2}${p3}
</body>
</html>

那么很显然这段代码很臃肿,而且适用条件很有限,我认为在循环次数小于或等于3的情况下或许可以考虑,若是有5条甚至更多的时候,那么写这么多判断不如直接给每个变量进行赋值,那么我最近问了一些朋友,却找不出来更好的解决办法.今天的思考暂时告一段落.下次我来分享一些关于jstl的资料吧.

其他关于jstl学习资料请看: JSTL相关资料手册打包学习及研究

wordpress高亮插件Highlight.js手动添加及使用说明

使用WORDPRESS已经有很多年了,作为一个以技术内容为主的网站,经常会在文章内引用到各种语法的代码,在wordpress插件管理中,我们同样能够找到很多关于语法高亮的插件,有的十分完美,体积却异常庞大,比如我之前使用的Crayon Syntax Highlighter,若果博主们对自己的服务器很有信心,又喜欢强大的配置管理,这款插件实在是省事,可是我总觉过于臃肿,因为很多功能用不到,于是后来我找到了另一个插件SyntaxHighlighter Evolved,这款插件相对来讲很简洁,并且它所使用的高亮JS是很多大型网站都在用的,可是不知道为什么我这里看起来感觉怪怪的,并且它使用起来需要用到类似[html][/html]的标签,如果一旦放弃使用这个插件,恐怕就杯具了.虽然之前经过慎重考虑,选用了此插件,但是高亮效果感觉并不满意,最终寻找到了或许更好的或说更适合我的”高亮插件”–Highlight.js(其实wordpress里面有个wp-highlight.js的插件不知道是不是这个js,我没装,只是看了下,其实也是有下文提到的问题的.而且还不精简,所以我就决定手动添加)!

今天我就来简单介绍一下如何使用这个Highlight.js(如果喜欢自己琢磨,可以直接访问官方网站highlight.js查看相关说明)

当然我也是看了官方文档说明,总结给懒人看的.

本地测试

一. 准备必要文件

既然是使用它,那必须是需要一个highlight.js了,这个js可以自定义生成,这一点非常适合我,毕竟我只是一个小小小小的前端工作者,我只需要高亮显示html,css,js,json,最多加个php,sql了.于是,在这里,自定义配置这个js–Custom package,此处勾上自己需要的,然后点击Download按钮,很快一个zip文件就下载好了.

继续阅读“wordpress高亮插件Highlight.js手动添加及使用说明”