BlogJava-J度空间-文章分类-网页设计http://www.blogjava.net/jdo/category/24814.htmlzh-cnThu, 30 Aug 2007 20:43:14 GMTThu, 30 Aug 2007 20:43:14 GMT60DOMtab的基本使用方法以及下载地址和完整演示http://www.blogjava.net/jdo/articles/140690.html蓝色幽默蓝色幽默Tue, 28 Aug 2007 14:45:00 GMThttp://www.blogjava.net/jdo/articles/140690.htmlhttp://www.blogjava.net/jdo/comments/140690.htmlhttp://www.blogjava.net/jdo/articles/140690.html#Feedback0http://www.blogjava.net/jdo/comments/commentRss/140690.htmlhttp://www.blogjava.net/jdo/services/trackbacks/140690.html

一.什么是DOMtab
DOMtab是一个用javascipt制作的通用可扩展的tab切换显示隐藏内容快的web控件。

二.怎么使用DOMtab
1.在页面的

  1. <head></head>

区域加上

  1. <script type="text/javascript" src="domtab.js"></script>

2.在页面主体的

  1. <body></body>

部分加上

  1. <div class="domtab">
  2.  <ul class="domtabs">
  3.  <li><a href="#t1">Test 1</a></li>
  4.  <li><a href="#t2">Test 2</a></li> [idea] [idea]
  5. [... and so on ...]
  6.  </ul>
  7.  <div>
  8.  <h2><a name="t1" id="t1">Proof 1</a></h2>
  9.  <p>Test to prove that more than one menu is possible</p>
  10.  <p><a href="#top">back to menu</a></p>
  11.  </div>
  12.  <div>
  13.  <h2><a name="t2" id="t2">Proof 2</a></h2>
  14.  <p>Test to prove that more than one menu is possible</p>
  15.  <p><a href="#top">back to menu</a></p>
  16.  </div>
  17. [... and so on ...]
  18. </div>


然后定义各个class的样式就可以了，你也可以加class定义样式，但是代码的结构不能变化
3.更改javascript中控件的属性
tabClass:’domtab’, //目标区域的class名称
listClass:’domtabs’, // 列表菜单的class名称
activeClass:’active’, // 菜单激活状态下的class名称
contentElements:’div’, // 循环内容区域的元素名称
backToLinks:/#top/, // 设置返回顶部的参数
printID:’domtabprintview’, // 显示所有区域内容的id名称
showAllLinkText:’show all content’, // 显示所有区域的文字名称

三.增加向前向后按钮

1.在区域的起始class上多增加一个doprevnext

  1. <div class="domtab doprevnext">
  2.  <ul class="domtabs">
  3.  <li><a href="#t1">Test 1</a></li>
  4.  <li><a href="#t2">Test 2</a></li>
  5.  <li><a href="#t3">Test 3</a></li>
  6.  <li><a href="#t4">Test 4</a></li>
  7.  </ul>
  8.  [... ad nauseam...]
  9. </div>

2.在页面里面加上下列代码

  1. <ul class="prevnext">
  2.  <li class="prev"><a href="#">previous</a></li>
  3.  <li class="next"><a href="#">next</a></li>
  4.  </ul>

3.javascript里面的属性定义

  1. prevNextIndicator:'doprevnext', // 目标容器的class名称
  2. prevNextClass:'prevnext', // class名称
  3. prevLabel:'previous', // 上一页的文字
  4. nextLabel:'next', // 下一页的文字
  5. prevClass:'prev', // 上一页的class
  6. nextClass:'next', // 下一页的class

四.DOMtab中的样式控制
你可以强制的控制某一个元素的样式譬如显示和隐藏等等

  1. <script type="text/javascript">
  2.  document.write('<style type="text/css">');
  3.  document.write('div.domtab div{display:none;}<');
  4.  document.write('/s'+'tyle>');
  5. </script>

五.下载以及演示
下载DOMtab version 3.1415927
DOMtab演示



蓝色幽默 2007-08-28 22:45 发表评论
]]>用DIV+Javascript实现标签功能http://www.blogjava.net/jdo/articles/140411.html蓝色幽默蓝色幽默Tue, 28 Aug 2007 04:47:00 GMThttp://www.blogjava.net/jdo/articles/140411.htmlhttp://www.blogjava.net/jdo/comments/140411.htmlhttp://www.blogjava.net/jdo/articles/140411.html#Feedback0http://www.blogjava.net/jdo/comments/commentRss/140411.htmlhttp://www.blogjava.net/jdo/services/trackbacks/140411.html
　　现在很多网站都用到了标签的切换功能，新浪、迅雷等网站都有，应该说用很很泛滥了。其实 标签功能是Windows程序中的一种功能，在Delphi或VB等Windows程序开的环境中，很容易就能创建各种漂亮而又功能强大的标签功能，但在 Web开发中，就没有这种便利了。
　　只需要销加改动，标签的数量可以自由添加，而无需要为标签添加ID，实际上这个功能除了用到Div、Javascript之后，很重要的是要用到CSS样式。
 
 
图1

　 　首先我们要确定我们要做什么，我们要做成一个带三个标签的区域(图1)，点击标签标签列表的其中一个标签，内容区域会根据当前点击的标签显示不同的内 容。按照我们一般的做法是每一个标签对应一个内容区域，给每个内容区域增加一个id属性，然后为每一个标签添加一个属性，就像这样：
 
<div>   
 <div>   
  <div id="label1" onmousemove="dosomething()">label1<div>   
  <div id="label2" onmousemove="dosomething()">label2<div>   
  <div id="label2" onmousemove="dosomething()">label2<div>   
 </div>   
 <div>   
  <div id="content1">第一个label的内容</div>   
  <div id="content2">第一个labe2的内容</div>   
  <div id="content2">第一个labe2的内容</div>   
 <div>     
</div>  
     你可能没有意识到这种办法会有什么问题，当一个页面有非常多的标签块的话，我们将不得不面临一个问题，那就是id的命名问题，我们将要为每一个内容区域命 名，这样不仅增加了代码量，也增加了javascript编写的难度，我们不可能为每一个标签块写一堆javascript，就算我将 javascript写成一个函数或者一个类，我们也会而临另一个问题，就是调用的时候会有一大堆的参数，因为你需要将这个id传送过去。并且，很容易因 为人为的疏忽造成错误。
　　下面，来看看我是如何实现这个功能的吧，可能不是最好的方法，如果你有更好的方法，希望你能告诉我，让我们一起进步。
    　首先，我们要做的是写好基本的html代码，代码如下：
 
<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
</head>   
     
<body>   
<ul id="Label">   
 <!--我们将第一个标签的背景色设置红色，因为默认显示的是第一个标签的内容-->   
 <li class="CurrentLabel" style="background-color: red">标签1</li>   
 <li>标签2</li>   
 <li>标签3</li>   
</ul>   
<div id="Container">   
    <div>这时里是标签1对应的内容</div>   
    <!--因为默认是不显示的，所以要将display属性设置为none-->   
    <div style="display: none">这时里是标签2对应的内容</div>   
    <div style="display: none" class="Content3">这时里是标签3对应的内容</div>   
</div>   
</body>   
</html> 
   
    写好基本html代码后，我们还需要做一项重要的工作，那就是css样式，因为li如果没有css样式控制，标签就会以列表的形式出现，基本的CSS样式代码如下：
 
 
<style type="text/css">    
 #Label li    
 {    
  /*设置ID为Label的元素下所有li元素样式，主要是要设置float:left这个属性，这样才能将li元素排成一排；同时设置了list-style:none这个属性，目的是防止li元素出现实心圆点*/   
  margin-left: 1px;    
  padding: 3px;    
  width: 40px;    
  background-color:#94A5F8;    
  float:left;    
  list-style:none;    
  cursor:pointer;    
 }    
</style>    
   
　 　下面，我们将要进行最重要的一环了，就是javascript，看到你里，你可能会问，为什么标签li元素没有事件呢？如何实现标签的切换呢，这是因为 我考虑了另一个问题，如果我们需要为每一个标签添加一个事件的话，确实是一件很麻烦的事情，而且当标签块多了的时候，就会增加代码量，所以我考虑使用动态 添加属性的方式为每一个标签添加属性。
 
 
function LabelAddEvent()    
 {    
  var labels = document.getElementById("Label").childNodes;        //获取ID为Label无素下的所有子节点，childNodes是DOM的一个属性    
  //对所有子节点进行循环，增加onmouseover事件，也可以根据需要添加onclick事件    
  for(var iLoop = 0; iLoop < labels.length; iLoop ++)    
  {    
   var label = labels[iLoop];    
   if ("LI" == label.nodeName)   //只处理LI的DOM节点，目的是为了兼容Firefox，因为Firefox会把空格与换行与当成一个节点处理    
   {    
    label.value = iLoop;        //为每一个标签的value赋上当前的索引，当点击标签的时候不用循环标签就知道是哪一个标签了    
    label.onmouseover = function()    
    {    
     ChangeLabel(this);          //调用ChangeLabel函数，并把当前对象传过去    
    };    
   }    
  }    
 }    
　　然后，我们在html页的最后面，调用LabelAddEvent这个函数，即可以为所有标签添加函数了，是不是很简洁，当我们有很多标签块的时候，就不必要为每个标签块添加事件了，下面我们来看看ChangeLabel这个函数：
 
 
function ChangeLabel(oCur)    
 {    
  //获取所有的内容元素子节点    
  var containers = document.getElementById("Container").childNodes;    
　//获取所有的标签    
  var labels = document.getElementById("Label").childNodes;    
  for(var iLoop = 0; iLoop < containers.length; iLoop ++)    
  {    
   var container = containers[iLoop];       
   var label = labels[iLoop];    
   //根据索引是否为li元素的value值来判断是否为当前标签    
   var current = iLoop == oCur.value;      
   if ("DIV" == container.nodeName) container.style.display = current ? "block" : "none";    
   if ("LI" == label.nodeName) label.style.backgroundColor = current ? "red" : "#94A5F8";    
  }    
 }  

　 　主要代码就是这么多了，是不是很简洁呢？当有很多个标签块的候，你就会发现这个方法的优势了，事实下，我们还可以简单修改一下javascript代 码，实现多个标签块在一个页面中的功能，接下来我准备结合Xml及Xslt写一个根据xml配置的多标签块的教程，如果你觉得有什么更好的方法可以实现， 请你与我联系，让我们共同进步。

  
  版权所有©Conis，复制或者转载请保留此信息，任何人未经许可，不得擅自将本文发布作为商业用途。
  更多内容更多精彩请您访问http://www.conis.cn


蓝色幽默 2007-08-28 12:47 发表评论
]]>javascript操作Select标记中options集合http://www.blogjava.net/jdo/articles/137341.html蓝色幽默蓝色幽默Thu, 16 Aug 2007 09:24:00 GMThttp://www.blogjava.net/jdo/articles/137341.htmlhttp://www.blogjava.net/jdo/comments/137341.htmlhttp://www.blogjava.net/jdo/articles/137341.html#Feedback0http://www.blogjava.net/jdo/comments/commentRss/137341.htmlhttp://www.blogjava.net/jdo/services/trackbacks/137341.htmloptions.add(option)方法向集合里添加一项option对象；
options.remove(index)方法移除options集合中的指定项；
options(index)或options.item(index)可以通过索引获取options集合的指定项；

    var selectTag = null; //select标记
    var OPTONLENGTH = 10; //每次填充option数
    var colls = [];       //对select标记options的引用

    window.onload = function(){
        selectTag = document.getElementById("SelectBox"); //获取select标记        
        colls = selectTag.options; //获取引用
        //initSelectBox();    //自初始化select.options
    };
    
    //使用随机数填充select.options
    function initSelectBox(){
        var random = 0 ;
        var optionItem = null;
        var item = null;
        
        if(colls.length > 0 && isClearOption()){
             clearOptions(colls);
        }

        for(var i=0;i<OPTONLENGTH;i++){
             
            random = Math.floor(Math.random()*9000)+1000;
            item = new Option(random,random);    //通过Option()构造函数创建option对象        
            selectTag.options.add(item); //添加到options集合中
        }    
        
        watchState();
    }
    //添加新option项前是否清空当前options
    function isClearOption(){
        return document.getElementById("chkClear").checked;
    }
    //清空options集合
    function clearOptions(colls){
        var length = colls.length;
        for(var i=length-1;i>=0;i--){
            colls.remove(i);
        }
    }
    //添加一项新option
    function addOption(){
        colls.add(createOption());
        lastOptionOnFocus(colls.length-1);
        watchState();
    }
    //创建一个option对象
    function createOption(){
        var random = Math.floor(Math.random()*9000)+1000;
        return new Option(random,random);
    }
    //删除options集合中指定的一项option
    function removeOption(index){        
        if(index >= 0){
            colls.remove(index);
            lastOptionOnFocus(colls.length-1);
        }
        watchState();
    }
    //获取当前选定的option索引
    function getSelectedIndex(){
        return selectTag.selectedIndex;
    }
    //获取options集合的总数
    function getOptionLength(){
        return colls.length;
    }
    //获取当前选定的option文本
    function getCurrentOptionValue(index){
        if(index >= 0)
            return colls(index).value;
    }
    //获取当前选定的option值
    function getCurrentOptionText(index){
        if(index >= 0)
            return colls(index).text;
    }
    //使用options集合中最后一项获取焦点
    function lastOptionOnFocus(index){
        selectTag.selectedIndex = index;
    }
    //显示当select标记状态
    function watchState(){
        var divWatch = document.getElementById("divWatch");
        var innerHtml="";
        innerHtml  = "option总数:" + getOptionLength();
        innerHtml += "<br/>当前项索引:" + getSelectedIndex();
        innerHtml += "<br/>当前项文本:" + getCurrentOptionText(getSelectedIndex());
        innerHtml += "<br/>当前项值:" + getCurrentOptionValue(getSelectedIndex());
        divWatch.innerHTML = innerHtml;
        divWatch.align = "justify";
    }



蓝色幽默 2007-08-16 17:24 发表评论
]]>如何制作一个漂亮的 CSS 按钮http://www.blogjava.net/jdo/articles/135959.html蓝色幽默蓝色幽默Fri, 10 Aug 2007 16:34:00 GMThttp://www.blogjava.net/jdo/articles/135959.htmlhttp://www.blogjava.net/jdo/comments/135959.htmlhttp://www.blogjava.net/jdo/articles/135959.html#Feedback0http://www.blogjava.net/jdo/comments/commentRss/135959.htmlhttp://www.blogjava.net/jdo/services/trackbacks/135959.html CSS Button

如今 Web Application 横行，在 Web 2.0 网站的各种设计元素中，按钮是无法或缺的。如何用最简洁的方法制作最漂亮的按钮就成为了一个问题。本文讲述的方法，代码上简洁，符合 XHTML 标准，不需要 Javascript，只需要纯 CSS 即可完成，而且通用性很好，使用起来也很方便。上图即为最终成品的例子，您也可以通过演示页面体验一下。下面我将详述整个制作过程，相信通过这个教程您肯定可以学会。

第一步：准备图片

按钮状态

对于一个好的 UI，一个很重要的方面就是要能及时的与用户发生交互。对于按钮来说，我们需要让按钮相应各种鼠标事件，让用户知道它是可以按下的。如上图，我们要制作的按钮共有三种状态：正常状态、鼠标划过、鼠标按下。通常情况下，我们会想到利用 onclick、onmouseover 这样的事件来控制，而事实上，我们完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 来完成这个过程。尽可能将表现的事情交给 CSS 来做，这也是良好设计的原则之一。

为了能够实现这种效果，我们需要准备三个状态的图片。利用 CSS 的 background-position 属性，我们完全可以将三种状态的图片放在一张图片中，这样可以获得更好的缓存效果。

此外，按钮两侧的圆角也是比较烦人的问题。因为我们要制作的按钮需要能够自动适应内部文字的长度，因此我们需要应用一种叫做“拉门技术 (Sliding door technique)”的 CSS 技巧。具体原理不讲了，这里只介绍具体做法：

我们使用超链接来生成按钮，为了使用 Sliding door technique，我们需要按照如下方式书写 HTML 代码：

  1. < a class = " button " href = " http://some_where " >< span > Button Text </ span ></ a >

随后，我们需要准备两张图片，作为按钮的背景（分别为 span 标签和 a 标签的），具体示意图如下：

背景图及布局示意图

这里需要指出，280px 并不是绝对的，它代表了这个按钮在您的应用中可能用到的最大值。此外，所有的值都可以根据您实际的背景图做出更改。

第二步：书写 CSS 代码

