jquery进度条实现 jquery-ul

  进度条,其实在很多场景被使用,被要求实现,诸如:翻页,数据下拉时显示部分与未显示部分的百分比等,而我第一次使用它的场合是在,一个图片翻页时。

第一反应找寻jquery相关,而尽量避免找寻一些额外的插件实现,随之找到了jquery-ui这个基于jquery插件库。

jquery-ui与jquery关系:

  • (1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。  
  • (2) jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。  
  • (3) jQuery本身注重于后台,没有漂亮的界面,而jQuery UI则补充了前者的不足,他提供了华丽的展示界面,使人更容易接受。既有强大的后台,又有华丽的前台。jQuery UI是jQuery插件,只不过专指由jQuery官方维护的UI方向的插件。



本来想自己弄一遍弄一个dome,不知为何每次都是js错误,先用别人的顶上吧..... 哎

一、          前言

进度条可以向用户显示程序当前完成的百分比,让用户知道程序的进度,提高了用户体验。

 

二、          最简单的例子

首先引入样式和js库:

    <link type="text/css" rel="Stylesheet" href="css/jquery-ui-1.7.2.custom.css" />

    <script type="text/javascript" src="js/jquery-1.3.2.min.js">script>

    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js">script>

      可以使用div来作为显示进度条的载体:

        <div id="divProgressbar">div>

      将上面的div变成进度条:

        <script type="text/javascript">

            $(function(){

                $("#divProgressbar").progressbar({value: 30});  //初始话进度条并设置初始值为30

                alert("当前值是: " + $("#divProgressbar").progressbar("option""value"));  //读取进度条的当前值

            });

        script>

      一运行例子就明白

 

三、          要进度条动起来怎么办?

做个小实验,修改jquery代码如下:

        <script type="text/javascript">

            $(function(){

                $("#divProgressbar").progressbar({value: 30});

                alert("当前值是: " + $("#divProgressbar").progressbar("option""value"));

                $("#divProgressbar").progressbar({value: 60});

                alert("当前值是: " + $("#divProgressbar").progressbar("option""value"));

                $("#divProgressbar").progressbar({value: 90});

                alert("当前值是: " + $("#divProgressbar").progressbar("option""value"));

            });

        script>

      运行,看是什么结果,进度条没变化,每次弹出框的值都是30吧!为什么捏?因为.progressbar({value: 30})是用来初始化的上面已经在代码的注释里提到,在dialog那篇里也说到同一个控件是不允许被多次初始化的,所以我们必须用其它的方法来修改进度条的当前值,jQuery提供了.progressbar("option""value", 60)方法来设置当前值,这里还可以发现,不在后面加数值参数的话就是读取当前值。

    再修改代码如下:

        <script type="text/javascript">

            $(function(){

                $("#divProgressbar").progressbar({value: 30});

                alert("当前值是: " + $("#divProgressbar").progressbar("option""value"));

                $("#divProgressbar").progressbar("option""value", 60);

                alert("当前值是: " + $("#divProgressbar").progressbar("option""value"));

                $("#divProgressbar").progressbar("option""value", 90);

                alert("当前值是: " + $("#divProgressbar").progressbar("option""value"));

            });

        script>

      嘿嘿——进度条动起来了,而且弹出框的值也变化了。

 

四、          可以实用的进度条

修改代码如下:

        <script type="text/javascript">

            $(function(){

                updateProgressbarValue();   //调用函数

               

                function updateProgressbarValue(){

                    $("#divProgressbar").progressbar({value: 0});   //初始化进度条,如果已经初始化则会跳过

                    var newValue = $("#divProgressbar").progressbar("option""value") + 3; //读取进度条现有值并计算出新值

                    $("#divProgressbar").progressbar("option""value", newValue);  //设置进度条新值

                    setTimeout(updateProgressbarValue, 500);    //使用setTimeout函数延迟调用updateProgressbarValue函数,延迟时间为500毫秒

                }

            });

        script>

      这里最重要的是使用了setTimeout来延迟调用函数,并且这是一个自嵌套函数,如果没有终止它的话它将一直运行下去,这是不被允许的。

      在setTimeout(updateProgressbarValue, 500);前加入下面的代码就知道了:

        alert(newValue);

 

五、          在适当的地方终止这个傻头傻脑的程序

其实我们只需要在setTimeout(updateProgressbarValue, 500);前加一个判断就ok了:

    if(newValue <= 100)setTimeout(updateProgressbarValue, 10);

这样我们就可以在进度条满了后终止这个傻瓜继续执行。

最终代码如下:

        <script type="text/javascript">

            $(function(){

                updateProgressbarValue();

               

                function updateProgressbarValue(){

                    $("#divProgressbar").progressbar({value: 0});

                    var newValue = $("#divProgressbar").progressbar("option""value") + 10;

                    $("#divProgressbar").progressbar("option""value", newValue);

                    alert(newValue);

                    if(newValue <= 100) setTimeout(updateProgressbarValue, 10);

                }

            });

        script>


另外附上一个地址: jQuery UI 实例 - 进度条(Progressbar)

原文地址:http://blog.csdn.net/soldierluo/article/details/5019887

你可能感兴趣的:(jquery进度条实现 jquery-ul)