zurb-foundation - スクロール可能な Foundation セクションのヘッダー

Question

http://foundation.zurb.com/docs/components/section.htmlを見ると、セクションヘッダー (タブ) の水平スクロールを追加できます。水平スクロールのある基礎セクションでhttp://www.seyfertdesign.com/jquery/ui.tabs.paging.htmlのようなものを探していて、小さな画面でアコーディオンを使い続けています

score 0 · Accepted Answer

jquery 実装で angularjs が必要な場合は、以下のコードが役立ちます。純粋な jquery の場合、angularjs ディレクティブメソッドをそれぞれの属性を持つネイティブ js メソッドに置き換えます。

同様の実装を検索しようとしましたが、何も見つかりませんでした。そのため、基盤となる CSS タブをスクロール可能なタブに変換できる単純な angular ディレクティブを作成しました。

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 タブテンプレート。

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

score -1 · Accepted Answer

開始する前に、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>

これはあなたが探しているものです。

zurb-foundation - スクロール可能な Foundation セクションのヘッダー

3 に答える 3

Related

Reference