javascript - jqueryでdatepickerを使用すると、div onselectに関連付けられたダイアログボックス

Question

これが可能かどうかはわかりませんが、JavaScript と jQuery を学び始めたばかりです。私が望む方法が不可能な場合、私はこれを達成できる可能性のあるさまざまな方法について聞くことに非常にオープンです.

日付ピッカーを表示したいのですが、ユーザーが日付をクリックすると、特定の定義済みデータを含むダイアログボックスが表示されます。別の日付を選択すると、事前定義されたさまざまなデータが含まれた別のダイアログボックスが開きます。クリックした日付を追跡したいと考えています。

<div id="tabs">
 <ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">
<p>I'm going to have different data applying to only this day</p>
</div>
<div id="tabs-2">
<p>I'm going to have different data applying to only this day</p>
</div>
<div id="tabs-3">
<p>I'm going to have different data applying to only this day</p>
</div>
</div>

jQuery datepicker インラインから日付を選択すると、jQuery ダイアログボックスが開きます。

ユーザーがjsfiddleを投稿しているため、そのリンクは役に立ちました: http://jsfiddle.net/qqabC/これは私がやろうとしていることの始まりです.divを組み込む方法や可能性があるかどうかはわかりません.のようにダイアログボックスに移動します。私はそれをいじり続けていますが、どこにも行きません。選択した日付ごとに、ダイアログボックスの内容が異なります。

これが不可能な場合、これを達成するための最良の方法は何ですか? ありがとうございました。

--編集: 上記で定義した div を div id "tabs" で実装する必要があります。タブ = ワークアウト日。したがって、tabs-1 から tabs-5 は合計 5 日間になります。tabs-1 は 1 日目のフォームコンテンツである最初のクリックになり、tabs-2 は 2 日目のフォームコンテンツである 2 番目のクリックになります。divをクリックするたびに次のdivにインクリメントされるため、forループを使用する必要があると思います。私は次のようなことをしようとしていました:

 var divs = $('#tabs > div[id]');
 var links = $('#tabs li');
 divs.hide();
 for (i=0;i<=max_workouts;i++) {
     $('#tabs li').on('click', function(e){
     var clickedID = $(this).attr('href').clone().appendTo(#workout-modal);
     }

クリックするたびに div を反復するようなものですが、うまくいきません。既存の div コンテンツをモーダルに配置する例を見つけようとしましたが、この方法で div を反復することには何もありません。何か提案はありますか?

score 0 · Accepted Answer

Bootstrap を使用してこの機能を実現する方法の例を次に示します。もちろん、必要に応じて機能とデザインを変更する必要がありますが、これは公正な出発点です。

ワークフローは次のとおりです。

ユーザーが日付をクリックする
各種入力でモーダル表示
- モーダルが開くと入力がクリアされる
ユーザーが入力に情報を入力します
ユーザーがクリックしてワークアウトを追加
ワークアウト番号と選択した日付を示すスパンラベルがディスプレイに追加されます。
- このスパンには、日付、タイトル、およびモーダル入力からの各値を格納するように設定されたデータ属性があります
ユーザーがスパンの右端にある「X」をクリックすると、スパンが削除されます
ユーザーがスパンラベルの他の場所をクリックすると、モーダルが再度開き、スパンに属性として格納されたデータが入力に取り込まれます。
ユーザーが既存のワークアウトをロードした後にワークアウトの追加をクリックすると、div の最後に追加するのではなく、古いスパンが新しいスパンに置き換えられます

ここにもjsFiddleがあります

$(function(){
    var max_workouts = 5;
    $('#workout-datepicker').datepicker({
      startDate: "today"
    }).on('changeDate', function(e) {
      var cur = $('.workout-label').length;
      if (cur < max_workouts) {
        var workoutDate = e.format('mm/dd/yyyy');
        var title = 'Workout ' + (cur + 1) + ' - ' + workoutDate;
        openModal(title, workoutDate);
      }
      else{
    	  var $tooMany=$('#too-many');
        $tooMany.show();
        setTimeout(function(){ $tooMany.hide() }, 2000);
      }
    });
    var $workoutLabelsContainer = $('#workout-labels-container');
    $('#add-workout').click(function() {
      var $workoutModal = $('#workout-modal');
      var workoutDate = $workoutModal.data('workout-date');
      var title = $workoutModal.data('workout-title');
      var vaule1 = $('#modal-workout-value-1').val();
      var vaule2 = $('#modal-workout-value-2').val();
      var $workout = $('<span class="label label-primary workout-label col-sm-12">' + title + '<span class="glyphicon glyphicon-remove pull-right remove-workout" aria-hidden="true"></span></span>');
      var clickedLabelIndex = $workoutModal.data('crurent-label-index');
      $workout.data('workout-title', title).data('workout-date', workoutDate).data('value-1', vaule1).data('value-2', vaule2);
      if (clickedLabelIndex == -1) $workoutLabelsContainer.append($workout);
      else($('.workout-label').eq(clickedLabelIndex).replaceWith($workout))
      $workoutModal.modal('hide');
    });
    $workoutLabelsContainer.on('click', '.remove-workout', function(e) {
      e.stopPropagation();
      $(this).closest('.workout-label').remove();
    })
    $workoutLabelsContainer.on('click', '.workout-label', function() {
      var $workoutLabel = $(this);
      var workoutDate = $workoutLabel.data('workout-date');
      var title = $workoutLabel.data('workout-title');
      var value1 = $workoutLabel.data('value-1');
      var value2 = $workoutLabel.data('value-2');
      var labelIndex = $('.workout-label').index($workoutLabel);
      openModal(title, workoutDate, value1, value2, labelIndex);
    });

    function openModal(title, workoutDate, value1, value2, labelIndex) {
      var $workoutModal = $('#workout-modal');
      var $value1 = $('#modal-workout-value-1').val('');
      var $value2 = $('#modal-workout-value-2').val('');
      $workoutModal.data('workout-title', title).data('workout-date', workoutDate);
      $('#workout-modal-title').html(title);
      if (value1) $value1.val(value1);
      if (value2) $value2.val(value2);
      if (labelIndex !== 'undefined' && labelIndex > -1) $workoutModal.data('crurent-label-index', labelIndex);
      else $workoutModal.data('crurent-label-index', -1);
      $workoutModal.modal({
        show: true
      });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
  .workout-label {
  padding: 6px;
  font-size: 16px;
  width: 100%;
  display: block;
  margin-bottom: 5px;
  cursor: pointer;
}

.remove-workout {
  cursor: pointer;
}

#too-many{
  display:none;
}
</style>
<br>
<br>
<div class="container well" id="workout-container">
  <div class="row">
    <div class="col-xs-6">
      <div id="workout-datepicker"></div>
    </div>
    <div class="col-xs-6" id="workout-labels-container">
    </div>
  </div>
<div class="alert alert-danger" id="too-many" role="alert">Maximun reached</div>
</div>
<div id="workout-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="workout-modal-title"></h3>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">

          <div class="form-group">
            <label for="firstname" class="col-sm-4 control-label">Some short text:</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="modal-workout-value-1" placeholder="">
            </div>
          </div>

          <div class="form-group">
            <label for="lastname" class="col-sm-4 control-label">Some longer text:</label>

            <div class="col-sm-8">
              <textarea class="form-control" id="modal-workout-value-2" name="textarea"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button type="button" class="btn btn-primary" id="add-workout">Add workout</button>
          </div>
        </form>
      </div>
    </div>
  </div>

javascript - jqueryでdatepickerを使用すると、div onselectに関連付けられたダイアログボックス

1 に答える 1

ここにもjsFiddleがあります

Related

Reference