m.lom599.com_手机版乐白家网址_乐百家手机首页登录

使用AJAX实现Web页面进度条的实例分享,Bootstrap按

作者: 手机版乐白家网址  发布:2019-07-10

按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。

在应用程序的安装和下载过程中,进度条的使用已经是非常普遍了。进度条可以用来表识项目的完成进度,可以用百分比或数字表示,可以水平放置。利用Ajax技术创建进度条,功能显得更加强大的快捷。
现在创建一个实例,以演示使用Ajax技术实现进度条。该实例同样可以分为客户端代码和服务端代码。
 
1,服务端代码    服务端代码主要实现一句客户端的请求信息,返回相应的百分比数字。打开记事本,输入下列代码:

Bootstrap提供了一个叫wysiwyg的富文本组件,用来显示和编辑富文本数据,但如何将编辑后的数据保存到MySQL数据库,却不得而知。另外,如何将mysql数据库中的数据显示到wysiwyg也不得而知,对于这两个问题,让我来告诉你解决方案!

把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件。

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> 
<%! 
int counter = 1;//注意:多用户将共享此变量,此进度条只适合单用户 
%> 
<% 
 String task = request.getParameter("task"); 
  String res = ""; 

  if (task.equals("create")) { 
   res = "1"; 
   counter = 1; 
  } 
  else { 
   String percent = ""; 
   switch (counter) { 
    case 1: percent = "10"; break; 
    case 2: percent = "23"; break; 
    case 3: percent = "35"; break; 
    case 4: percent = "51"; break; 
    case 5: percent = "64"; break; 
    case 6: percent = "73"; break; 
    case 7: percent = "89"; break; 
    case 8: percent = "100"; break; 
   } 
   counter  ; 

   res = "<percent>"   percent   "</percent>"; 
  } 

  // PrintWriter out = response.getWriter(); 
  response.setContentType("text/xml"); 
  response.setHeader("Cache-Control", "no-cache"); 
  out.println("<response>"); 
  out.println(res); 
  out.println("</response>"); 
  out.close();  
%> 

一、效果展示

<div class="btn-toolbar" role="toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button>
  <button type="button" class="btn btn-default">4</button>
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">7</button>
  <button type="button" class="btn btn-default">8</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">9</button>
 </div>
 </div>

 
将上述代码保存,名称为ProgressBar.jsp。在该文件中,声明了一个变量counter,并赋值为1,该变量是进度条返回百分比数字的依据。在下面使用request对象获取客户端传送的变量task的值,如果该值为create,表示需要重新创建进度条,并设定counter的值为1;如果task不是create,则会依据counter的值返回百分比数字,完成一次操作,counter值加1。
 
2,客户端代码 本实例的客户端代码主要实现依据返回百分比数字显示进度条的状态。打开记事本,输入下列代码:

首先,我们先来看看效果如何:

图片 1

<html> 
 <head> 
 <title>JSP Ajax 进度条</title> 
 <script type="text/javascript"> 
  var xmlHttp; 
  var bar_color = 'blue'; 
  var span_id = "yellow"; 
  var clear = " " 

  function createXMLHttpRequest() { 
   if (window.ActiveXObject) { 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else if (window.XMLHttpRequest) { 
    xmlHttp = new XMLHttpRequest();     
   } 
  } 

  function go() { 
   createXMLHttpRequest(); 
   checkDiv(); 
   var url = "ProgressBarJsp.jsp?task=create"; 
   xmlHttp.open("GET", url, true); 
   xmlHttp.onreadystatechange = goCallback; 
   xmlHttp.send(null); 
  } 

  function goCallback() { 
   if (xmlHttp.readyState == 4) { 
    if (xmlHttp.status == 200) { 
     setTimeout("pollServer()", 2000); 
    } 
   } 
  } 

  function pollServer() { 
   createXMLHttpRequest(); 
   var url = "ProgressBarJsp.jsp?task=poll"; 
   xmlHttp.open("GET", url, true); 
   xmlHttp.onreadystatechange = pollCallback; 
   xmlHttp.send(null); 
  } 

  function pollCallback() { 
   if (xmlHttp.readyState == 4) { 
    if (xmlHttp.status == 200) { 
     var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data; 

     var index = processResult(percent_complete); 
     for (var i = 1; i <= index; i  ) { 
      var elem = document.getElementById("block"   i); 
      elem.innerHTML = clear; 

      elem.style.backgroundColor = bar_color; 
      var next_cell = i   1; 
      if (next_cell > index && next_cell <= 9) { 
       document.getElementById("block"   next_cell).innerHTML = percent_complete   "%"; 
      } 
     } 
     if (index < 9) { 
      setTimeout("pollServer()", 2000); 
     } else { 
      document.getElementById("complete").innerHTML = "网站已完成加载!"; 
     } 
    } 
   } 
  } 

  function processResult(percent_complete) { 
   var ind; 
   if (percent_complete.length == 1) { 
    ind = 1; 
   } else if (percent_complete.length == 2) { 
    ind = percent_complete.substring(0, 1); 
   } else { 
    ind = 9; 
   } 
   return ind; 
  } 

  function checkDiv() { 
   var progress_bar = document.getElementById("progressBar"); 
   if (progress_bar.style.visibility == "visible") { 
    clearBar(); 
    document.getElementById("complete").innerHTML = ""; 
   } else { 
    progress_bar.style.visibility = "visible" 
   } 
  } 

  function clearBar() { 
   for (var i = 1; i < 10; i  ) { 
    var elem = document.getElementById("block"   i); 
    elem.innerHTML = clear; 
    elem.style.backgroundColor = "white"; 
   } 
  } 
 </script> 
 </head> 
 <body onload="go();"> 
 <h1 align=center>网站正在加载中,请稍候</h1> 

 <p> 
 <table align="center"> 
  <tbody> 
   <tr><td> 
    <div id="progressBar" style="padding:2px;border:solid yellow 2px;visibility:hidden"> 









    </div> 
   </td></tr> 
   <tr><td align="center" id="complete"></td></tr> 
  </tbody> 
 </table> 
 </body> 
</html> 

图片 2

按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器div.dropdown换成了div.btn-group

将上述代码保存,名称为JspprogressBar.html。在该文件中,JavaScript函数createXMLHttpRequest()主要用来创建XMLHttpRequest对象,go()函数完成想服务器端发送异步请求,该函数在网页加载时被调用,其主要作用就是通知服务器,并在客户端开始运行进度条。GoCallback()函数主要用于处理服务端的响应,并每隔2秒调用pollServer()函数也是用于向服务端发送异步请求,主要请求服务器端响应的百分数字。PollCallback()函数主要用于处理服务器端响应,即依据服务器端的返回的数字,指定进度条的显示状态。这里需要注意的是,goCallback()函数只执行一次,而PollCallback()函数可以执行多次,其余的三个函数都是实现进度条的辅助函数。
 
3,运行 将上述两个Jsp文件复制到JSP目录下。运行效果图如下:

富文本中有一张图片,还有一个数字列表
我们可以看到编辑后的数据保存成功,以及保存后对应的展示。

<div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  按钮下拉菜单

 </button>
 <ul class="dropdown-menu">
  <li><a href="#">菜单列表1</a></li>
  <li><a href="#">菜单列表2</a></li>
  <li><a href="#">菜单列表3</a></li>
  <li><a href="#">菜单列表4</a></li>
  <li><a href="#">菜单列表5</a></li>
 </ul>
 </div>

图片 3

二、富文本

bootstrap.css文件

您可能感兴趣的文章:

  • 使用Lua编写Web端模板引擎的实例代码分享
  • java web验证码实现代码分享
  • JavaWeb学习笔记分享(必看篇)
  • Java Web端程序实现文件下载的方法分享
  • 分享js粘帖屏幕截图到web页面插件screenshot-paste
  • 利用jQuery设计一个简单的web音乐播放器的实例分享
  • 分享提高ASP.NET Web应用性能的技巧
  • PHP Web木马扫描器代码分享
  • 一张Web前端的思维导图分享
  • 手机Web APP如何实现分享多平台功能

度娘对于富文本的解释如下:

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
 outline: 0;
}
.btn-group > .btn   .dropdown-toggle {
 padding-right: 8px;
 padding-left: 8px;
}
.btn-group > .btn-lg   .dropdown-toggle {
 padding-right: 12px;
 padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
 -webkit-box-shadow: none;
  box-shadow: none;
}

富文本格式(Rich Text Format, 一般简称为RTF)是由微软公司开发的跨平台文档格式。大多数的文字处理软件都能读取和保存RTF文档。RTF是Rich TextFormat的缩写,意即多文本格式。这是一种类似DOC格式(Word文档)的文件,有很好的兼容性,使用Windows“附件”中的“写字板”就能打开并进行编辑。RTF是一种非常流行的文件结构,很多文字编辑器都支持它。一般的格式设置,比如字体和段落设置,页面设置等等信息都可以存在RTF格式中,它能在一定程度上实现word与wps文件之间的互访。
如果说富文本不包含图片,我们可以使用普通的html转码方法,见标题四;如果富文本包含图片,普通的html转码已经满足不了我们了,就需要用到jquery.base64.js,见标题三。

按钮的向下向上三角形

那么同时,我们看一看mysql字段的定义:

按钮的向下三角形,是通过在button标签中添加span标签元素,且类名为.caret

`description` longtext NOT NULL COMMENT '项目详细描述',

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 按钮下拉菜单

</button>

字段类型为longtext(LongText 最大长度4294967295个字元 (2^32-1),虽然我也不知道到底有多大)。

这个三角形式通过css来实现的,下面是bootstrap.css源码:

三、jquery.base64

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:使用AJAX实现Web页面进度条的实例分享,Bootstrap按

关键词: m.lom599.com