裁纸刀下 » 代码

简单、通用的JQuery Tab实现

小李刀刀 — Mon, 13 Apr 2009 03:35:34 +0000

网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，可是直到今天，网页设计中仍然是以至少1024x768 像素的支持为主，也就是说，每一屏页面只有区区 955x600像素的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基于 jQuery，但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。

最早的滑动门的技术，一般都是结合 onclick 或者 onmouseover 事件传递一个参数给 JS 函数，根据传递的参数来决定显示哪一个标签。比如：

function showTabs(n) {
  var tabsNumber = 3;
  for (i = 0; i < tabsNumber; i++) {
      if (i == n) {
          document.getElementById("tabPanel-" + i).style.display = "block";
      } else {
          document.getElementById("tabPanel-" + i).style.display = "none";
      }
  }
}

加入有这样的一个函数，就可以在tab的标题按钮中设置 onclick = “showTabs(1)”来设置第二块内容显示，而其它块隐藏。

这种方式最大的缺点是：

HTML代码和JS代码混合；
可扩展性差；

尽管可以通过window.onload绑定事件等方式来是实现JS代码从HTML中分离，也可以把函数改得更复杂以实现通用性。但是总的来说，还是很难做到一处定义到处引用。

后来随着各种JS类库的出现，更强大的Tabs出现了，最出名的就是jQuery UI中的tabs插件。一旦加载了jQuery框架和jQuery UI插件，那么要在页面中实现Tabs，就变得简单了许多。首先我们的页面中的Tabs代码这样写：

<div class="tabs">
    <ul>
        <li><a href="#panel-1">标签一a>li>
        <li><a href="#panel-2">标签二a>li>
    ul>
    <div id="panel-1">区域一div>
    <div id="panel-2">区域二div>
div>

注意：这里的代码非常干净，不含任何的JS代码或者与文档结构无关的定义。然后，在head区域，或者在页面任何地方增加一段js代码：

$(function() {
    $(".tabs").tabs();
});

就实现了Tabs功能，这行JS代码执行后，上面的HTML代码就会变成：

<div class="tabs">
    <ul class="ui-tabs-nav" jquery1239647486215="2">
        <li class="ui-tabs-selected"><a href="#panel-1" jquery1239647486215="8">标签一a>li>
        <li><a href="#panel-2" jquery1239647486215="9">标签二a>li>
        >ul>
    <div id="panel-1" class="ui-tabs-panel" jquery1239647486215="4">
        区域一
    div>
    <div id="panel-2" class="ui-tabs-panel ui-tabs-hide" jquery1239647486215="5">
        区域二
    div>
div>

结合我们自己编写的css，或者jQuery UI 自带的CSS，就可以实现滑动门效果。并且，由于jQuery的强大，我们可以在页面中放置多组滑动门，然后一次性设定。

要说明的是，这个地方由于只启用了jQuery UI 中的 Tabs 插件，因此生成的代码还是比较干净的，只增加了 ui-tabs-xxxx 这几个相关的css类。如果你同时包含了jQuery UI的其它插件，那么即使不启用，也会添加一堆的css定义。而且，jQuery UI Tabs 还提供了非常强大的控制功能，你可以动态地添加 tab，可以随意更改激活事件，可以定义切换效果，还可以设置默认激活状态和禁用等。

但是我在实际应用中遇到了一些问题，除了 jQuery UI 自带的js脚本很大，css不符合实际应用需求外，还有一个最大的问题，你可能已经注意到了，在作为导航的标签定义中，每个标签对应哪一个区域是用链接目标来定义的。比如标签一和

区域一

对应，如果你的标签和区域没有对应起来，绑定tabs()就不起作用了。

而且，这种方式来带来另一个麻烦，就是当我们需要给标签加上链接的时候，没办法加。即使你将标签的激活事件设置为onmouseover而不是onclick，链接也不能实现，因为链接用于指定目标了。这种需求在我们的实际应用中并不是不存在的。比如：

这两个图片中的tabs标签，都要添加到对应的新闻类别或者论坛板块的链接。这时候 jQuery UI的默认绑定就带来了麻烦。

其实分析一下，我们在实现滑动门的时候，用以下HTML结构就可以满足需要：

<div class="tabs">
    <ul>
        <li>标签一li>
        <li>标签二li>
    ul>
    <div>区域一div>
    <div>区域二div>
div>

借助 jQuery 库，我们可以通过 $(".tabs")找到要实现的标签，然后 .find("li") 来找到要添加事件的元素，绑定事件的时候，我们可以通过该元素在$(".tabs li")集合中的索引值来明确是哪一个标签被激活，然后对应索引值的panel显示。代码类似这样：

