利用Bootstrap3搭建基本后端界面

最新推荐文章于 2022-11-08 17:11:04 发布

weixin_34202952

最新推荐文章于 2022-11-08 17:11:04 发布

阅读量191

点赞数

文章标签：后端 javascript python ViewUI

原文链接：https://my.oschina.net/xiaofli/blog/638516

版权

2019独角兽企业重金招聘Python工程师标准>>>

以前做过的一个项目，现在将涉及的bootstrap部分整理出来。
效果图
使用Bootsrap3
去网站http://v3.bootcss.com/学习bootstrap基础。。。
下载bootsrap文件
bootsrap3中文网，bootsrap包含css样式，js插件，图标等
登录页面

login.jsp 引入bootstrap.min.css，bootstrap.min.js

<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">&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;</button>
</form>

这里使用了表单的CSS样式: form-control 按钮样式：btn btn-large btn-primary

详细的表单样式请查看：http://v3.bootcss.com/css/#forms

5，首页菜单

这里调用了一个菜单插件，然后自己整合bootstrap的样式，插件代码：

/*
 * 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);

6.标签页

这里我写了两个方法,都是根据bootstrap样式来写的，只能结合bootstrap使用：addTab,removeTab

/**
 *添加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;
	}
};

7,分页

此处使用了freemarker写了一个pager模板，模版中使用了bootstrap的分页样式

详情查看：http://v3.bootcss.com/components/#pagination

<#-- 自定义的分页指令 (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/>

总结：

使用bootstrap其实就是使用它的css样式，和他提供的一些现成的js组件，如果你有能力你也可以扩展bootstrap的组件。 总体来说这篇文章只是讲了一个大概，只是简单描述了一些bs的样式，记录了一些零碎的代码，如果需要了解更多一些就跟我一起交流吧。

就目前来说bootstrap还不使用与web后端开发，表示在用bootstrap的时候没有easyui方便，现在貌似还没有一个成熟的bs的datagrid。不过bs做前端页面还是挺不错的。

转载于:https://my.oschina.net/xiaofli/blog/638516

weixin_34202952

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用Bootstrap3搭建基本后端界面

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