<title></title>

     <script src="../Js/NewJs_CFJ/jquery.js" type="text/javascript"></script>

     <link href="../Js/NewJs_CFJ/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />

     <link href="../Js/NewJs_CFJ/jquery-ui.theme.css" rel="stylesheet" type="text/css" />

     <script src="../Js/NewJs_CFJ/jquery-ui.js" type="text/javascript"></script>

    <style type="text/css">

   .ui-progressbar {

     position: relative;

   }

   .progress-label {

     position: absolute;

      text-align:center;

     font-weight: bold;

     text-shadow: 1px 1px 0 #fff;

  }

  </style>

     <script type="text/javascript">

      function addValue(value){

          var pro = $("#divProgerssbar");

          var proLabel = $(".progress-label"); //进度条里面文字

          var temp = 100;

          if (Number(value) > 100) {

              temp = Number(value);

        }

        pro.progressbar({

            value: Number(value),

            max: temp

        });

        proLabel.text(pro.progressbar("value") + "%");

     }

     $(function () {

         addValue(0);

               $("#ss").click(function () {

                   addValue(46);

               });

               $("#vv").click(function () {

                   addValue(234.5);

               });

         });

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <input type="button" value="sdf" id="ss" />

      <input type="button" value="sdf" id="vv" />

     <div id="divProgerssbar" style=" width:400px" >

         <div class="progress-label"  style=" width:400px" >

         </div>

     </div>

     </form>

 </body>

 </html>

jqueryui 进度条使用的更多相关文章

  1. jquery-ui 进度条

    <!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title> ...

  2. asp.net利用ajax和jquery-ui实现进度条

    前台用ajax不停进行查询,直到任务完成.进度条用的是jquery-ui.后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中. 代码作为简单示例,实际应用时应对 ...

  3. jqueryui组件progressbar进度条和日期组件datepickers的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. struts2：上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  5. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  6. JQuery UI进度条——Progressbar

    1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...

  7. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  8. MVC实现有关时间的进度条，使用jQuery ui的progressbar

    在电商网站中,有时候通过进度条来直观地显示用户是否到期以及用户当前的状态. 设计这样的一个Model. public class User { public int Id { get; set; } ...

  9. commons-fileupload实现上传进度条的显示

    本文将使用   apache fileupload   ,spring MVC   jquery 实现一个带进度条的多文件上传, 由于fileupload 的局限,暂不能实现每个上传文件都显示进度条, ...

随机推荐

  1. 编译osgEarth2.8遇到gdal_vrt.h找不到的问题

    在编译plugins osgearth_gdal的ReaderWriterGDAL.cpp的时候可能会遇到这个问题 gdal_vrt.h这个头文件在gdal-1.11.0\frmts\vrt目录下,从 ...

  2. 在 Angularjs 中 ui-sref 和 $state.go 如何传递参数

    1 ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: <a ui-sref="message-list" ...

  3. Css格式与布局

    一.位置 1.绝对定位 position:absolute:绝对定位. 绝对位置的意思就是相对于浏览器边框的位置,回归到它应有的位置.也就是说,一个div使用绝对定位后是在浏览器边框的最左上角位置.而 ...

  4. C# 委托&事件

    之前关于事件这块理解一直不是很好,正好有空复习,整理记录一下 委托:可以将与自身形式相同(返回参数相同:传入参数相同)的方法当成参数进行传递. using UnityEngine; using Sys ...

  5. 使用ActionFilterAttribute进行重定向注意事项

    1.分部视图方法不能添加该特性,会报子方法不能重定向操作的错误 2.必须用给filterContext.Result赋值的方法进行重定向,而不能用filterContext.HttpContext.R ...

  6. 【Java EE 学习 68】【单点登录】【两种单点登录类型:SSO/CAS、相同一级域名的SSO】

    单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...

  7. 剑指Offer-【面试题06：重建二叉树】

    package com.cxz.question6; /* * 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. * 例如:前序遍历序列 ...

  8. 【Mybatis架构】Mapper映射文件中的#{}与${}

    前言 还记得当初从北京回来的时候,跟着倪文杰师姐做JavaITOO的一卡通模块,我亲姐贾梦洁带着我一块做,期间,我遇到了一个特别奇葩的问题,就死我要实现Mybatis的模糊查询,根据当时亲姐教给我方法 ...

  9. git 查看某文件的修改历史

    前提 先进入此文件所在的目录下 1. git log filename可以看到fileName相关的commit记录2. git log -p filename可以显示每次提交的diff3. 只看某次 ...

  10. Hackerrank11 LCS Returns 枚举+LCS

    Given two strings,  a and , b find and print the total number of ways to insert a character at any p ...