zoukankan      html  css  js  c++  java
  • SMINT:单页网站的免費jQuery插件

          最近为了做一个静态网页版的数据报告,不希望花很多时间去设计网页,或者花时间去调整布局,于是找到了一个名为Smint的免費jQuery插件。几乎不需要写什么代码就可以完成一个一页式网站。这非常适合用来制作静态网页,比如个人简历介绍,多图片的分享,广告详细内容,商品介绍,以及项目或系统的介绍等。这个插件提供了基本的界面样式和滑动式菜单,非常简洁友好,已实际使用过,现分享出来,希望更多人喜欢。

                smint

          SMINT是一个为一页式网站爱好者做的简单jQuery插件,目前最新为3.0版本。
          官方网站地址:
          http://www.outyear.co.uk/smint
          Demo地址:
          http://www.outyear.co.uk/smint/demo/

          SMINT有两个主要的元素,一个是带粘性的导航栏,保持在网页的顶部,当页面向下滚动时会指定到当前菜单;而当你点击菜单按钮时,页面会自动滚动到你点击的部分。

        如何使用?

          1、首先在网页的head部分引入javascript类库:

    <head><script src="js/jquery.min.js" type="text/javascript"></script>
          <script src="js/jquery.smint.js" type="text/javascript"></script>
    </head>

          2、创建一个菜单,给它一个样式名称,比如:subMenu,就像下面的代码:

    <div class="subMenu">
    <div class="inner">
    <a class="subNavBtn" href="#sTop">首页</a>
    <a class="subNavBtn" href="#section1">窗体流程</a>
    <a class="subNavBtn" href="#section2">签核效率</a>
    <a class="subNavBtn" href="#section3">行为方式</a>
    <a class="subNavBtn" href="#section4">用户群体</a>
    <a class="subNavBtn" href="#section5">系统运维</a>
    </div>
    </div>

          3、每个<a>标签的href对应到一个页面区块(section):

    <div class="section section1">
    <div class="inner">
    <h1>窗体流程</h1>
    <img src="images/flow.png" />
    </div>
    </div>

          4、在页面的script部分,加入下面的一段Javascript代码,用于初始化smint:   

    $(document).ready( function() {
            $('.subMenu').smint();
    }); 

          5、smint实在是我见过的最简单的插件,他只有一个可选项,那就是页面滚动速度:

    $('.subMenu').smint({
    'scrollSpeed' : 1000 });

          默认值是500毫秒(半秒钟),你可以修改为任何你喜欢的数值。

  • 相关阅读:
    js中return、return true、return false的区别
    flask,中间键
    flask,自定义中间件
    flask,闪现
    flask获取前端发送过来的数据
    flask中的如何将后端写前端的代码设置session
    flask中的正则匹配
    flask中的四剑客 及其他参数
    支付宝接口
    flasks框架简介
  • 原文地址:https://www.cnblogs.com/defzhu/p/4827212.html
Copyright © 2011-2022 走看看