zoukankan      html  css  js  c++  java
  • jQuery自定义滚动条插件mCustomScrollbar

    写项目的时候遇到了这种情况

    我用了两个iframe,左边是一个菜单栏,可以展开也可以收回去的。就说这个滚动条太丑了,是浏览器默认的,所以学着用mCustomScrollbar来解决一下这个问题。

    1:资源下载

      https://github.com/malihu/malihu-custom-scrollbar-plugin,我是从这里下载的。

    2:引入

      注意顺序。

        <link rel="stylesheet" type="text/css" href="../css/jquery.mCustomScrollbar.css">
        <script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.10.4.min.js"></script>
        <script type="text/javascript" src="../js/jquery.mCustomScrollbar.min.js"></script>
        <script type="text/javascript" src="../js/jquery.mCustomScrollbar.js"></script>

    3:加载

      我是对accordion进行了这个操作。

        <script type="text/javascript">
            (function($){
                    $(window).load(function(){
                        $(".accordion").mCustomScrollbar();
                    });
                })(jQuery);
        </script>

    4:修改accordion的样式

            .accordion{
                overflow:auto;
                height: 500px;    
            }

    5:效果展示

      出错了,错误是有一个js文件没找到,没关系,找到刚才下载的文件,把下面说没找到的js文件拷贝到项目的目录中。问题解决。

      

    然后 可以看到有一个竖线,这个就是新的滚动条。当然 是可以自定义的,这里就不展示了。

      

  • 相关阅读:
    zoj1654二分图
    zoj1314无源汇有上下界最大流
    zoj2788最小割
    zoj2587唯一最小割
    poj1815最小割
    Loader之一:基本原理
    Fragment之三:根据屏幕尺寸加载不同的Fragment
    Fragment之一:Fragment入门
    Github android客户端源代码分析之一:环境搭建
    如何在Eclipse中查看Android API源码以及support包源码
  • 原文地址:https://www.cnblogs.com/zhao307/p/5459912.html
Copyright © 2011-2022 走看看