Python 几个前端插件的简单使用

前端插件：
　　fontawsome 做图标的

　　easyui 下载然后 直接使用就好
　　jqueryui 下载出错502 以后想想办法
　　bootstrap
　　　　--引入CSS
　　　　--引入jquery（两个ui都兼容，bootstrap需要版本高一点的jquery）
　　　　--引入JS

    需要引入的东西：
    1.easyui：
        <meta charset="UTF-8">
        <title>Basic Dialog - jQuery EasyUI Demo</title>
        <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../demo.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    2.bootstrap：
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">

        <title>Theme Template for Bootstrap</title>

        <!-- Bootstrap core CSS -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <!-- Bootstrap theme -->
        <link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="theme.css" rel="stylesheet">

        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

　　bxslider  可以滚动图片

        1.需要引入的东西：
          <link rel="stylesheet" href="jquery.bxslider.css">
          <script src="jquery-3.5.0.js"></script>
          <script src="jquery.bxslider.js"></script>
        2.引入后因为没有相应的图片，可能导致某些东西显示不出来，可以去bxslider.css里修改

　　jquery.lazyload  延时加载图片

        1.需要引入的东西：
            <script src="js/jquery-1.12.4.js"></script>（jquery）
            <script src="js/jquery.lazyload.js"></script>（lazyload）
        2.一些功能
            <script>
                $(function(){
                    $('img.lazy').lazyload({
                        //container: $('.product-list'),   // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
                        threshold: 100,                    //当图片顶部距离显示区域还有100像素时，就开始加载
                        placeholder : "img/grey.gif",      // 图片未加载时，占位
                        effect: "slideDown",               // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
                        effect_speed: 1000,                // 效果出现的时间
                        event: 'scroll',                   // 滚动滚轮时触发，可以是：click、mouseover等
                        data_attribute: 'original',        // img标签中保存url的自定义属性，默认：data-original
                        skip_invisible: true,              // 是否跳过已经隐藏的图片（display:none）
                        failure_limit: 2,                  // 由于延迟加载是根据Dom从上到下执行
                                                           // 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
                                                           // 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
                        appear: function(){                // 当图片位置刚出现在视图时，触发此事件
                            $(this).attr('src');
                        },
                        load: function(){                  // 当图片路径加载之后，触发此事件
                            $(this).attr('src');
                        }

                    });
                })
            </script>