这是我的母版页代码：
<%@ Page Title="" Language="C#" MasterPageFile="~/masterPage2.master" AutoEventWireup="true" CodeFile="Shopping_Cart.aspx.cs" Inherits="Shopping_Cart" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/skywhisper.js"></script>
<script type="text/javascript" src="js/progress-bar.js"></script>
<link href="css/style_Progressbar.css" rel="stylesheet" />
<script>
$(window).load(function () { // Make sure that progress bar animation is executed after everything is loaded (fontface)
// Progress bar plugin
$('.progress-bar').progressBar({
//dateStart: '12/24/2010', // Dates must be in format MM/DD/YY
//dateEnd: '12/24/2011',
skin: 1, // 1-green,2-blue,3-orange
percentage: 88 // number 1-100
});
});
</script>
<br />
<div class="grid">
<div class="col3">
<div class="progress-label"><span id="progress-percentage"></span>% READY TO BE LAUNCHED</div>
</div>
<div class="col3">
<div class="progress-bar">
<div class="background"> <div class="bar-left"></div> <div class="bar-tile"></div> <div class="bar-right"></div> </div>
<div class="clear"></div>
</div>
</div>
</div>
这是我的js文件：（progress-bar.js）
(function ($) {
$.fn.extend({
progressBar: function (settings) {
var defaults = {
dateStart: '09/12/2009',
dateEnd: '12/24/2009',
skin: 1,
percentage: -1
}
var settings = $.extend(defaults, settings);
return this.each(function () {
var set = settings; // Load the settings
// Get the width of the progress bar element (in our case -35 px for design)
var width = 864;
// Check if we are dealing with dates of fixed value
if (set.percentage > 0) {
//Get value of 1 unit
var unit = width / 100;
// Just to make sure there is nothing missing
var leftOver = width - (unit * 100);
// Count new width of tile
var newWidth = unit * set.percentage;
// Just pass the argument for percentage (not really great solution)
var percentage = set.percentage;
} else {
// Count the duration in days
var duration = Math.floor((Date.parse(set.dateEnd) - Date.parse(set.dateStart)) / 86400000);
// Get today's date
var date = new Date();
var today = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
// Based on complete duration and duration from start to today count how many percent we went already (round it)
var percentage = Math.round((Math.floor((Date.parse(today) - Date.parse(set.dateStart)) / 86400000)) / (duration / 100));
// Count how many pixels represents 1 day
var unit = width / duration;
// Just to make sure there is nothing missing
var leftOver = width - (unit * duration);
// Count new width from left over + duration from beginning until today
var newWidth = leftOver + ((Math.floor((Date.parse(today) - Date.parse(set.dateStart)) / 86400000) * unit));
}
// make sure that strips always fit
newWidth = newWidth - (newWidth % 24);
// Now we can set skin and width to the progress bar and output percentage
$('#progress-percentage').html(percentage);
$('.bar-left').css('background', 'url(images/bar-left-' + set.skin + '.png) no-repeat');
$('.bar-right').css('background', 'url(images/bar-right-' + set.skin + '.png) no-repeat');
$('.bar-tile').css('background', 'url(images/bar-tile-' + set.skin + '.png) repeat-x');
$('.bar-left').width(11);
$('.bar-tile').animate({ width: newWidth }, newWidth * 4, function () {
$('.bar-right').animate({ width: 11 }, 200);
});
});
}
});
})(jQuery);
＆＃34;进度条（）＆＃34;功能不起作用，但在其他页面（不是内容页面）中，它可以正常工作！
答案 0 :(得分：1)
缺少jQuery框架。请参阅updated Fiddle。
如果添加jQuery，它会对你有用
（并可能在<script type='text/javascript'>代码中指定<script>）
(function($){
$.fn.extend({
progressBar: function(settings) {
var defaults = {
dateStart: '09/12/2009',
dateEnd: '12/24/2009',
skin: 1,
percentage: -1
}
var settings = $.extend(defaults,settings);
return this.each(function(){
var set = settings; // Load the settings
// Get the width of the progress bar element (in our case -35 px for design)
var width = 864;
// Check if we are dealing with dates of fixed value
if (set.percentage>0){
//Get value of 1 unit
var unit = width/100;
// Just to make sure there is nothing missing
var leftOver = width-(unit*100);
// Count new width of tile
var newWidth = unit*set.percentage;
// Just pass the argument for percentage (not really great solution)
var percentage = set.percentage;
}else{
// Count the duration in days
var duration = Math.floor(( Date.parse(set.dateEnd) - Date.parse(set.dateStart) ) / 86400000);
// Get today's date
var date = new Date();
var today = (date.getMonth()+1) + "/" + date.getDate() + "/" + date.getFullYear();
// Based on complete duration and duration from start to today count how many percent we went already (round it)
var percentage = Math.round((Math.floor((Date.parse(today) - Date.parse(set.dateStart )) / 86400000))/(duration/100));
// Count how many pixels represents 1 day
var unit = width / duration;
// Just to make sure there is nothing missing
var leftOver = width-(unit*duration);
// Count new width from left over + duration from beginning until today
var newWidth = leftOver+((Math.floor((Date.parse(today) - Date.parse(set.dateStart )) / 86400000)*unit));
}
// make sure that strips always fit
newWidth = newWidth-(newWidth%24);
// Now we can set skin and width to the progress bar and output percentage
$('#progress-percentage').html(percentage);
$('.bar-left').css('background','url(images/bars/bar-left-'+set.skin+'.png) no-repeat');
$('.bar-right').css('background','url(images/bars/bar-right-'+set.skin+'.png) no-repeat');
$('.bar-tile').css('background','url(images/bars/bar-tile-'+set.skin+'.png) repeat-x');
$('.bar-left').width(11);
$('.bar-tile').animate({width:newWidth},newWidth*4,function(){
$('.bar-right').animate({width:11},200);
});
});
}
});
}) (jQuery);
$(window).load(function() {
// Progress bar plugin
$('.progress-bar').progressBar({
//dateStart: '12/24/2010', // Dates must be in format MM/DD/YY
//dateEnd: '12/24/2011',
skin: 1, // 1-green,2-blue,3-orange
percentage: 88 // number 1-100
});
});