使用Bootstrap的后台猿人可能会用到的功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qqHJQS/article/details/54645976

写在前面

本人主要做服务器端这块,对前端页面了解不是很深,最近公司要求做一个门户网站,我就使用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">
                    ![](img/mm_02.jpg)
                </div>
                <div class="item">
                    ![](img/mm_02.jpg)
                </div>
                <div class="item">
                    ![](img/mm_02.jpg)
                </div>
                <div class="item">
                    ![](img/mm_02.jpg)
                </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

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的值一致.
    };
};

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)));
}
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页