1

Foundation Reveal モーダルを使用して、最初に日付が強調表示されたカレンダーを含む Reveal を表示し、次に選択した日付に実行されるイベントに関する情報の段落を含む 2 つ目の Reveal を表示します。2回目の公開では、イベントの情報とともに、選ばれた日付もお見せしたいと思います。

選択した日付をカレンダーモーダルから情報モーダルに渡すにはどうすればよいですか?

Reveal に関する財団のドキュメントを確認しましたが、このオプションが表示されません: http://foundation.zurb.com/docs/reveal.php

jQuery.data() http://api.jquery.com/data/も見ました

コードで jQuery.data() を使用しようとしましたが、日付パラメーターが情報公開に渡されていません。コードを実行すると、「$ is undefined」というエラーが表示されます。

html 抽出:

<div id="roseBasicInfoModal" class="reveal-modal"> 
  <h2>Rose Tinted Cupcakes - rose making class</h2>
  <p>
    You've seen those show stopping roses on the TV and in baking books and now you'd like to master them yourself!? In this class you will learn how to make a selection of roses suitable to adorn cupcakes and large cakes, both with and without cutters, from the impressive large bloom to the delicate small detail.
  </p>
  <p>
    During the 3 hour course... etc. etc.
  </p>
  <script>
    document.write("Date: " + $('roseBasicInfoModal').data('selectedDate')); //not working - doesn't display anything - error '$ is undefined' ??
  </script>

  <a class="round button" href="#" data-reveal-id="roseFullDetailsModal" data-animation="fadeAndPop" data-size="xlarge">Full Details</a>
  <a data-reveal-id="calendarModal" class="round button" href="#">Back</a>
  <a class="close-reveal-modal">×&lt;/a>
</div>

およびJavaScript：

<script>

$(function() {

  var class_dates = {'2012/12/4':'1st class' , '2012/12/20':'2nd class'};

  $("#datepicker").datepicker({
    beforeShowDay: function(date) {  // function to highlight dates of classes
      var search = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + (date.getDate());

      if (class_dates[search]) 
      {
        return [true, 'highlight', class_dates[search] || ''];
      }

      return [false, '', ''];
    },

    onSelect: function(dateText, inst) // function to show basic info when date selected 
    {
      if (dateText == '04-12-2012') //display different class info depending on the date
      {
       $("#roseBasicInfoModal").reveal({ "open": function () {$("#roseBasicInfoModal").data('selectedDate', dateText);  } }); //attempt to make selected date available to roseBasicInfoModal div - not working!!
      } 
      if (dateText == '20-12-2012')
      {
       $("#startfinishBasicInfoModal").reveal({ "open": function () { alert("Date is: " + dateText) } }); //playing with 'open' option
      }
    }

  });
});


$(function() {
  $( "#datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" ); //set date format for parsing and displaying dates
});

// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
  function() {
    $( this ).addClass( "ui-state-hover" );
  },
  function() {
    $( this ).removeClass( "ui-state-hover" );
  }
); 
</script>
4

1 に答える 1

0

ここの API ドキュメントで説明されているように、datepicker の altField オプションを使用してこれを行うことができました: http://api.jqueryui.com/datepicker/#option-altField

入力フィールドを表示したくなかったので、最初はこのオプションを破棄していました。ただ、カレンダーから情報モーダルに日付を取得する方法が他に見当たらなかったので、この方法で日付が入力欄に見えないようにCSSでスタイリングし、さらにreadonlyを指定することにしましたHTML で、ユーザーが日付を編集できないようにします。

JavaScript:

$(function() {

$( "#datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" ); //set date format for parsing and displaying dates
$( "#datepicker" ).datepicker( "option", "altField", ".displayDate" ); //pass date to display in modal for class info
$( "#datepicker" ).datepicker( "option", "altFormat", "DD, dd-mm-yy" ); //display date in long format including day of the week

});

HTML:

<p><b>Date: <input type="text" class="displayDate" readonly /></b></p>

CSS:

input.displayDate
{
width: 50%;
display: inline;
border:none;
box-shadow:none;
font-weight:bold;
font-family:inherit;
color: black;
}
于 2013-01-04T12:05:34.557 に答える