利用Bootstrap3搭建基本后端界面

<form id="loginForm" class="form-signin" style="margin-top:50px;" method="post" action="${rc.contextPath}/main/login">
<h2 class="form-signin-heading"></h2>
<input type="text" name="loginName" class="form-control validate[required]" placeholder="请输入用户名">
<input type="password" name="password" class="form-control validate[required]" placeholder="请输入密码">
<button class="btn btn-large btn-primary btn-block " type="submit">   登录   </button>
</form>

/*
* jQuery UI Multilevel Accordion v.1
*
* Copyright (c) 2011 Pieter Pareit
*
* http://www.scriptbreaker.com *
*/

//plugin definition
(function($){
$.fn.extend({

//pass the options variable to the function
accordion: function(options) {

var defaults = {
accordion: 'true',
speed: 300,
closedSign: '[+]',
openedSign: '[-]'
};

// Extend our default options with those provided.
var opts = $.extend(defaults, options);
//Assign current element to variable, in this case is UL element
var $this = $(this);

//add a mark [+] to a multilevel menu
$this.find("li").each(function() {
if($(this).find("ul").size() != 0){
//add the multilevel sign next to the link
$(this).find("a:first").prepend("<span>"+ opts.closedSign +"</span>");

//avoid jumping to the top of the page when the href is an #
if($(this).find("a:first").attr('href') == "#"){
$(this).find("a:first").click(function(){return false;});
}
}
});

//open active level
$this.find("li.active").each(function() {
//$(this).parents("ul").slideDown(opts.speed);
$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
});

var $childFirstA = $this.children().find("a:first");

$childFirstA.click(function(){
$(this).parent().siblings().each(function(){
if($(this).has("ul")){
$(this).find("ul").slideUp();
$(this).find("ul").parent("li").find("span:first").html(opts.closedSign);
}
});
$childFirstA.removeClass("ac");
$(this).addClass("ac");
});

$this.find("li a").click(function() {
if($(this).parent().find("ul").size() != 0){
if(opts.accordion){
//Do nothing when the list is open
if(!$(this).parent().find("ul").is(':visible')){
parents = $(this).parent().parents("ul");
visible = $this.find("ul:visible");
visible.each(function(visibleIndex){
var close = true;
parents.each(function(parentIndex){
if(parents[parentIndex] == visible[visibleIndex]){
close = false;
return false;
}
});
if(close){
if($(this).parent().find("ul") != visible[visibleIndex]){
$(visible[visibleIndex]).slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").html(opts.closedSign);
});

}
}
});
}
}
if($(this).parent().find("ul:first").is(":visible")){
$(this).parent().find("ul:first").slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
});

}else{
$(this).parent().find("ul:first").slideDown(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
});
}
}
});
}
});
})(jQuery);

/**
*添加tab
* @param {Object} menuId   tabid
* @param {Object} url      taburl
* @param {Object} menuName tabName
*/
var addTab = function(menuId, url, menuName) {

var $iframeContent  = $("#tab-content");
var $iframe = $iframeContent.find("iframe[id='"+menuId+"']");
var $iframeTitle = $("#tab-title");
var hrefId = "#"+menuId;

var hasTab = false;
$iframeTitle.find("li a").each(function(){
var thisHref = $(this).attr("href");
if(spfilter(thisHref)==hrefId){
hasTab = true;
return;
}
});

$iframeTitle.find("li").removeClass("active");
$iframeContent.find("iframe").removeClass("active");
if (hasTab) {
$iframe.addClass("active");
$iframeTitle.find("li a").each(function(){
if(spfilter($(this).attr("href"))==hrefId){
$(this).parent().addClass("active");
}
});
$iframe.attr("src",url);
}else{
var dTitle ="<li class='active' style='position:relative'><a href='"+hrefId+"' data-toggle='tab'>"+menuName+"<span   class='close' style='position:absolute;right:2px;top:-1px;'>×</span></a></li>";
var dIframe = "<iframe frameborder='0' scrolling='no' marginwidth='0' marginheight='0' onLoad=\"iFrameHeight('"+menuId+"')\" class='tab-pane active ' id='"+menuId+"' src='"+url+"' style='width: 100%; min-height: 600px; border: 0'></iframe>";
$iframeTitle.append(dTitle);
$iframeContent.append(dIframe);
}
};

//删除tab
var removeTab = function(obj){
var $tabContent = $("#tab-content");
var $pLi = $(obj).parents("li");
var iFrameId = spfilter($(obj).parent().attr("href"));
var isActive = $pLi.hasClass("active");

if(isActive){
var $pNextLi = $pLi.next();
var $pPrevLi = $pLi.prev();
//如果有下一个tab
if($pNextLi.length){
var nextIframeId  = spfilter($pNextLi.find("a").attr("href"));
$pNextLi.addClass("active");
$tabContent.find(nextIframeId).addClass("active");
}else{
if($pPrevLi.length){
var prevIframeId = spfilter($pPrevLi.find("a").attr("href"));
$pPrevLi.addClass("active");
$tabContent.find(prevIframeId).addClass("active");
}
}
}
$tabContent.find(iFrameId).remove();
$pLi.remove();
};
//绑定关闭tab事件
$(document).on("click","#tab-title li a .close",function(){
removeTab(this);
});

/**
*解决ie7下获取href属性包含http的问题
*/
var spfilter = function(thisHref){
var index = thisHref.indexOf("//");
if(index>0){
return "#"+thisHref.split("#")[1];
}else{
return thisHref;
}
};

<#-- 自定义的分页指令 (powered by DongQihong)
属性：
pageNo      当前页号(int类型)
pageSize    每页要显示的记录数(int类型)
toURL       点击分页标签时要跳转到的目标URL(string类型)
recordCount 总记录数(int类型)
-->
<#macro pager pageNo pageSize toURL recordCount>

<#if recordCount==0><#return/></#if>
<#-- pageCount 保存总页数 -->
<#assign pageCount=((recordCount + pageSize - 1) / pageSize)?int>
<#-- 输出分页样式 -->
<#-- 页号越界处理 -->
<#if (pageNo > pageCount)>
<#assign pageNo=pageCount>
</#if>
<#if (pageNo<1)>
<#assign pageNo=1>
</#if>
<div>
<form method="post" action="${toURL}" name="qPagerForm" id="pageForm">
<ul class="pagination">
<#nested>
<#-- 把请求中的所有参数当作隐藏表单域(无法解决一个参数对应多个值的情况) -->
<#list RequestParameters?keys as key>
<#if (key!="page" && RequestParameters[key]??)>
<input type="hidden" name="${key}" value="${RequestParameters[key]}"/>
</#if>
</#list>
<input type="hidden" name="page">
<#-- 上一页处理 -->
<#if (pageNo == 1)>
<li class="disabled"><span>«<span class="sr-only">(current)</span></span></li>
<#else>
<li><a href="javascript:goToPage(${pageNo - 1})">«</a></li>
</#if>
<#-- 如果前面页数过多,显示... -->
<#assign start=1>
<#if (pageNo > 4)>
<#assign start=(pageNo - 2)>
<li><a href="javascript:goToPage(1)">1</a></li>
<li><span>...<span class="sr-only">(current)</span></span></li>
</#if>
<#-- 显示当前页号和它附近的页号 -->
<#assign end=(pageNo + 2)>
<#if (end > pageCount)>
<#assign end=pageCount>
</#if>
<#list start..end as i>
<#if (pageNo==i)>
<li class="active"><span>${i}<span class="sr-only">(current)</span></span></a></li>
<#else>
<li><a href="javascript:goToPage(${i})">${i}</a></li>
</#if>
</#list>
<#-- 如果后面页数过多,显示... -->
<#if (end < pageCount - 1)>
<li><span>...<span class="sr-only">(current)</span></span></li>
</#if>
<#if (end < pageCount)>
<li><a href="javascript:goToPage(${pageCount})">${pageCount}</a></li>
</#if>
<#-- 下一页处理 -->
<#if (pageNo == pageCount)>
<li class="disabled"><span>»<span class="sr-only">(current)</span></span></li>
<#else>
<li><a href="javascript:goToPage(${pageNo + 1})">»</a></li>
</#if>
</form>
<script language="javascript">
function goToPage(no){
var $qForm=$("form[name='qPagerForm']");
if(no>${pageCount}){no=${pageCount};}
if(no<1){no=1;}
$qForm.find("input[name='page']").val(no);
$qForm.submit();
}
</script>
</div>
</#macro>

<@wordsPage.pager pageNo=page.number pageSize=10 toURL="${rc.contextPath}/user/page" recordCount=page.totalElements/>