今天抽空完成了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>"); 大功告成！
Read the rest of this entry »【jQuery】示例9：检查用户名是否存在
今天完成了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, 例子
Read the rest of this entry »【jQuery】示例8：手风琴式的控制
遵照由简到繁的原则，我继续完成“手风琴式的控制”，示例见此处。 在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代码。
Read the rest of this entry »【jQuery】示例6：可以伸展的面板
是的，这个是示例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 »