生活在远方

今天抽空完成了jQuery的示例5：一个简单的投票系统。

本例没有什么特殊的地方。只有一点。投票系统至少需要两个参数：一个是投票项目的id，一个是投票的方向（支持还是反对），所以我这样构造一个a元素：

<a href='#' class='up' id='<?php echo $row['vid']?>'><?php echo $row['up']?></a>

我用class来确定投票方向，而用id来确定投票项目。

最后，我用jQuery中的replaceWith来替代掉被点击的a元素的内容为：

$(this).replaceWith("<strong>"+count+"</strong>");

大功告成！

今天完成了jQuery的示例9：检查用户名是否存在。之所以做这个例子，一是因为要保证完整性，另一个是在CSDN的PHP板块有很多人问到这个。

演示地址：http://www.rsywx.net/jquery/demos/test09.html。

代码都很简单，不再列出。有兴趣的可以直接下载后分析。

特别提出一点：在代码中，我在jQuery中调用JSON函数处理返回值的时候，由于返回值很简单（true或者false的布尔值），所以直接对返回的data进行了判断，实践证明是可行的。

Technorati : JavaScript, demos, jQuery, 例子
Del.icio.us : JavaScript, demos, jQuery, 例子
Zooomr : JavaScript, demos, jQuery, 例子
Flickr : JavaScript, demos, jQuery, 例子

遵照由简到繁的原则，我继续完成“手风琴式的控制”，示例见此处。

在jQuery中实现手风琴式的控制十分简单：

<script src="../ui/ui.core.js"></script>
<script src="../ui/ui.accordion.js"></script>
<script type="text/javascript">
            $(document).ready(
            function()
            {
                $("#accordion").accordion();
            }
            );
</script>

两个额外的js文件可以从jQuery网站下载，也可以直接远程引用。

html的代码采用ul/li组合写成：

<ul id="accordion">
  <li>
    <a href="#">Section 1</a>
      <div>Line 1.<br/>
      Line 1.<br/>
      Line 1.<br/>
      Line 1.</div>
  </li>
  <li>
    <a href="#">Section 2</a>
     <div>Line 2.<br/>
     Line 2.<br/>
     Line 2.<br/>
   </li>
   ...
</ul>

实在是很简单，而且很干净，彻底分离了html和js代码。

是的，这个是示例6，而不是计划中的示例5（投票系统）。因为在jQuery中，进行可以伸展的面板的处理非常简单，只要一个toggle()函数就可以。

核心代码如下：

var i=0;
$(document).ready(
    function()
    {
        $("div").filter("#clickme").click(
            function()
            {
                i++;
                $("div").filter("#content").toggle();
                if(i%2==0)
                {
                    $(this).text("Click here to expand.");
                }
                else
                {
                    $(this).text("Click here to collapse.");
                }
            }
        );
    }
);

我用了一个变量i来判断要操作的div是处在显示还是隐藏状态，并相应的修改提示文字。通过查看jQuery的源代码，可以知道这也是jQuery中toggle使用的方法。

示例见此处。

有了两层关联下拉框的经验，实现三层的关联下拉框确实很容易。

当然，为了被前令狐同学再次BS我的算法BT，我首先改写了clearOptions函数：

function clearOptions(selectID)
{
    var sel=document.getElementById(selectID);
    var len=sel.length;
    var i;
 
    for(i=1;i<len;i++)
        sel.remove(1); // I keep on removing the 1st item in the select!
}

说明一下，我这样编程是有一定的道理的。虽然说，更“好”的代码应该似乎是每次都删除最后一个（类似：remove(sel.length)）。但是，由于每次删除后，sel.length都会发生变化，所以在每次删除最后一个的时候，sel.length都会被重新取值，这个对于jQuery来说开销还是很大的，特别是如果select下的option比较多的时候。所以，我还是选择每次删除第一个的做法。这样，remove(1)中的参数是个常量，只需要取值一次从而大大的缩减了运行时间。

同时我将addOption，fillLevel等多次调用的代码段抽出作为独立的函数。在fillLevel函数中，还特意混合了jQuery和标准javascript。

这样一来，jQuery的ready函数写法就更清晰明了了。同时，为了温故知新，我还加入了在第二个例子中实现的“Loading”提示。目前的问题时，在填充level1的时候，不会出现这个提示，而只有在填充level2和level3的时候才出现这个提示。暂时不管这个小小的问题了。

完整的示范在此处。

代码不再贴出，有兴趣的可以在页面自行下载研究。

今天终于完成了jQuery的一个确实有用的示例：两层的关联下拉框（2 Level Cascading Dropdown list）。示例见此处。 开始，我以为很简单。但是经过实战，还是有一些些小的技巧需要注意。 JSON的返回值是一个问题。在这个示例中，由于我并不关注返回值的问题（这个问题将在示例4中进一步研究），所以我只是简单返回一个字符串的数组。 Read the rest of this entry »

今天完成了一个在进行耗时长久的操作时，为了不让用户感到无聊而显示一个“载入中，请稍安勿躁”之类提示的小例子。

演示地址：此处。

==============

Read the rest of this entry »