是的，这个是示例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使用的方法。 示例见此处。
Read the rest of this entry »【jQuery】示例4：三层的关联下拉框
有了两层关联下拉框的经验，实现三层的关联下拉框确实很容易。 当然，为了被前令狐同学再次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的时候才出现这个提示。暂时不管这个小小的问题了。 完整的示范在此处。 代码不再贴出，有兴趣的可以在页面自行下载研究。
Read the rest of this entry »【jQuery】示例3：两层的关联下拉框
今天终于完成了jQuery的一个确实有用的示例：两层的关联下拉框（2 Level Cascading Dropdown list）。示例见此处。 开始，我以为很简单。但是经过实战，还是有一些些小的技巧需要注意。 JSON的返回值是一个问题。在这个示例中，由于我并不关注返回值的问题（这个问题将在示例4中进一步研究），所以我只是简单返回一个字符串的数组。
Read the rest of this entry »【jQuery】示例2：显示一个“Loading”提示
今天完成了一个在进行耗时长久的操作时，为了不让用户感到无聊而显示一个“载入中，请稍安勿躁”之类提示的小例子。 演示地址：此处。 ==============
Read the rest of this entry »【jQuery】示例1：动态改变文本样式和内容
示范例子见：此处。 ========================= 经过一段时间和XAJAX的较劲，我发现了它的一些限制——当然，它还是一个很好的ajax框架： 在XAJAX的调用中，我不能获得Smarty模板渲染后的内容。因而，想要借助这个方法而动态增加动态内容是不可能了； 诸如onclick()/on????()等事件处理必须和一个HTML元素硬编码在一起，这会使得MVC结构出现了些许松散。 那么，有备用方案吗？有的，我选择了jQuery。
Read the rest of this entry »