1

問題：

Foundation からの垂直タブ システムがあり、最初のタブの対応するコンテナーには、2 つの主要なコンポーネントがあります。オブジェクトのリストと、クリックすると同じコンテナー内にこれらのオブジェクトの別のオブジェクトを作成するためのフォームを表示するボタンです。ページをリロードする必要はありません。フォームが送信されると、オブジェクトのリスト (新しく追加されたオブジェクトを含む) を含む元のコンテンツと、新しいオブジェクトを作成するためのボタンが表示されます。

Foundation 3 の垂直タブを使用しており、次のようなものがあります。

<div class="four columns">
  <dl class="vertical tabs">
    <dd id="firstTab" class="active"><a href="#1">1</a></dd>
    <dd id="secondTab><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li class="active" id="1Tab">
      <a id="formButton" class="large success button radius">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab">form goes here</li>
  </ul>
</div>

私は以前、これを AngularJS で動作させようとしていました。ただし、純粋な DOM 操作だけに固執する場合、AngularJS は実際には必要ないことが示唆されており、その理由もよりよく理解できるようになりました。Zepto が Foundation で使用されている JavaScript フレームワークであることを考えると、ここで探しているものは、JQuery または Zepto.js のようなより軽量なバージョンで実装する方がよいでしょうか? 誰かが私を正しい方向に向けるのを手伝ってくれますか?

アップデート：

これは私が最終的に使用したjQueryです：

$(document).ready(function () {
    $("firstTab").removeClass("active");
    $("1Tab").removeClass("active");
    $("formTab").addClass("active");
})

これまでのところ、このソリューションの問題は、フォームを 1 回しか表示できないことです。これにより、フォームへの入力について気が変わって、別のタブをクリックすることができます。しかし、その後もう一度フォームボタンをクリックしようとすると、フォームが表示されなくなります。開発者ウィンドウは、「アクティブ」のクラスがまだ追加および削除中であることを示しています。しかし、問題は、このフォームが使用されているオブジェクトが、DOM のフォームの直前に埋め込まれた ruby​​ ステートメントで作成した Class.new() オブジェクトであることだと思います。ページ全体が読み込まれたときだけでなく、ボタンがクリックされるたびにこの Class.new() のインスタンス化を行う方法はありますか?

4

1 に答える 1

1

ここで何を達成しようとしているのかわかりませんが、ng-show 属性を使用して要素を表示/非表示にすることができます。使用方法の例を次に示します。

<div class="four columns">
  <dl class="vertical tabs">
    <dd class="active"><a href="#1">1</a></dd>
    <dd><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li class="active" id="1Tab">
      <a id="formButton" class="large success button radius" ng-click="showForm()">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab"><form ng-show="isVisible"><input type="text" value="Hi! I'm visible!"/></form></li>
  </ul>
</div>

次に、コントローラーで isVisible プロパティを管理します。

var myApp = angular.module('myApp', []);
myApp.controller("FormCtrl", function ($scope) {
    //set it to false initially
    $scope.isVisible = false;
    $scope.showForm = function () {
        //change to visible after click
        $scope.isVisible = true;
    }
});

プロパティに応じてクラスを追加する場合は、ng-class を使用できます。

<div class="four columns">
  <dl class="vertical tabs">
    <dd class="active"><a href="#1">1</a></dd>
    <dd><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li ng-class="{selected: tag.isSelected}" id="1Tab">
      <a id="formButton" class="large success button radius" ng-click="showForm()">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab"><form ><input type="text" value="Hi! I'm visible!"/></form></li>
  </ul>
</div>
于 2013-03-12T07:54:42.330 に答える