资讯专栏INFORMATION COLUMN

bigSlide 插件应用

MrZONT / 1007人阅读

摘要:一插件官网二基本代码侧边栏控制开关用一个标签来控制侧边栏的开关。插件初始化最后则需要在标签尾部加上初始化插件的代码。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中,所以默认的这个语句并不需要。

一、 插件官网

bigSlide.js

二、 基本代码 侧边栏控制开关

用一个 标签来控制侧边栏的开关。#menu 用来指向 idmenu 的侧边栏,menu-link 为这个 标签的类名。

侧边栏代码实例

侧边栏代码如下,由于需要实现的效果各不相同,所以各个

  • 标签中设置的 style 并不一样,这样的代码看起来很乱,其实还是应该写在css中,并根据效果进行分类。

    引入 JS 文件

    文件中还需引入所需的 jQuery 库以及 bigSlide 插件。

    
    
    插件初始化

    最后则需要在 标签尾部加上初始化插件的代码。

    三、 样式自定义 侧边栏定位设置

    作为侧边栏的

      标签类名为 panel,因为初始状态下需要让该标签隐藏在页面视口之外,所以需要作如下设置。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中,所以默认的 position: fixed; 这个语句并不需要。

      .panel {
        left: -20em; /*left or right and the width of your navigation panel*/
        width: 20em; /*should match the above value*/
      }
      行内元素等宽分布

      最后一个

    • 标签中的
      标签设置为了 even 这个类,是为了让
      标签中的多个 元素等宽分布,代码如下:

      /* http://stackoverflow.com/questions/7245018/how-to-evenly-distribute-elements-in-a-div-next-to-each-other
      将需要均匀分布的元素的外部 div 设置为 table,
      table-layout 设置为 fixed,可让各元素占据相同宽度 */
          div.even {
          display: table;
          width: 100%;
          table-layout: fixed; /* 各子元素宽度相同 */
      }
      div.even span {
          display: table-cell;
          text-align: center;
      }

      文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

      转载请注明本文地址:https://www.ucloud.cn/yun/115283.html

      相关文章

      • bigSlide 插件应用

        摘要:一插件官网二基本代码侧边栏控制开关用一个标签来控制侧边栏的开关。插件初始化最后则需要在标签尾部加上初始化插件的代码。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中,所以默认的这个语句并不需要。 一、 插件官网 bigSlide.js 二、 基本代码 侧边栏控制开关 用一个 标签来控制侧边栏的开关。#menu 用来指向 id 为 menu 的侧边栏,menu-link 为这个 ...

        caspar 评论0 收藏0
      • bigSlide 插件应用

        摘要:一插件官网二基本代码侧边栏控制开关用一个标签来控制侧边栏的开关。插件初始化最后则需要在标签尾部加上初始化插件的代码。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中,所以默认的这个语句并不需要。 一、 插件官网 bigSlide.js 二、 基本代码 侧边栏控制开关 用一个 标签来控制侧边栏的开关。#menu 用来指向 id 为 menu 的侧边栏,menu-link 为这个 ...

        XBaron 评论0 收藏0
      • 用 JS 更改元素的属性

        摘要:设置侧边栏定位有了中间内容区域顶部与页面最上方的距离,以及页面顶部导航栏的高度,侧边栏需要向下移动的距离很容易就算出来了。 用 bigSlide 生成的可滑动侧边栏需要更改其定位和高度属性,更改定位令其与中间内容区域的顶部对齐,更改高度令其与中间内容区域的底部对齐。这个问题可以拆分为下面几个需求来依次实现: 更改侧边栏定位 获取中间内容区域顶部与页面最上方的距离 通过结合 CSS 选择...

        chanjarster 评论0 收藏0
      • 个人文章分类整理

        摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

        OnlyLing 评论0 收藏0
      • 个人文章分类整理

        摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

        v1 评论0 收藏0

      发表评论

      0条评论

  • 最新活动
    阅读需要支付1元查看
    <