当前位置:  编程技术>jquery

jquery进度条实现代码一例

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

    本文导语:  jquery进度条实现代码 效果图: 1,html代码:   jquery进度条列-www. 序号进度条进度备注其他 1 20 20 进度太慢了工作一 2 30 30 加油任务二 3 80 80 加油!!任务三 4 80 80 加油!!任务三   ...

jquery进度条实现代码

效果图:

1,html代码:
 





jquery进度条列-www.






序号进度条进度备注其他
1 20 20 进度太慢了工作一
2 30 30 加油任务二
3 80 80 加油!!任务三
4 80 80 加油!!任务三




 

需要把第二列的数值替换成条状图,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 = '

';
$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 = '

';
$td.html(strdivjdt);jquery html()方法,更改标记的 inner html属性
$td.attr("title",jd);//jquery attr()方法,更改标记的属性,title属性是的鼠标移至td时有对应的提示值友好显示出来   } });
}
window.onload = showjdt;


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

    
 
 

您可能感兴趣的文章:

  • jQuery进度条插件 jQuery Progression
  • jQuery进度条插件 jQuery progressBar
  • jquery进度条代码 jquery模拟页面加载进度
  • jQuery 进度按钮 ProgressButtonStyles
  • jQuery 进度条插件 nanobar.js
  • jQuery 进度插件 Progress Bar
  • jQuery 进度条插件 NProgress
  • jquery进度条效果示例
  • jquery实现的一个简单进度条效果实例
  • 一个简单的jquery进度条示例
  • jquery进度条简单示例
  • jquery简单进度条一例
  • 简单型jQuery进度条插件的实现代码
  • Jquery Uploadify上传带进度条的简单实例
  • 通过javascript库JQuery实现页面跳转功能代码
  • jquery代码-如何使用jQuery来解析xml
  • jQuery概述,代码举例及最新版下载
  • jquery代码-如何使用jQuery来检测右键和左键的鼠标单击两种情况
  • jQuery 禁用右键菜单的简单代码
  • jQuery页面加载完毕再执行代码多种方法
  • jquery的父子兄弟节点查找示例代码
  • JQuery实现元素屏幕居中显示的代码
  • jQuery 代码模块化 TerrificJS
  • 在myeclipse中如何加入jquery代码提示功能
  • jquery弹窗代码示例
  • Jquery在指定DIV加载HTML示例代码
  • jquery遍历checkbox代码与说明
  • JQUERY 设置SELECT选中项代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jquery代码-如何使用多个属性来进行过滤
  •  
    本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.169IT.COM)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jquery 回车登录的实现方法
  • 基于jQuery实现的MVC开发框架 CorMVC
  • jQuery Trim去除字符串首尾空字符的实现方法说明
  • jquery插件开发之实现jquery手风琴功能分享
  • jquery实现的导航固定效果
  • jquery 实现弹出div位于屏幕正中(图文)
  • jquery特效 table鼠标滑过变色的实现代码
  • Jquery点击高亮显示的实现代码
  • jquery 选择块与改变属性值的实现方法
  • 60秒倒计时的jquery实现代码
  • jquery半透明设置实现代码
  • jquery 实现文本框焦点自动跳转
  • jquery实现弹出层完美居中效果
  • jquery 回车事件的实现代码
  • jquery实现input输入框实时输入触发事件代码
  • jquery怎么实现图片淡入淡出?示例
  • jquery 屏蔽某区域内所有元素 禁止输入的实现代码
  • jquery实现div层的隐藏或显示
  • Jquery 动态实现图片缩略的代码
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn


  • 站内导航:


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

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

    浙ICP备11055608号