169it科技资讯


当前位置:  编程技术>jquery

jquery进度条实现代码一例

    来源: 互联网  发布时间:2014-10-09

jquery进度条实现代码

效果图:

1,html代码:
 

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jquery进度条列-www.</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jdt.js"></script>
</head>
<body>
<div id="gridview">
<table>
<tr><td>序号</td><td>进度条</td><td>进度</td><td>备注</td><td>其他</td></tr>
<tr><td>1</td> <td>20</td> <td>20</td> <td>进度太慢了</td><td>工作一</td></tr>
<tr><td>2</td> <td>30</td> <td>30</td> <td>加油</td><td>任务二</td></tr>
<tr><td>3</td> <td>80</td> <td>80</td> <td>加油!!</td><td>任务三</td> </tr>
<tr><td>4</td> <td>80</td> <td>80</td> <td>加油!!</td><td>任务三</td></tr>
</table>
</div>
</body>
</html>
 

需要把第二列的数值替换成条状图,asp.net girdview 控件生成的也是table标签,因此后面的脚本对gridview的数据呈现也起作用。

思路:
枚举table中的行,找到第二列,取值,替换成对应长度的div标记。

大家可以体会下与js进度条生成原理的不同之处在哪?

2,jquery代码部分:
 

代码示例:

// jscript source code
var strdivid = "gridview"; //the idname of the div include table
var no_jdt = 1;// jdt's number in table (start 0)
var height_jdt = 14;// jdt's height px
var color_jdt = "#00ff00"; //jdt's color
function showjdt() {
var $gridviewtrs = $("#"+ strdivid + " tr");
var $td;
var $jd;
var strdivjdt;
$gridviewtrs.each(function () {
$td = $(this).find("td").first();
for (var i = 0; i < no_jdt; i++) {
$td = $td.next();
}
jd = parseint($td.text());
if (jd) {
strdivjdt = '<div +height_jdt+'px; width: '+jd+'px; background-color:'+color_jdt+';"></div>';
$td.html(strdivjdt);
}
});
}
window.onload = showjdt;

var strdivid = "gridview"; //含有目标table div层的id名称
var no_jdt = 1;// 进度条的列数,从0计起
var height_jdt = 14;// 进度条div的厚度
var color_jdt = "#00ff00"; //进度条div的颜色
function showjdt() {
var $gridviewtrs = $("#"+ strdivid + " tr");//jquery选择器,表示目标层中所有的行(tr)
var $td;
var $jd;
var strdivjdt;
$gridviewtrs.each(function () {//jquery遍历函数,对jquery对象进行迭代
$td = $(this).find("td").first(); //find()jquery遍历函数获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。first() jquery遍历函数,将匹配元素集合缩减为集合中的第一个元素。
(var i = 0; i < no_jdt; i++) { $td = $td.next();//jquery遍历函数,获取下一个jquery对象
}
jd = parseint($td.text());//jquery text()方法,获取标记中的字符内容
if (jd) {//如果字符存在且不为空
strdivjdt = '<div +height_jdt+'px; width: '+jd+'px; background-color:'+color_jdt+';"></div>';
$td.html(strdivjdt);jquery html()方法,更改标记的 inner html属性
$td.attr("title",jd);//jquery attr()方法,更改标记的属性,title属性是的鼠标移至td时有对应的提示值友好显示出来   } });
}
window.onload = showjdt;


您可能感兴趣的文章:
  • 简单型jQuery进度条插件的实现代码
  • jquery简单进度条一例

    
相关技术文章:
    ▪jquery动画特效,jquery动画实例教程

     jQuery动画特效实例分享 1.自制折叠内容块   代码示例: <div class="module">   <div class="caption">     <span>标题</span>     <img src="rollup.gif" alt="rollup" title="rolls up this module"/>   </div>   <div class="body">     近日,《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧,恒大统治力比上赛季下降了很多,恒大外援存在位置重叠的问题,客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不......


    ▪jquery事件用法,jquery事件实例

     jquery事件的用法 1、通过方法名给元素绑定事件:   $('li').click(function(event){}) 2、通过bind方法给元素绑定事件:   $('li')  .bind('click',function(event){})  .bind('click',function(event){}) 可见,通过bind,可以给元素绑定多个事件。 3、事件的命名空间 为什么需要事件命名空间? →假设,先给li元素绑定2个click事件。   $('li')  .bind('click',function(event){})  .bind('click',function(event){})   →现在我们要把其中一个click事件注销掉,可能这样写:   ......


    ▪jquery实现文本框倒序输入的例子

     文本框倒序输入是指输入框的焦点始终在最开始的位置,例如当输入123456789时,在输入框上显示的是987654321。 项目需求是两个输入框,一个正序输入,另一个倒序输入。 文本倒序输入: 只要保证输入框的焦点始终在第一位,即可以实现每次输入的都在最前面,即倒序。 代码:   代码示例: function setPosition(ctrl, pos) { //设置光标位置函数 if (ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos, pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); //创建一个选择区域 range.collapse(......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号