Показать и скрыть панель прогресса в Page_Load

Я внедрил некоторую веб-страницу в ASP.NET. Я хочу добавить индикатор выполнения на свою страницу. Поскольку для загрузки страницы требуется несколько минут.Показать и скрыть панель прогресса в Page_Load

Я хочу поставить show Функция бара хода в начале функции Page_Load. И спрячьте его в конце функции Page_Load. Как я могу это реализовать?

Пожалуйста, дайте мне совет. Заранее спасибо.

<%@ Page Language="C#" AutoEventWireup="true" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title></title> 
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <style type="text/css"> 
     #loading 
     { 
      font-family: Arial; 
      font-size: 10pt; 
      border: 5px solid #67CFF5; 
      width: 220px; 
      height: 20px; 
      display: none; 
      position: fixed; 
      background-color: White; 
      z-index: 999; 

      text-align: center; 
      line-height: 20px; 
     } 
    </style> 

    <script type="text/javascript"> 
     function ToggleProgressBar() { 
      var loading = window.jQuery('#loading'); 
      if (loading.is(':visible')) { 
       loading.hide(); 
      } 
      else { 
       var top = Math.max(parseInt($(window).height()/2 - loading.height()/2), 0); 
       var left = Math.max(parseInt($(window).width()/2 - loading.width()/2), 0); 
       loading.css({ top: top, left: left }); 
       loading.show(); 
      } 
     } 

     function blahblah(s, e) { 
      // some blah blah function contents 
     } 

     function blahblah2(s, e) { 
      // some blah blah function contents 
     } 
    </script> 

    <script runat="server"> 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      **// TODO: Show Progress Bar** 

      DelayTime(); // dummy function to delay page load 

      **// TODO: Hide Progress Bar** 
     } 

     protected void DelayTime() 
     { 
      txt_delay.InnerText = ""; 
      for (int i = 0; i < 3000; i++) 
      { 
       txt_delay.InnerHtml += i.ToString("0000") + ", "; 
      } 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <span id="txt_delay" runat="server"></span> 

     <div id="loading" align="center" runat="server"> 
      Loading... 
      <%--<img src="/Images/progress-indicator.gif" alt="" />--%> 
     </div>  
    </div> 
    </form> 
</body> 
</html>

источник

2015-07-28 user2423434

** [Демо 1] (http://projects.lukehaas.me/css-loaders/) **, ** [Демонстрация 2] (https://www.freshdesignweb.com/jquery-css3-loading -progress-bar /) ** –

Мне нравится @GuruprasadRao Demo также вы можете использовать плагин, такой как jQuery BlockUI, чтобы сделать это. –

Другой способ - дать вашему css класс. Затем поместите div как местозаполнитель, где вы хотите, чтобы окно отображалось. Дайте div id и присвойте ему класс css id вашего класса и установите атрибут display равным none. Затем, когда вы будете готовы использовать немного jquery, чтобы изменить отображение с одного на блок. если вы сделали что-то вроде div id = 'myWait' display = 'none' class = 'mycssclass' , затем jquery вдоль строк ('#myWait'). attr ('display', 'block');

источник

2015-07-28 08:33:07 bilpor

Показать и скрыть панель прогресса в Page_Load

ответ

Смежные вопросы