Question

通过http://foundation.zurb.com/docs/components/section.html查看，无论如何我可以为Section标题（Tabs）添加水平滚动。我在带有水平滚动的基础部分看起来像http://www.seyfertdesign.com/jquery/ui.tabs.paging.html，并继续在小屏幕中使用手风琴

Answer 1

我找到了感兴趣的人的解决方案：https://codepen.io/gdyrrahitis/pen/BKyKGe

.tabs {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  .tabs-title {
    float: none;
    display: inline-block;
  }
}

Answer 2

如果有人需要用jquery实现的angularjs，下面的代码可以为您提供帮助，对于纯jquery，用具有各自属性的本机js方法替换angularjs指令方法。

我尝试搜索类似的实现，但未找到任何内容，因此我编写了一个简单的angular指令，可以将基础CSS标签转换为可滚动标签

angular.module("app.directives.scrollingTabs", [])
.directive("scrollingTabs", ScrollingTabsDirective);
//@ngInject
function ScrollingTabsDirective($timeout, $window) {
return {
  restrict: 'A',
  link: function (scope, element, attr) {
    if(attr.scrollingTabs == "true"){
      element.addClass('scrolling-tabs-container');
      element.find('.nav-buttons').remove();
      element.append('<div class="scrolling-tabs nav-buttons nav-buttons-left"></div>');
      element.append('<div class="scrolling-tabs nav-buttons nav-buttons-right"></div>');

      let scrolledDiv = $(element).find('.tabs');
      let scrolled;
      let scrolling;

      let scrollFn = (step, animationTime, cb) => {
        scrolled = Math.max(scrolled + step, 0);
        scrolledDiv.animate({
          scrollLeft:  scrolled
        }, animationTime, ()=>{
          if (scrolling) {
            scrollFn(step, animationTime, cb)
          }else{
            if(cb){cb()}
          }
        });
      };

      let checkActiveNavButtonsClasses = () => {
        scrolled = scrolledDiv.scrollLeft();
        let scrollWidth = scrolledDiv.get(0).scrollWidth;
        let scrolledDivWidth = scrolledDiv.get(0).clientWidth;

        if(scrollWidth > scrolledDivWidth){
          element.addClass('nav-active');
          scrollWidth = scrolledDiv.get(0).scrollWidth;
          if(scrolled == 0){
            element.removeClass('nav-active-left').addClass('nav-active-right')
          }else if(scrolled > 0 && scrolled + scrollWidth < scrolledDivWidth){
            element.addClass('nav-active-left').addClass('nav-active-right');
          }else if(scrolled > 0 && scrolled + scrollWidth >= scrolledDivWidth){
            element.addClass('nav-active-left').removeClass('nav-active-right');
          }else{
            element.removeClass('nav-active-left').removeClass('nav-active-right')
          }
        }else{
          element.removeClass('nav-active-left').removeClass('nav-active-right').removeClass('nav-active');
        }
      };

      let scrollToActiveTab = () => {
        let activeDD = scrolledDiv.find('dd.active');
        let tabsOffset = scrolledDiv.offset();
        let activeTaboffset = activeDD.offset();
        let activeTabwidth = activeDD.width();
        let scrolledStep = activeTaboffset.left - tabsOffset.left - scrolledDiv.width() + activeTabwidth;

        scrollFn(scrolledStep, 100, checkActiveNavButtonsClasses);
      };

      element.find(".nav-buttons.nav-buttons-left")
        .off("click.scrolling")
        .on("click.scrolling", (event)=>{
          event.preventDefault();
          scrolling = false;
          scrollFn(-100, 100, checkActiveNavButtonsClasses);
        })
        .off("mouseover.scrolling")
        .on("mouseover.scrolling", function (event) {
          scrolling = true;
          scrollFn(-2, 1, checkActiveNavButtonsClasses);
        })
        .off("mouseout.scrolling")
        .on("mouseout.scrolling", function (event) {
          scrolling = false;
        });

      element.find(".nav-buttons.nav-buttons-right")
        .off("click.scrolling")
        .on("click.scrolling", (event)=>{
          event.preventDefault();
          scrolling = false;
          scrollFn(100, 100, checkActiveNavButtonsClasses);
        })
        .off("mouseover.scrolling")
        .on("mouseover.scrolling", function (event) {
          scrolling = true;
          scrollFn(2, 1, checkActiveNavButtonsClasses);
        })
        .off("mouseout.scrolling")
        .on("mouseout.scrolling", function (event) {
          scrolling = false;
        });

      $timeout(()=>{
        checkActiveNavButtonsClasses();
        scrollToActiveTab()
      },1000);

      $($window).off('resize.scrolling').on('resize.scrolling', _.debounce(()=> {
        checkActiveNavButtonsClasses();
      }, 500));

      scope.$on('$destroy', function() {
        $($window).off('resize.scrolling');
      });
    }
  }
}}

css：

.scrolling-tabs-container {
position: relative;
.tabs {
overflow-x: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
display: block;
margin-right: 18px;

dd {
  display: inline-block;
  float: none;
  margin: 0px -3px 0px 0px;

}

.tabs-title {
  float: none;
  display: inline-block;
}
}
.scrolling-tabs {
&.nav-buttons {
  display: none;
  position: absolute;
  width: 19px;
  height: 38px;
  border: 1px solid #c1c1c1;
  top: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0.4;
  cursor: pointer;
  &:hover {
    opacity: 1;
    &:before {
      color: #444;
    }
  }
  &:before {
    position: absolute;
    left: 7px;
    top: 8px;
    color: #777;
  }
  &.nav-buttons-left {
    left: 0;
    &:before {
      content: '<';
    }
  }
  &.nav-buttons-right {
    right: 18px;
    &:before {
      content: '>';
    }
  }
}
}
&.nav-active{
.tabs{
  margin-right: 36px;
  margin-left: 18px;
}
.scrolling-tabs {
  &.nav-buttons {
    display: inline-block !important;
  }
}
}
&.nav-active-left{
.scrolling-tabs{
  &.nav-buttons-left{
    opacity: 0.8;
  }
}
}
&.nav-active-right{
.scrolling-tabs{
  &.nav-buttons-right{
    opacity: 0.8;
  }
}}}

HTML：Foundation Tabs模板。

<tabset class="list-tabs" scrolling-tabs="true">
    <tab heading="tab1"></tab>
    <tab heading="tab2"></tab>
   <tab heading="tab2"></tab>
</tabset>

Answer 3

在开始之前，您需要验证页面上是否有jQuery（或Zepto）和foundation.js。这些都带有基础包，所以只需在页脚中取消注释或相应地包含它们。

<div class="section-container auto" data-section>
  <section class="active">
    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

基础文档包含以下所有信息：

http://foundation.zurb.com/docs/components/section.html#panel2

这将为您提供部分表格标题。然后，您希望管理可滚动的内容。

<div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>

此处的内容将是要处理的区域，请尝试添加名为.scrollable

的新类

在这个课程中使用类似的东西：

.scrollable{
  overflow:scroll;
}

您可能想要为此添加更多内容，但这会让您入门。您的HTML现在应该如下所示：

<div class="content scrollable" data-section-content>
  <p>Content of section 1. This content will be scrollable when the content has exceeded that of the div size. </p>
</div>

这就是你要找的东西。

Scrollable Foundation Section标题

3 个答案: