一款不错的滚动条美化插件(jquery Custom Scrollba

一款不错的滚动条美化插件(jquery Custom Scrollba

资源属性

资源价格:

  • 所属行业:其他通用
  • 资源颜色:缤纷
  • 资源编码:UTF-8,GBK,GBK和UTF-8,BIG5,其他
  • 程序/版本:DEDE5.7,DEDE5.6,通用
  • 资源大小:未知
  • 更新时间:2018-10-09 04:12
  • 下载权限:注册会员
  • 客服QQ: 1466409、 544299512
详细介绍


简单使用:
1,引用资源:
  1. <link rel="stylesheet" href="../jquery.mCustomScrollbar.css">
  2. <script src="../jquery.mCustomScrollbar.concat.min.js"></script>
2,需要美化的元素:

	
  1. <div id="demo">
  2. <section id="examples">
  3. <!-- content -->
  4. <div class="content mCustomScrollbar">
  5. <h2>Ajax example</h2>
  6. <hr />
  7. <p><a href="ajax.html" rel="load-content">Load content via ajax</a></p>
  8. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  9. <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  10. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  11. <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  12. <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
  13. <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  14. <hr />
  15. <p>End of content.</p>
  16. </div>
  17. </section>
  18. </div>
3,编写JS脚本:

  1. (function($){
  2. $(window).on("load",function(){
  3. $("a[rel='load-content']").click(function(e){
  4. e.preventDefault();
  5. var url=$(this).attr("href");
  6. $.get(url,function(data){
  7. $(".content .mCSB_container").append(data); //load new content inside .mCSB_container
  8. //scroll-to appended content
  9. $(".content").mCustomScrollbar("scrollTo","h2:last");
  10. });
  11. });
  12. $(".content").delegate("a[href='top']","click",function(e){
  13. e.preventDefault();
  14. $(".content").mCustomScrollbar("scrollTo",$(this).attr("href"));
  15. });
  16. });
  17. })(jQuery);
4,完成,效果如截图,或者可以点击演示站地址查看完整演示。
模板安装方法
1、将压缩包上传到空间,解压到网站根目录。(压缩包包括整站代码,包括程序、数据与模板!)
2、全新安装dede系统。
直接运行:http://www.yourname.com/install (请换成你的域名)
注意:安装过程中,数据库前缀默认dede_,其他选项请保持默认设置。
3、还原数据库:
1)进入dede后台,找到‘系统’-‘数据库备份/还原’
2)在屏幕右上角点击‘数据还原’
3)点击屏幕下方的‘开始还原’按钮
4、确定网站风格:
1)点击‘系统’---系统基本参数
2)将‘站点根网址’改为您的网址,如http://www.xxx.com/(本地安装的朋友,请保持http://localhost。)
3)点击‘确定’按钮
5、更新缓存:
点击‘生成’-'更新系统缓存'
6、更新主页:
点击‘生成’-'更新主页html'
浏览下主页,如果没有问题。即可生成全站。
7、生成全站:
点击‘生成’-‘一键更新网站 ’-更新所有-开始更新
至此,模板安装结束
还原数据后后台登陆账号以及密码:admin,登陆后请修改密码
标签:jquery,scrollbar,滚动条美化

下载说明

· 如无特殊说明,本地资源收集自网络或者由网友上传,仅供学习研究之用,请勿用作商业用途,联系侵删。
· 如下载链接失效请联系客服就错,以免耽误您下载。
· 本站暂不提供技术支持,请自行按照说明和教材自行研究。
· 如果遇到相关问题,请到教程区搜索,更多高质量教程、资源不断发布中。
· 本站付费资源请谨慎下载,下载后由于可复制性不受理退款等要求。
· 已购买过的资源重复下载不重复扣费。
· 最终解释权归本站所有。

发表评论

昵称: 验证码: 点击我更换图片

评论列表(0条)

      联系我们

      在线咨询:

      投诉建议: