JQuery на странице содержимого не работает (asp.net)

0

это мой код главной страницы:

<%@ 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 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);

Функция "progress-bar()" не работает, но на другой странице (это не контент-страница) она работает прямо!

  • 1
    Где находится ContentPlaceHolder1_TextBox1 ? На мой взгляд document.getElementById('<%=TextBox1.ClientID%>').value более подходит
  • 0
    извините, я редактирую свой вопрос
Показать ещё 3 комментария

1 ответ

1

Рамка jQuery отсутствовала. См. Обновленный 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 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  

        });
});
  • 0
    : спасибо, это работает, но на моей главной странице я использую около 10 файлов js, из-за них progress-bar.js не работает на странице содержимого!
  • 0
    Вы призываете к другим фреймворкам, таким как прототип? Если да, не забудьте перейти в jQuery.noConflict() . И, конечно, замените все jQuery $ на jQuery снаружи на функцию jQuery, где (function($){ позволяет вам вызывать jQuery с помощью $

Ещё вопросы

Сообщество Overcoder
Наверх
Меню