Description: A great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can be invoked multiple times to display multiple bars on the same page. Script works in both IE5+ and NS6+.
Note that this script by default doesn't perform any action other than animating the progress bar. It's up to you to create helper functions to accomplish any relevant tasks.
Demo:
Directions:
Step 1: Insert the following script in the HEAD section of your page
Select All
The above script references an external .js file, which you can download below:
xp_progress.js (download by right clicking, and selecting "Save As")
Be sure to upload this .js file to your web server.
Step 2: Within the BODY of your page where you wish the Progress Bar to appear, add the below script:
<script type="text/javascript">
var bar1= createBar(300,15,'white',1,'black','blue',85,7,3,"");
</script>
That's it! Read on for an explanation of each parameter within function createBar().
Explanation of parameters within createBar()
To customize the look of the progress bar, simply pass in different values into createBar():
var xyz = createBar(width, height, backgroundColor, borderWidth, borderColor, blockColor, scrollSpeed, blockCount, actionCount, actionString)
They are:
-
xyz - An arbitrary variable name to store the bar reference and must be unique. This variable will have a few different methods (explained later) which can be used to control some of each bar's behavior. This variable IS REQUIRED if you wish to use these methods. However, if you do not plan to use the methods, then the variable assignment is not necessary, but it won't hurt to use it anyway.
-
width- Total width of the entire bar in pixels.
-
height- Total height of the entire bar in pixels.
-
backgroundColor- Background color of the bar. Use valid CSS color or HEX color code value.
-
borderWidth- The width of the border around the bar, in pixels.
-
borderColor- The color of the border around the bar. Use valid CSS color or HEX color code value.
-
blockColor- The darkest color of the individual blocks. The color will progressively become more transparent. Use valid CSS color or HEX color code value.
-
scrollSpeed- The delay, in milliseconds, between each scroll step. Use smaller values for faster scroll speeds.
-
blockCount- The total number of blocks to use.
-
actionCount - The number of times the bar is to scroll before actionString is performed.
-
actionString - The javascript function, in string form, to execute once the bar has scrolled actionCount times. Set this to an empty string to do nothing. If doing nothing, you can use any number as actionCount.
So for example, by changing the parameter settings, you can display a different looking Progress Bar, and one that executes a function after the Progress Bar has scrolled 3 cycles:
<script type="text/javascript">
var bar2= createBar(320,15,'white',1,'black','green',85,7,3,"alert('Hi there')");
</script>
(alert message disabled in actual demo).
Explanation of methods() to control the progress bar
Each bar, when assigned to a variable (ie: bar2) has several control methods you can call directly via javascript or in a link. These methods allow you to do things like pause the Progress Bar, hide or reveal it. Each of these is described below, along with an example which will control the bar above.
Method |
Example |
Description |
var.toggleBar() |
toggle pause |
This method will toggle the pause status of the bar. If it is paused, it will un-pause it, and vice-versa. The code for the link at left is: <a href="javascript:bar2.togglePause()">toggle pause</a>
|
var.hideBar() |
Hide Bar 2 |
This method will show the bar. If it is already visible, it will do nothing. The code for the link at left is: <a href="javascript:bar2.hideBar()">Hide Bar 2</a>
|
var.showBar() |
Show Bar 2 |
This method will hide the bar. If it is already hidden, it will do nothing. The code for the link at left is: <a href="javascript:bar2.showBar()">Show Bar 2</a>
|
Try clicking the links in the middle column to see how it affects the green Progress Bar.
Just in case you're confused how all this fits together, here's an example that scrolls a Progress Bar for 5 cycles before pausing and redirects to another page:
<script type="text/javascript">
function redirectpage(){
bar3.togglePause()
window.location="http://www.javascriptkit.com"
}
var bar3= createBar(320,15,'white',1,'black','red',85,7,5,"redirectpage()");
</script>
分享到:
相关推荐
xp风格进度条
一目了然很好用。大家共享
WINXP服务优化WINXP服务优化WINXP服务优化WINXP服务优化WINXP服务优化
WinXP常见进程WinXP常见进程 WinXP常见进程 WinXP常见进程
FFMPEG WinXP 32位最终版本 ffmpeg-3.4.1-WinXP 32位WinXP开用~
非常漂亮的一款的仿WINXP系统风格的进度条源码,VB专用版本,它还可以以标准XP风格、**滑滚动、搜索风格等样式显示,放出来与大家共享。
非常漂亮的一款的仿WINXP系统风格的进度条源码,VB专用版本,它还可以以标准XP风格、平滑滚动、搜索风格等样式显示,放出来与...
详细介绍如何在winxp下如何建立ftp服务器。
详细彻底解剖WinXP,详细彻底解剖WinXP,详细彻底解剖WinXP,详细彻底解剖WinXP,详细彻底解剖WinXP
移动WINXP安装攻略移动WINXP安装攻略移动WINXP安装攻略
winxp家庭版系统winxp_home
F2:将查询结果保存至CSV文件,以TAB为分隔. F3:打开已保存的SQL语句.TXT格式. F4:保存SQL语句为TXT格式. F5:执行SQL. 支持选中SQL查询. ...WINXP+VS2005+ODBC(Progress OpenEdge 10.1C Driver)测试通过.
WinXP使用技巧WinXP使用技巧WinXP使用技巧WinXP使用技巧WinXP使用技巧WinXP使用技巧WinXP使用技巧WinXP使用技巧WinXP使用技巧
JDK 1.6 JDK 1.6 JDK 1.6 JDK 1.6 JDK 1.6 winxp专用 winxp专用winxp专用winxp专用winxp专用winxp专用
联想工程师专用小工具 WinXP_7更新报错修复工具V1.81.1联想工程师专用小工具 WinXP_7更新报错修复工具V1.81.1联想工程师专用小工具 WinXP_7更新报错修复工具V1.81.1联想工程师专用小工具 WinXP_7更新报错修复工具V...
近几年,新品牌机的硬盘出厂默认模式均为SATA模式,原版的WinXP光盘无法找到硬盘,其中一些品牌机可以通过修改BIOS设置解决问题,但是有些品牌机(比如HP)的BIOS是不提供硬盘模式更改的,由此导致用户不能安装WinXP...
用于winxp下配置PHP开发语言的winxp目录的三个文件 php.exe php.ini-production php-win.exe
仿winxp popup 仿winxp popup 仿winxp popup仿winxp popup 仿winxp popup
winxp_ddk总共包含3个分包winxp_ddk_1、winxp_ddk_2、winxp_ddk_3,全部下载后一起解压。
winxp装机驱动