<script type="text/javascript">
    $(function() {
        $(".tabs").find("li").onmouseover(function(e) {
            if (e.target == this) {
                var tabs = $(this).parent().children("li");
                var panels = $(this).parent().parent().children("div");
                var index = $.inArray(this, tabs);
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
script>

这段代码只使用了两个css类来处理，并且，自动判断tabs和panels的对应状态，假如你有4个tab，但是只有前三个启用了，那么你只需要写三个panel就可以，第四个panel不存在，则第四个tab自动不生效。

在实际使用中，会遇到一个问题，一般我们会给tab中的文字加链接，那么当鼠标滑过这个tab的时候，如果指到了文字，那么激发事件的对象有可能是a元素而不是li元素，则事件就不能正确激发。所以我们改进代码如下：

<script type="text/javascript">
    $(function() {
        $(".ui-tabs-nav > li > a")onmouseover(function(e) {
            if (e.target == this) {
                var tabs = $(this).parent().parent().children("li");
                var panels = $(this).parent().parent().parent().children(".ui-tabs-panel");
                var index = $.inArray(this, tabs);
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
script>

与此对应的HTML结构是：

<div>
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-selected"><a href="/bbs">论坛新帖a>li>
        <li><a href="/blog">最新博文a>li>
    ul>
    <div class="ui-tabs-panel">
      
    div>
    <div class="ui-tabs-panel ui-tabs-hide">
      
    div>
div>

同时，我们有以下的css类定义：

.ui-tabs-nav
{
    /*导航容器定义*/
}
.ui-tabs-nav li
{
    /*默认标签样式*/
}
.ui-tabs-nav li.ui-tabs-selected
{
    /*激活的标签样式*/
}
.ui-tabs-panel
{
    /*默认的显示区域样式*/
}
.ui-tabs-hide
{
    display: none;
}

这样，就可以根据你的需要，结合自己的css，定制不同样式的滑动门了。把相应的js代码放到页面中，那么在页面里任何地方只要你按照HTML结构编写了一段html，这段html就会自动变成滑动门。而不用在每个页面里单独指定特定的selector来应用滑动门的tabs()方法。并且，根据需要给你的滑动门标签添加需要的链接，或者不要链接（href="#" 或者 href="javascript:void(0)"）。

这段滑动门代码只要具有jQuery core 就可以正常运行，不需要加载jQuery UI。非常简单，而且很通用，样式上喜欢怎么扩展都可以。

具体效果可以参见 http:/www.taihainet.com ，在台海网首页中，我一共应用了四个样式共九组滑动门，代码就只是上面给出的那一段。四个样式列举如下：

滑动门一：多个搜索表单，暂时只实现两个，后面三个由于没有对应的ui-tabs-panel，自动禁用，但是链接可以点击。

滑动门二：多块商务信息区域，其中第三个由于没有对应的ui-tabs-panel，自动禁用。

滑动门三：新闻栏目切换，标签中的文字链接到对应的新闻栏目。

滑动门四：论坛分板块帖子调用。标签中的文字链接到对应的论坛板块。

使用Google AjaxLib API托管的js库

小李刀刀 — Sun, 05 Apr 2009 23:53:42 +0000

本文简要介绍Google AjaxLib API，并以jQuery为例说明如何在自己的网页中引入由Google提供个CDN托管的jQuery库。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

现在很多人都已经开始习惯于基于各种各样的JS库来编写自己的Javascript，其中尤其以jQuery最多。别的不说，有了jQuery，至少让我们控制页面元素更加方便快捷，让我们在编写js的时候不需要过多地考虑浏览器特性问题了。

但是jQuery功能越强大，它本身的文件也越大。虽然如今的互联网带宽是越来越宽，速度是越来越快。但是做网页的却一个个越来越在意自己的页面大小、图片大小、css大小、js大小。其实相对于服务器的运行效率、机房带宽和线路品质，通过优化js、css和图片文件能挤出来的几百k尺寸的下载量，在下载速度的提高上实在是太有限了。不过话说回来，做开发的做设计的，就是要有这样的精神，才不会让自己的作品像微软的操作系统一样，越来越庞大。从15张软盘到半张CD，到一张CD，直到两张CD，最后一张DVD……

在我们的js中，最大的一般还是js库，毕竟具体的功能实现只需要写一点点代码而已。但是js库里那么多用到的没用到的东西，还是有点份量的。我们又想用，又嫌它大。怎么办呢？拆成很多个吧，多一个js还多一个并发连接呢…… 幸好，google挺够意思，号称“永久提供”常见js库，google的服务器和线路品质那自然是不在话下的。即提高了下载速度又减少了自己服务器的并发连接数。不用就是傻子了。

用起来也很简单，直接在网页里引用google服务器上的相关js文件就可以了。不过，如果引用多个js，就要插入多段的script。现在像我这样代码能少一个字算一个字的人不少。google也提供了相应的办法，那就是google load。我们只需要在页面里引用一个js文件，就可以根据需要实时加载用到的js库了。首先在页头部分加入以下这行代码：

<script type="text/javascript" src="http://www.google.com/jsapi">script>

这就足够了，google提供了以下这些js框架/库的API：

而且google的API中包括这些js框架/库的所有正式发布版。你可以根据自己的需要来选择。以jQuery为例，我们可以这样使用：

<script type="text/javascript">
    //google.load("jquery", "1.3.2");
    //]]>
script>

这样我们就从google的最近的CDN镜像上加载了jQuery 1.3.2版的js库，接下来就可以正常写js代码了。不过，即使是google的CDN镜像，下载也毕竟是需要时间的，万一代码库还没有下载完而浏览器已经解释到了下面的代码了怎么办？我们可以设定在js库加载完以后才开始执行js：

<script type="text/javascript">
    //google.load("jquery", "1.3.2");
    //加载完成后执行代码
     google.setOnLoadCallback(function() {
        $("body").html("Hello World!");
    });
    //]]>
script>

更多有关google jsapi的相关介绍和文档，可以参考： google AJAX 库 API 。

CSS居然可以这样用

小李刀刀 — Sun, 16 Apr 2006 01:59:00 +0000

睡觉前，NT给我发了两个网址，是老外的，那个家伙暴强，居然用纯CSS在页面上画出房子来，平面的、3D的，都画出来了。

看了一下他的CSS代码，一开始以为是这样用：

.class{
    width:100px;
    width:60px;
    height:200px;
    height:160px;
}

后来发现其实一些特殊图形的绘制跟上面的这个怪异的用法没关系，而是用边框来实现的，比如：

　　这三个形状除了Div，没有任何其它的元素或者文本，更不用说图形了。这是充分利用了border的显示特性。因为当我们同时设置四个方向的border时，浏览器自动会把交叉的部分叠加或者相互剪除。当border足够大的时候，我们就看到了上面这样的特殊效果。谁能想象到这是4个200像素的边框形成的效果呢？

代码如下：

CSS:模拟Windows窗口及DIV居中

小李刀刀 — Mon, 27 Mar 2006 18:19:00 +0000

　　利用CSS，尝试做了一个仿Windows窗口的横向纵向均居中的Div效果：

　　效果图如下：

　　以下是完整源代码：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

动易远程接口中转

正在进行通行证操作

正在进行远程数据同步，请勿刷新页面！

论坛数据同步中

本站操作已完成！

ASP中的数字和字符比较

小李刀刀 — Wed, 23 Nov 2005 06:48:00 +0000

昨晚和老迷聊天聊到很晚，说到一个把字符串转换为数字进行比较的问题。老迷说他喜欢保持字符串本身的类型，进行字符串的匹配比较，而不喜欢把字符串强制转换为数字进行比较。

一开始我不太明白这到底有什么区别，比如

a = "1"
If a = 1 Then
     'Something
End If

和

a = "1"
If a = "1" Then
     'Something
End If

在VB中，变量的数据类型默认是Variant，在必要的时候自动转换，例如上例第一种，由于表达式右边是数字，因此系统会自动将字符串变量a转换为数字类型，然后进行数字的比较。而第二种则没有转换类型这个过程。

这个从代码上看没有任何区别的比较过程，在执行时却差着一个步骤。这就是老迷关于他为什么更愿意保持字符串变量的字符串类型来进行比较的原因。

最简单的运用就是用户登录时，比如有个是否保存cookies的选项。通常是用下拉选择或者单选按钮，表单数据经过ASP程序读取之后，Request.Form("cookies")的值默认情况下是字符串类型的。我们往往是把它当成数字来用，有时候我们还习惯用 a = Cint(Request.Form("cookies"))的方式在读取时进行转换，也或者不做转换，直接用 If a = 1 来判断。

实际上不管用哪种方法，都离不开一个转换的过程，而且为了避免 Cint 函数出错，我们往往还需要在前面增加一个IsNumeric的验证，这样一来，多出来的就不只是一个步骤了。

而如果我们直接把Request.Form("cookies")作为字符串考虑，我们只需要一行代码即可：

If Request.Form("cookies") <> "" and a = "1" Then

就同时完成了数据有效性验证和比较。

这个很小的细节，在实际编程中用到的地方非常多，每个地方都多两个步骤，那的确在性能上就是比较低大的浪费了。

用ASP为blog程序编写Trackback功能

小李刀刀 — Fri, 18 Nov 2005 12:56:00 +0000

　　作为所谓的Blog三大特征之一的Trackback Ping，在网络上并没有一个真正的规范，它实际上最早是在Moveable发明并开始运用的一种技术，与另外两项被广泛认为是Blog最主要特征的RSS和Permalink相比，RSS本质上是是一种遵循W3C RDF规范的XML格式，Permalink是一种非常通用的静态地址技术，而Trackback Ping目前为止仅仅是在blog程序中得到运用，除了Moveable的一份技术规范文档外，也没有什么权威的标准，尤其在国内，众多blog程序有的支持有的不支持，有的有限支持，甚至还有因标准不一致而不能互相通信的(参见《blog is dead(blog已死)》)。

　　但是作为开发人员，我们不需要去讨论或者争论Trackback是不是死了、它会不会带来恶意Spam这些问题，就像垃圾邮件的存在，并不影响电子邮件的技术进步和使用一样。对于开发人员来讲，既然Trackback被认为是Blog的三大技术之一，而且blog程序的用户有这种需求，那我们在开发blog的时候，就应该包含这项技术。而且，我们应该尽可能地使我们开发的技术符合标准，或者规范，至少让它发挥作用。

　　Trackback Ping是由Moveable Type发明的规范，那么在没有更权威的标准之前，我们使用这项技术，当然应该以他们的规范为准，这里是他们的Trackback技术规范文档：http://www.movabletype.org/docs/mttrackback.html。

　　Trackback的完整实现至少包含两个方面，其一：客户端发送Trackback Ping；其二：服务器端接收和处理Trackback Ping，并向客户端返回处理结果。然后，根据需要我们可以考虑在客户端接收或者不接收，处理或者不处理返回的信息。下面是具体的代码：

'#函数名：Trackback
'#作 用：向指定的URL发送Trackback Ping，并根据服务器端返回的信息，提示用户处理情况。
'#参 数：
'#RemoteURL = 目标URL，也即所引用的blog所提供的引用地址
'#MyBlogURL = 我的Blog的URL
'#MyBlogName = 我的blog站点名称
'#MyBlogTitle = 当前这篇blog的标题
'#MyBlogExcerpt = 当前这篇blog的摘要
'#返回结果：字符串，以“|”分隔，第一部分为数字，0表示成功，1表示有错；第二部分是具体信息。 

Function Trackback(RemoteURL,MyBlogURL,MyBlogName,MyBlogTitle,MyBlogExcerpt)
    Dim objXMLHttp,objXML,intStat,strMessage,strPostInfo
    '对参数进行必要的处理，比如URLEncode之类
    MyBlogURL = Server.URLEncode(MyBlogURL)
    MyBlogName = Server.URLEncode(MyBlogName)
    MyBlogTitle = Server.URLEncode(MyBlogTitle)
    MyBlogExcerpt = Server.URLEncode(MyBlogExcerpt)
    '构造要发送的请求内容
    strPostInfo = "title=" & MyBlogTitle
    strPostInfo = strPostInfo & "&url=" & MyBlogURL
    strPostInfo = strPostInfo & "&excerpt=" & MyBlogExcerpt
    strPostInfo = strPostInfo & "&blog_name=" & MyBlogName
    '创建对象
    Set objXMLHttp = Server.CreateObject("MSXML2.ServerXMLHTTP")
    Set objXML = Server.CreateObject("Microsoft.XMLDOM")
    '以post方式打开XMLHTTP对象
    objXMLHttp.Open "POST", RemoteURL, false
    '发送请求内容，判断发送情况，并进行处理
    On Error Resume Next
    objXMLHttp.Send strPostInfo
    If Err.Number <> 0 Then
        Trackback = "1|TrackBack错误：无法连接服务器"
    Else
        If (objXMLHttp.readyState <> 4) or (objXMLHttp.Status <> 200) Then
            objXMLHttp.Abort Trackback = "1|Trackback超时"
        Else
            objXML.async = false
            objXML.load(objXMLHttp.responseXML)
            If objXML.parseError.errorCode <> 0 Then
                Trackback = "1|TrackBack响应解析错误"
            Else
                If objXML.getElementsByTagName("error")(0).Text="0" Then
                    Trackback = "0|Trackback成功"
                Else
                    Trackback = "1|Trackback错误："&objXML.getElementsByTagName("message")(0).Text
                End If
            End If
        End If
    End If
    '释放对象
    Set objXMLHTTP = Nothing
    Set objDom = Nothing
End Function

'#过程名：DealRequest
'#作 用：接收和处理客户端发来的Trackback Ping
'#参 数：无
Sub DealRequest()
    Dim blog_id,tbTitle,tbName,tbURL,tbExcerpt,stat 

    '从所请求的URL中提取所引用的blogID，以便从数据库中检索对应的blog
    '这个参数根据你所写的blog程序提供的Trackback地址形式而定
    '这里我们假设这个参数为“id” 

    blog_id = Request.QueryString("id") 

    '读取出客户端传来的请求中的每个部分
    '注意，这里没有对以Get方式提交的请求作出处理
    '因为2003年以后根据技术规范已经不再接受Get方式的请求
    '如果希望增强兼容性，可以加上对Get方式的请求的处理 

    tbTitle = Request.Form("title")
    tbName = Request.Form("blog_name")
    tbURL = Request.Form("url")
    tbExcerpt = Request.Form("excerpt") 

    '检索数据库中id为blog_id的blog数据和url为tbURL的Trackback记录
    '如果blog不存在，或者Trackback记录已存在，向客户端返回相应的出错说明
    '我们这里调用一个进程tbResponseXML来完成这项工作
    '调用时，以参数stat=0[1,2]分别表示成功、日志不存在和记录已存在 

    tbResponseXML(stat,"utf-8") 

    '如果是成功，还应当做好更新TrackBack记录和相关blog引用数的工作
End Sub

'#过程名：tbResponseXML
'#作 用：接收和处理客户端发来的Trackback Ping
'#参 数：
'#stat：错误代码，0=成功；1=日志不存在；2=Trackback记录已存在
'#strCharset：要返回的XML的编码 

Sub tbResponseXML(stat,strCharset)
    Response.ContentType = "text/xml"
    Response.Charset = strCharset
    Response.Write "encoding=""" & strCharset & """?>"
    Response.Write "" & stat & ""
    If stat = 1 Then
        Response.Write "The blog you're trackbacking isn't exist!"
    ElseIf stat = 2 Then
        Response.Write "You can not Trackback a blog twice from the same URL."
    End If
End Sub

酷热&加密方式的冲突

小李刀刀 — Wed, 22 Jun 2005 21:33:00 +0000

　　凌晨3点了，还是热得不得了，我坐在床上，只有手指在动，照样浑身冒汗。每隔几分钟就要停下来用纸巾擦试手腕以及键盘的腕托部分。本来接口的规范在写动易和动网的接口的时候已经确定下来了。在作Leadbbs接口的时候临时又发现了问题：Leadbbs采用的是32位加密方法。

　　按照原来的设想，动易完成注册后，会把用户的最基本资料传递给目标程序，其中包括了3项加密信息：用户密码、密码提示问题的答案和网站的私钥。在Leadbbs这里遇到了密码加密位数不够的问题。于是重新修改，把密码改为32位加密传递，在动易、动网的接口中，收到以后，自动将32位加密的数据改为16位加密数据。问题又来了：假如遇到了只支持16位加密的程序怎么办？像bbsxp的md5函数好像就没有位数选项（印象中是这样，还没有细看bbsxp），必须得有一个通用的办法。

　　动易和动网是整合的重头戏，幸好这两套程序都同时支持16位和32位加密，好吧，那就把所有加密传递的信息都采用32位加密吧，在动易和动网的接口程序中，又重新加上了语句，判断传递过来的数据加密长度，然后进行截取处理。

　　代码都处理完只用了半个小时不到的时间，腕托的位置已经全是汗水了……温度实在太高了，我要去水房凉快一下了！

　　北京的夏天实在是太让人讨厌了……让我开始对云南老家无比怀念起来……

裁纸刀下 » 代码

简单、通用的JQuery Tab实现

相关日志

使用Google AjaxLib API托管的js库

相关日志

CSS居然可以这样用

相关日志

CSS:模拟Windows窗口及DIV居中

相关日志

ASP中的数字和字符比较

相关日志

用ASP为blog程序编写Trackback功能

相关日志

酷热&加密方式的冲突

相关日志