为了能够让 A 标签准确的显示我们需要的效果，我们需要设定其 display 属性为 block，但是，很多情况下，我们需要在同一行中显示多个按钮，我们可以通过设定 float:left 或 float:right 来达到。提醒一下，这样设定後，当您放置完按钮后不要忘记 clear 一下 :)。

首先看看显示基本布局的代码，本例中，两侧圆角部分为 10px，按钮高度为 24px，保留区域为 1px：

  1. a.button {
  2.       background:   transparent url(a.gif) no-repeat scroll right top ;
  3.       color:   White ;
  4.       display:   block ;
  5.       float:   left ;
  6.       height:   24 px ;
  7.       padding-right:   10 px ;
  8.       font:   normal 12 px sans-serif ;
  9.       margin-right:   10 px ;
  10.       text-decoration:   none ;
  11.     }
  12.     a.button   span {
  13.       background:   transparent url(span.gif) no-repeat ;
  14.       display:   block ;
  15.       padding:   5 px 1 px 5 px 11 px ;
  16.       line-height:   14 px ;
  17.     }

这里需要指出的是：1. 保留区 (1px) 是包含在 SPAN 中的，具体可以注意看 padding 的设置；2. SPAN 的 line-height + padding-top + padding-bottom = A 的 height。

经过这样设定后，我们的按钮的基本样式就完成了，但它还没有交互效果，我们通过设定 a:hover 和 a:active 来实现：

  1. a.button :hover {
  2.       background-position:   right - 24 px ;
  3.     }
  4.     a.button :hover   span {
  5.       background-position:   left - 24 px ;
  6.     }
  7.     a.button :active   {
  8.       background-position:   right - 48 px ;
  9.     }
  10.     a.button :active   span {
  11.       background-position:   left - 48 px ;
  12.       padding:   6 px 0 4 px 12 px ;
  13.     }

我们看到，主要是应用了 background-position 属性调整背景图片的位置，这比使用多张图片效果更好。在 a.button:active span 中，我们重新设定了 padding 的值，使字符向右下方移动 1px，按下的效果更明显，这也是之前提到的保留区的作用。

第三部：最后完善

其实做完上面两部，我们的按钮基本上已经完工了。但是在各种浏览器中都有一个讨厌的问题，就是当超链接被点击后，会留下一个讨厌的虚线框。这个破坏美观的东西，我们当然要干掉它。

Firefox、Safari 等支持 W3C CSS2 的浏览器，可以通过设定 CSS 的 outline 属性来做到这一点。在我们这个例子中，只需做如下改动：

  1. a.button :active {
  2.       background-position:   right - 48 px ;
  3.       outline:   none ;
  4.     }

在 Firefox 中看看，虚框已经消失了。

但 Internet Explore 不吃这一套，对付它就比较麻烦了，单单 CSS 无法解决问题，需要从 HTML 下手。我们需要将按钮的 HTML 代码改为以下形式：

  1. < a class = " button " href = " http://some_where " onclick = " this.blur(); " >< span > Button Text </ span ></ a >

这样，我们可以让超链接在点击后迅速失去焦点，从而避免虚框的出现。当然，如果我们应用中按钮比较少，这个方法还不错。但按钮比较多的情况下，我们 还是应该用 DOM 方法来为 className 为 button 的 A 修改 onclick 事件（用 jQuery 或 Prototype 实现会很省心），不过这不在本文讨论的范围内了。

到这里，我们的按钮就算做好了，我相信您一定已经学会了。如果还有什么不明白的地方，您可以参考这个简单的范例，查看它的源代码来解决。当然，您也可以直接在本文後提问，我很乐意为您解答。

UPDATE:谢谢 Dan Li 发来邮件提醒，我确实发现本文与这篇文章如 出一辙。早看到直接转过来就好了，白白折腾了两个小时。不知道留言中 DV 大侠所指的是不是这篇。不过我在写本文时并没有看过这篇文章，而且本文与原文还是有很大不同，而且原文中 CSS 有误 (background-position 的参数顺序不对)，虽然可以实现它所叙述的效果，但不符合 CSS 标准，也不能够进一步扩展，希望看了原文的朋友能够注意。



蓝色幽默 2007-08-11 00:34 发表评论
]]>