Tag: jQuery

  • 【jQuery】示例5:一个简单的投票系统

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

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

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

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

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

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

    大功告成!

  • Going for Symfony | 第七天

    在第七天,我终于完成了将任氏有无轩的最重要的部分:藏书管理部分迁移到了Symfony,并且是在应用环境。进行了一些小的修改就不说了。

    本来是要用Lucene进行索引编制的,但是我的应用实践表明,Lucene实在对中文支持很不好。所以,我只好放弃Lucene,而改用最原始select大法。

    (more…)

  • Going for Symfony | 第六天

    这是我对任氏有无轩改造的(第N个)第六天……

    我要完成的是至关重要的功能:加入全文搜索。今天的收获还算可以,还需要我进行更多实际数据的测试进行验证。

    (more…)

  • 【jQuery】示例9:检查用户名是否存在

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

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

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

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

  • Going for Symfony | 第五天

    今天忙里偷闲,继续对我的藏书管理程序进行Symfony的改造。界面效果如下:

    (more…)

  • Going for Symfony | 第四天

    抱歉,过了这么久才放出我第四天的进程:因为这一天的过程实在比较难,而结果却很有成就感。我完成了以下工作:

    1. 完成了某一本书的详细信息显示;
    2. 加入了AJAX的支持,可以由浏览者增加一本书的tag并更新到数据库中;

    (more…)

  • 【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组合写成: “`lang=html

    • Section 1Line 1.
      Line 1.
      Line 1.
      Line 1.
    • Section 2Line 2.
      Line 2.
      Line 2.

      
      
      实在是很简单,而且很干净,彻底分离了html和js代码。
  • 【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使用的方法。

    示例见此处

  • 【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)中的参数是个常量,只需要取值一次从而大大的缩减了运行时间。

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

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

    完整的示范在此处

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

  • 【jQuery】示例3:两层的关联下拉框

    今天终于完成了jQuery的一个确实有用的示例:两层的关联下拉框(2 Level Cascading Dropdown list)。示例见此处

    开始,我以为很简单。但是经过实战,还是有一些些小的技巧需要注意。

    JSON的返回值是一个问题。在这个示例中,由于我并不关注返回值的问题(这个问题将在示例4中进一步研究),所以我只是简单返回一个字符串的数组。

    (more…)