Bootstrap3.0学习第十六轮（进度条、媒体对象、列表组、面板） - aehyok

本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。

Bootstrap3.0学习第十六轮（进度条、媒体对象、列表组、面板） - aehyok  阅读原文»

前言

阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文主要来讲解以下内容

1.进度条

2.媒体对象

3.列表组

4.面板

5.总结

进度条

提供工作或动作的实时反馈，只用简单且灵活的进度条。

跨浏览器兼容性

进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。

基本案例

默认的进度条。

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>

有意义的替换

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div>

条纹效果

用一个渐变可以创建条纹效果，在IE8中不可用。

<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress

自己设计的java web消息提示机制 - ValiancyHe  阅读原文»

　　最近在做个类CMS的一个系统，前端展示都OK了，在做后台管理，就是对数据库的增删改查。使用SSH实现功能倒也蛮简单的，只是为了人性化的设计，需要做一些提示机制，比如用户删除了一条数据给个删除成功的提示，添加或者修改一条记录同样给个提示，或者不成功给个原因的弹窗，我所谓的消息就是指这些消息。比如进行一个数据列表管理，增删改成功后都会回到列表，这时最有得有个操作结果的提示啊。

　　由于是一个人在写后台，为了节省工作量（避免写那些显示错误提示的样式~），我决定全部用js的alert来做这件事，当然用户体验可能稍差，但对于一个后台就没那么多要求啦。在后台管理中，一般是用post请求来进行操作，而post请求是要请求到后台的，前台又需要用到js来展示，这就意味着需要把后台处理请求后的数据再传到前台来。web开发经验不多的我想到了两种思路，一是把post请求全部写成ajax，在跳转页面前显示弹窗，二是把消息存到session里，当跳转页面后显示弹窗。第一种思路会大大增加工作量，并且我们都知道js极不方便调试，所以我果断舍弃了那种做法。

　　使用session的办法来实现，在post请求处理页面前，将要显示的message放到session里面，然后再跳转页面。后台存放message的方法多样，根据不同的框架有不同的代码，只要定义一个session变量即可，类似于session.setAttribute("message",message)，对于前端页面，我写了个messag.jsp的页面，在所有前端jsp页面的底部include了这个页面，在底部include是想让页面载入完后在弹窗，就不会出现一个空白页面弹窗了，这样感觉体验要好一点。如果你是拆分了header foot等页面就更好了，只需要在foot页面潜入message.jsp页面即可。message.jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
if(session.getAttribute("message")!=null&&session.getAttribute("message").toString().trim().length()>0){
out.print("<script>alert('"+session.getAttribute("message").toString().trim()+"');</script>");
session.setAttribute("message",null);
}
%>

　　这样一来一旦有message需要显示，前端就会多出一段js代码来，并且执行完后会把session里的这个变量清空。功能实现了，却出现了一个问题，就是因为这是在文件里写了段js代码来弹窗，而判断是在jsp的java代码里写的，这意味着，弹窗后，点击到别的页面，然后通过history.go(-1)或者浏览器的back按钮返回到这个页面时，还是会继续弹窗，因为历史记录里的有那段js的弹窗代码！不过我马上想到了解决方案，就是在输出的js代码里加一句history.go(0)，就是刷新当前页面，刷新之后就没有那段js代码了，再返回也没事了。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
if(session.getAttribute("message")!=null&&session.getAttribute("message").toString().trim().length()>0){
//use history.go(0) to refresh ,avoid to show the message again
out.print("<script>alert('"+session.getAttribute("message").toString().trim()+"');history.go(0)</script>");
session.setAttribute("message",null);
}
%>

　　测试了一下，果然没问题了，但过了一阵子，又发现了新的问题，那就是如果post失败的话，还停留在当前页面的话，由于刷新问题，会一直post，然后就一直弹窗！

　　好吧，这个方法貌似有问题了，但是问题是用来解决的，问题的原因是因为后台判断是否输出js，导致了不同步，即只要执行了js，不管后台到底有没有message，都会弹窗。分析了就可以找到方案了，那就是js执行时要判断后台需不需要显示message，这样就没问题了。但是js又没法直接操作session（一个前台，一个后台。。），所以需要与后台通信，又要不引起注意的通信，那就只有ajax了，不过这个ajax可能是最简单的ajax了，没准还可以不用ajax呢，求大神指教。。 后台ajax代码，使用的struts2的action

public class MessageAction extends BaseAction {

public String execute(){
String message="";
if(getSession().get("message")!=null){
message=getSession().get("message").toString();
getSession().put("message", null);
}

getResponse().setContentType("text/html;charset=utf-8");
PrintWriter out;
try {
out = getResponse().getWriter();
out.write(JsonUtil.string2json(message));
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}

前端message.jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script type="text/javascript">
$(document).ready(function(){
$.post("admin/message.action",//这个需要改成自己的action地址
{
},
function(data,status){
if(data!=null&&data.length>0){
alert(data);
}
});
});
</script>

　　解决问题，觉得这个过程还蛮有意思的，经过自己思考解决问题还是蛮有成就感的O(∩_∩)O

本文链接：http://www.cnblogs.com/ValiancyHe/p/3417620.html，转载请注明。

阅读更多内容