写在前面
本人主要做服务器端这块，对前端页面了解不是很深，最近公司要求做一个门户网站，我就使用bootstrap样式框架来写，我把中间用到的小模块收集起来做个记录，下次直接复制使用
注：以下基于bootstrap3.1.1
引入样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="//cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
水平导航
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="home.html">首 页</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#myModal">下载</a>
</li>
<li>
<a href="investment.html">投资顾问</a>
</li>
<li>
<a href="help.html">帮助</a>
</li>
<li>
<a href="about.html">关于</a>
</li>
</ul>
<!--
应该能看懂navbar-right的用法吧
-->
<form class="navbar-form navbar-right">
<a class="btn" id='btnCtrl' href="#">登录</a>
<a class="btn btn-primary" href="#">注册</a>
</form>
</div>
</div>
</nav>
水平导航
bootstrap轮播
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" style="position: relative;">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<script>
$('#myCarousel').carousel({
interval: 5000
});
$('#myCarousel').on('slide.bs.carousel', function() {
console.log('start');
});
$('#myCarousel').on('slid.bs.carousel', function() {
console.log('end');
});
</script>
轮播效果
图片自适应
页头加上
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
图片加上img-responsive类名
清除浮动
<div class="clearfix" style="margin-top:49px;"></div>
让div 居中
.help-box{
width:65%;
height:100px;
border:1pxsolid#2A70C8;
border-radius:10px;
margin-bottom:10px;
/*width:auto;*/
margin-left:auto;
margin-right:auto;
}
点击文字折叠
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse1">
标题一
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
内容一
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse2">
标题二
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
内容二
</div>
</div>
</div>
文字折叠面板
左侧折叠菜单
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<ul id="main-nav" class="main-nav nav nav-tabs nav-stacked text-center
" style="">
<li>
<a href="#applyAccount" class="nav-header" data-toggle="collapse">
一级菜单
</a>
<ul id="applyAccount" class="nav nav-list secondmenu collapse" style="">
<li>
<a href="#1_1"> 二级菜单</a>
</li>
<li>
<a href="#1_2"> 二级菜单</a>
</li>
</ul>
</li>
<li>
<a href="#" class="nav-header" data-toggle="collapse">
一级菜单
</a>
</li>
</ul>
</div>
<div class="col-lg-10">
右侧内容
</div>
</div>
</div>
左侧菜单效果
返回顶部
这里使用的是jquery的一个插件，引入js，只需几句js代码，很好用jquery.goup.min.js
$.goup({
trigger:100,
bottomOffset:150,
locationOffset:100,
title:'返回顶部',
titleAsText:true
});
鼠标进入div 颜色改变
<!--第一种-->
<div onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"></div >
<!--第二种-->
<style>
.d_over{
background-color:#307172;
}
.d_out{
background-color:#EFEFEF;
}
</style>
<div class="d_out" onmouseover="this. className='d_over'" onmouseout="this. className='d_out'">div 背景颜色</div >
css3 过渡 div 变大
* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
}
*:hover {
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
}
div onclick 新的窗口打开页面
<div onclick="window.opemn('url')"></div >
回车键 触发方法
document.onkeypress = function(event) {
if(event.keyCode == 13) {
console.log(123)
return false;
}
}
验证码倒计时
var wait = 60;
function timer() {
console.log("timer");
var codediv = $('#codediv ');
if(wait == 0) {
codediv .text('获取验证码');
codediv .removeAttr('disabled');
wait = 60;
} else {
codediv .attr('disabled','disabled');
codediv .text(wait + "秒后可重新发送");
wait--;
setTimeout(function() {
timer();
},
1000)
}
}
验证码倒计时效果
用户注册步骤效果
本来我是打算用图片做，通过jquery来控制其是否显示，后来在网上找到了这个感觉很棒，自己也用到了。
注册步骤效果图
bootstrap table 相关
初始化table
var $table = $('#table');
$(function () {
$table.bootstrapTable({
});
});
init: function () {
var tableDiv = $('#table');
tableDiv.bootstrapTable({
url: 'datas',
toolbar: '#toolbar',
striped: true,
contentType: "application/x-www-form-urlencoded",
dataField: "data",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
search: false,
showColumns: true,
showExport: true,
striped: true,//条纹
exportDataType: 'all',
showRefresh: true,
clickToSelect: true,
sortable: true,
pagination: true,
clickToSelect: true,
cardView: false,
detailView: true,
detailFormatter: detailFormatter,
sidePagination: "server",
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100, 'All'],
smartDisplay: false,//智能显示分页按钮
paginationPreText: "上一页",
paginationNextText: "下一页",
queryParams: queryParams,//请求服务器时所传的参数,
responseHandler: responseHandler,
columns: [[
{field: 'state', checkbox: true},
{field: 'uniqueUrl', title: '链接', visible: true,width: 150},
{field: 'address', title: '地区', visible: true, width: 150},
{field: 'company', title: '公司', visible: true, width: 150},
{
field: 'username', title: '姓名', width: 100, formatter: function (value, row, index) {
return row.firstName + row.lastName;
}
},
{field: 'industryName', title: '行业', width: 150},
{field: 'headline', title: '头衔', visible: true, width: 200},
{field: 'yearOfExperience', title: '工作年限', visible: true},
{field: 'educations', title: '教育经历', visible: true},
{field: 'experiences', title: '工作经历', visible: true},
{field: 'skills', title: '技能', visible: true},
{field: 'mobile', title: '联系方式', visible: true},
{field: 'remark', title: '备注', visible: true},
{
field: 'insertTime', title: '抓取时间', visible: true, formatter: function (value, row, index) {
return changeDateFormat(value)
}
},
{
field: 'updateTime', title: '修改时间', visible: true, formatter: function (value, row, index) {
return changeDateFormat(value)
}
},
{
title: '操作',
align: 'center',
valign: 'middle',
field: 'operation',
formatter: function (value, row, index) {
return "<button type='button' class='btn btn-xs btn-primary' onclick='ViewService.updateRemark(" + row.id + ",\"" + row.yearOfExperience + "\",\"" + row.mobile + "\",\"" + row.remark + "\")'>修改备注</button>";
}
}
]]
});
}
// 一些方法
function changeDateFormat(cellval) {
if (cellval != null) {
var date = new Date(cellval);
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getMilliseconds();
}
}
function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}
//请求服务数据时所传参数
function queryParams(params) {
return {
pageSize: params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
pageIndex: params.offset / params.limit + 1, //当前页面,默认是上面设置的1(pageNumber)
param: "haha" //这里是其他的参数，根据自己的需求定义，可以是多个
}
}
//请求成功方法
function responseHandler(result) {
var errcode = result.code;//在此做了错误代码的判断
if (errcode != 0) {
alert("错误代码" + errcode);
return;
}
//如果没有错误则返回数据，渲染表格
return {
total: result.data.total, //总页数,前面的key必须为"total"
data: result.data.linkedIns //行数据，前面的key要与之前设置的dataField的值一致.
};
};
toolbar
<div id="toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<span>公司名: </span>
<input id="companyNameParam" class="form-control" type="text" value="">
</div>
<div class="form-group">
<span>职位名: </span>
<input id="jobNameParam" class="form-control" type="text" value="">
</div>
<div class="form-group">
<span>地点：</span>
<input id="addressParam" class="form-control" type="text" value="">
</div>
<button type="button" id="searchBtn" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-search"></span> 搜索（支持回车）
</button>
</div>
</div>
ajax文件导出写法
export: function () {
var selectArray = $('#table').bootstrapTable('getSelections');
if (selectArray.length <= 0) {
alert("请选择您要导出的记录!")
return;
}
var idArry = new Array();
selectArray.forEach(function (value, index) {
idArry.push(value.id);
});
if (confirm("确定导出？")) {
var form = $("<form>");//定义一个form表单
form.attr("style", "display:none");
form.attr("target", "");
form.attr("method", "post");
form.attr("action", "export");
var input1 = $("<input>");
input1.attr("type", "hidden");
input1.attr("name", "ids");
input1.attr("value", idArry.join(','));
$("body").append(form);//将表单放置在web中
form.append(input1);
form.submit();//表单提交
} else {
console.log("取消导出")
}
}
对应后台
@RequestMapping("/export")
public ResponseEntity<InputStreamResource> export(@RequestParam("ids") String ids) throws IOException {
String filepath = linkedInService.export(ids);
File file = new File(filepath);
HttpHeaders headers = new HttpHeaders();
headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
headers.add("Content-Disposition", String.format("attachment; filename=\"%s\"", file.getName()));
headers.add("Pragma", "no-cache");
headers.add("Expires", "0");
return ResponseEntity
.ok()
.headers(headers)
.contentLength(file.length())
.contentType(MediaType.parseMediaType("application/octet-stream"))
.body(new InputStreamResource(new FileInputStream(file)));
}
网友评论