如何使用在Web应用程序

我有一个帆布HTML5 Web应用程序的spinning.gif图像： -如何使用在Web应用程序

我试图同时在画布上通过SQL查询装载加入“spinning.gif”的形象。

<div id="someHiddenDiv" style="display:none;"><img src="/../spinner.gif"/>... Please Wait, the Browser is Working ...</div>

到目前为止，我一直认为这是我的脚本来产生我的想法。

但是，这有几个问题。

1）图像不完全可见的，因为我的页面的顶部部分是面板（文本框，按钮）和它的其余部分是一个画布800通过950（这也是可滚动从一边到另一边）。 2）图像不居中。 3）字母不可见，因为面板的高度足够短以显示spinning.gif图像的前4个圆圈。

我会非常喜欢： -

面板-1有一个文本框。一旦用户在文本框中输入信息并按下提交按钮，整个页面应该到达背景并且spinning.gif图像应该显示在前台。一旦查询完成（ajax），画布被绘制，spinning.gif图像消失，页面难以处理。

这里是我的网页的开头： -

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <span class="style1"><strong>&nbsp;<asp:Panel ID="Panel1" runat="server" BackColor="#999966" 
     BorderStyle="Double" Height="129px" Style="margin-top: 0px" Width="913px"> 
     &nbsp; <span class="style2">&nbsp;Enter Member ID: </span> 
     <br /> 
     &nbsp;&nbsp;<asp:TextBox ID="TextBox3" runat="server" BackColor="Silver" 
      BorderColor="Silver" Height="20px" Style="margin-left: 6px" Width="136px"></asp:TextBox> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <asp:Button ID="Button6" runat="server" BackColor="Silver" Font-Bold="True" 
      Height="28px" OnClientClick="store_memID(); return false;" 
      Style="margin-left: 20px" Text="Submit" Width="78px" /> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<asp:TextBox ID="TextBox4" runat="server" BackColor="#99FF99" 
      BorderColor="Gray" BorderStyle="Double" BorderWidth="2px" 
      Font-Names="Arial Unicode MS" Font-Size="Smaller" ForeColor="Black" 
      Height="77px" OnTextChanged="TextBox4_TextChanged" ReadOnly="True" Rows="3" 
      Style="margin-left: 0px; margin-top: 0px;" TextMode="MultiLine" Width="193px"></asp:TextBox> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <asp:Button ID="Button7" runat="server" BackColor="Silver" BorderStyle="Groove" Text="&lt;&lt;&lt; Past" 
      Width="69px" Height="23px" style="margin-top: 0px" /> 
     <asp:Button ID="Button8" runat="server" BackColor="Silver" BorderStyle="Groove" 
      Style="margin-left: 28px" Text="Future &gt;&gt;&gt;" Width="78px" 
      Height="23px" /> 
     &nbsp;&nbsp;&nbsp;&nbsp; 
     <asp:Button ID="Button9" runat="server" BackColor="Silver" Text="Today" Width="63px" 
      Font-Bold="True" Height="23px" onclick="Button9_Click" /> 



       <%--  <asp:UpdateProgress ID="pnlWait" AssociatedUpdatePanelID="Panel1" runat="server"> 
         <ProgressTemplate> 
          <div style="padding: 0px; margin: 0px; width: 100%; text-align: center;"> 
         <img src="/../spinner.gif" alt="Please wait..." style="padding: 0px; 
          margin: 0px" /> 
         <span style="font-size: small; color: #8969A5;">Finding your search. Please 
          wait...</span> 
          </div></ProgressTemplate></asp:UpdateProgress>--%> 
<%-- 
     <p align="center"><asp:Image ID="ImageStatus" ImageUrl="/../spinner.gif" runat="server" /> 
     <h1><asp:Label ID="lblStatus" runat="server" Text="Loading Please wait..."></asp:Label></h1></p> 
     --%> 

<div id="someHiddenDiv" style="display:none;"><img src="/../spinner.gif"/>... Please Wait, the Browser is Working ...</div> 

    </asp:Panel> 
     <br /> 
    </strong></span> 





    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 





    <canvas id="myCanvas" width="915" height="850" style="border: 2px double #000000;"></canvas> 
    <canvas id="balloon" width=105 height=105></canvas> 

    <script type="text/javascript">

来源

2013-05-13 Philo

请尝试缩小您的问题。为喜欢回答的人节省时间。 – 2013-05-13 19:43:43

我已经使用spin.js为这些类型的纺纱的大幸：http://fgnass.github.io/spin.js/

这是一个伟大的图书馆，使用CSS但瀑布回到旧版浏览器。

来源

2013-05-13 19:41:42

如何使用在Web应用程序

回答

相关问题