Zurb foundation 可滚动基础段头_Zurb Foundation

Zurb foundation 可滚动基础段头

zurb-foundation

Zurb foundation 可滚动基础段头,zurb-foundation,Zurb Foundation,通过查看，我是否可以为节标题（选项卡）添加水平滚动。我在水平滚动的基础部分中寻找一些东西，并在小屏幕中继续使用手风琴。在开始之前，您需要验证页面上是否有jQuery（或ZePTO）和Puffix.js。这些都带有基础包，所以只需在页脚中取消注释，或者相应地包含它们。p> <div class="section-container auto" data-section> <section class="active"> <p class="title" d

通过查看，我是否可以为节标题（选项卡）添加水平滚动。我在水平滚动的基础部分中寻找一些东西，并在小屏幕

中继续使用手风琴。在开始之前，您需要验证页面上是否有jQuery（或ZePTO）和Puffix.js。这些都带有基础包，所以只需在页脚中取消注释，或者相应地包含它们。p>

<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>

您可能想添加更多内容，但这将使您开始。您的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>


第1节的内容。当内容超过div大小时，此内容将可滚动

这就是你要找的

我为那些感兴趣的人找到了一个解决方案：

如果有人需要一个带有jquery实现的angularjs，下面的代码可以帮助您，因为纯jquery将angularjs指令方法替换为具有相应属性的本机js方法

我试图寻找类似的实现，但一无所获，所以我编写了一个简单的角度指令，它可以将基础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');
      });
    }
  }
}}

angular.module（“app.directions.scrollingTabs”，[]）
.指令（“滚动选项卡”，滚动选项卡指令）；
//@Nginect
函数ScrollingAbsDirective（$timeout，$window）{
返回{
限制：“A”，
链接：功能（范围、元素、属性）{
如果（attr.scrollingTabs==“true”）{
元素addClass（'scrolling-tabs-container'）；
元素。查找（'.nav按钮'）。删除（）；
元素。追加（“”）；
元素。追加（“”）；
让scrolledDiv=$（元素）.find（'.tabs'）；
让我们滚动；
让我们滚动；
让scrollFn=（步骤，动画时间，cb）=>{
滚动=数学最大值（滚动+步长，0）；
动画({
向左滚动：已滚动
}，动画时间，（）=>{
如果（滚动）{
滚动fn（步长、动画时间、cb）
}否则{
如果（cb）{cb（）}
}
});
};
让我们检查ActiveNavButtonsClasses=（）=>{
scrolled=scrolledDiv.scrollLeft（）；
设scrollWidth=scrolledDiv.get（0）.scrollWidth；
让scrolledDivWidth=scrolledDiv.get（0）.clientWidth；
如果（scrollWidth>scrolledDivWidth）{
元素addClass（'nav-active'）；
scrollWidth=scrolledDiv.get（0）.scrollWidth；
如果（滚动==0）{
element.removeClass（'nav-active-left'）。addClass（'nav-active-right'））
}else if（滚动>0&&scrolled+scrollWidth0&&scrolled+scrollWidth>=scrolledDivWidth）{
元素。addClass（'nav-active-left'）。removeClass（'nav-active-right'）；
}否则{
元素。removeClass（'nav-active-left'）。removeClass（'nav-active-right'））
}
}否则{
元素。removeClass（'nav-active-left'）。removeClass（'nav-active-right'）。removeClass（'nav-active'）；
}
};
让滚动到激活选项卡=（）=>{
让activeDD=scrolledDiv.find（'dd.active'）；
设tabsOffset=scrolledDiv.offset（）；
让activeTaboffset=activeDD.offset（）；
让activeTabwidth=activeDD.width（）；
让scrolledStep=activeTaboffset.left-Tabsofset.left-scrolledDiv.width（）+activeTabwidth；
scrollFn（scrolledStep，100，checkActiveNavButtonsClasses）；
};
元素。查找（“.nav按钮。左侧的nav按钮”）
.off（“单击。滚动”）
.on（“单击.滚动”，（事件）=>{
event.preventDefault（）；
滚动=假；
scrollFn（-100100，checkActiveNavButtonsClasses）；
})
.off（“鼠标悬停滚动”）
.on（“鼠标悬停.滚动”），函数（事件）{
滚动=真；
滚动Fn（-2,1，CheckActiveNavButtonsClass）；
})
.off（“鼠标移出滚动”）
.on（“鼠标出.滚动”，函数（事件）{
滚动=假；
});
元素.find（“.nav按钮.nav按钮右”）
.off（“单击。滚动”）
.on（“单击.滚动”，（事件）=>{
event.preventDefault（）；
滚动=假；
scrollFn（100100，checkActiveNavButtonsClasses）；
})
.off（“鼠标悬停滚动”）
.on（“鼠标悬停.滚动”），函数（事件）{
滚动=真；
scrollFn（2，1，CheckActiveNavButtonsClass）；
})
.off（“鼠标移出滚动”）
.on（“鼠标出.滚动”，函数（事件）{
滚动=假；
});
$timeout（（）=>{
选中ActiveNavButtonsClasses（）；
scrollToActiveTab（）
},1000);
$（$window）.off（'resize.scrolling'）。on（'resize.scrolling'），u.debounce（（）=>{
选中ActiveNavButtonsClasses（）；
}, 500));
作用域.$on（“$destroy”，函数（）{
$（$window.off（'resize.scrolling'）；
});
}
}
}}

css:

。滚动选项卡容器{
位置：相对位置；
.标签{
溢出x：隐藏；
空白：nowrap；
-webkit溢出滚动：触摸；
显示：块；
右边距：18px；
dd{
显示：内联块；
浮动：无；
保证金：0px-3px0px 0px；
}
.标签标题{
浮动：无；
显示：内联块；
}
}
.滚动标签{
&.导航按钮{
显示：无；
位置：绝对位置；
宽度：19px；
高度：38px；
边框：1px实心#C1C1；
顶部：1px；
背景色：rgba（255、255、255、0.5）；
不透明度：0.4；
光标：指针；
&：悬停{
不透明度：1；
&：之前{
颜色：#444；
}
}
&：之前{
位置：绝对位置；
左：7px；
顶部：8px；
颜色：#777；
}
&.左侧导航按钮{
左：0；
&：之前{
内容：''；
}
}
}
}
&.导航激活{
.标签{
右边距：36px；
左边距：18px；
}
.滚动标签{
&.导航按钮{
显示：内联块！重要；
}
}
}
&.nav主动左{
.滚动标签{
<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>

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

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');
      });
    }
  }
}}

.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;
  }
}}}

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