jQuery插件与Bootstrap组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45645902/article/details/106494294

jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

1、jQuery 插件常用的网站

jQuery 插件库：http://www.jq22.com/
jQuery 之家：http://www.htmleaf.com/

2、jQuery 插件使用步骤

引入相关文件（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)（有时也可以只引入一部分，读懂后也可以修改部分内容）

2.1、瀑布流插件（重点讲解）

瀑布流插件是jQuery之家的开源插件

在这里插入图片描述

2.2、图片懒加载插件

当页面滑动到可视区，图片才进行加载，用以提升页面打开的速度及用户体验，减轻服务器负载

以此为例：
在这里插入图片描述

代码演示
懒加载只需引入html 和 js操作即可，此插件不涉及css，且js引入文件和js调用文件必须写到DOM元素(图片)最后面

1.将图片src替换为data-lazy-src

  <img data-lazy-src="..." />

2.引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
   	lazyLoadInit({
   		showTime: 666,
   		onLoadBackEnd: function(i, e) {
     		console.log("onLoadBackEnd:" + i);
   		},
   		onLoadBackStart: function(i, e) {
     		console.log("onLoadBackStart:" + i);
   		}
 	});
</script>

2.3、全屏滚动插件`fullPage.js`

全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。

GitHub：https://github.com/alvarotrigo/fullPage.js
中文翻译网站：http://www.dowebok.com/demo/2014/77/

代码演示
全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际的项目需要使用哪种风格引入对应的HTML和CSS。

引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>

<!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->
<script src="js/jquery.easings.min.js"></script>

<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>

<script src="js/jquery.fullPage.js"></script>
<script>
  	$(function() {
  		$('#dowebok').fullpage({
    		sectionsColor: ['red', '#4BBFC3', '#7BAABE', '#f90'],
    		navigation: true
  		});
	});
</script>

注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/fullpage.min.css">
    <style>
        #fp-nav ul li a.active span,
        #fp-nav ul li a span {
            background-color: red !important;
        }

        .section1 {
            background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;
        }

        .section2 {
            background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;
        }

        .section3 {
            background: url(http://idowebok.u.qiniudn.com/77/3.jpg) 50%;
        }

        .section4 {
            background: url(http://idowebok.u.qiniudn.com/77/4.jpg) 50%;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="js/fullpage.min.js"></script>
    <script>
        $(function () {
            $('#dowebok').fullpage({
                sectionsColor: ['red', '#4BBFC3', '#7BAABE', '#f90'],
                navigation: true

            });
        });
    </script>
</head>

<body>
    <div id="dowebok">
        <div class="section section1">
            <h3>第一屏里面的内容</h3>
        </div>
        <div class="section section2">
            <h3>第二屏里面的内容</h3>
        </div>
        <div class="section section3">
            <h3>第三屏里面的内容</h3>
        </div>
        <div class="section section4">
            <h3>第四屏里面的内容 </h3>
        </div>
    </div>
</body>

</html>

2.4、bootstrap组件

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，它依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷。

凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件

Bootstrap中文文档官网：https://v3.bootcss.com/

Bootstrap组件使用方法：

1.引入bootstrap相关css和js
2.去官网复制html的功能模块
- https://v3.bootcss.com/components/#btn-dropdowns 单按钮下拉菜单
- https://v3.bootcss.com/components/#navbar 默认样式的导航条
3.复制js代码，启动js插件
- https://v3.bootcss.com/javascript/#modals 模态框——可选尺寸——大模态框
- https://v3.bootcss.com/javascript/#modals 模态框——静态实例
- https://v3.bootcss.com/javascript/#tabs 标签页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                Action <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>



        <!-- 导航条组件 -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <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="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">公司简介</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>


        <!-- 模态框 -->
        <!-- Large modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large
            modal</button>

        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    里面就是模态框
                </div>
            </div>
        </div>


        <!-- 自己定义模态框 -->
        <!-- <button data-toggle="modal" data-target="#btn">点击显示模态框</button> -->
        <button class="myBtn">点击显示模态框</button>

        <div class="modal fade" tabindex="-1" role="dialog" id="btn">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <p>One fine body&hellip;</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->


        <!-- tab栏切换  -->
        <div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                        data-toggle="tab">手机</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">电视</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">手机相关的内容</div>
                <div role="tabpanel" class="tab-pane" id="profile">电视相关的内容</div>
            </div>

        </div>
    </div>
    <script>
        // 当我们点击了自己定义的按钮，就弹出模态框
        $(".myBtn").on("click", function () {
            // alert(11);
            $('#btn').modal()
        })
    </script>

</body>

</html>