我使用Foundation Reveal模式首先顯示包含帶突出顯示的日期的日曆的Reveal,然後顯示包含關於運行在選定的日期。在第二個展示中,連同有關該事件的信息,我也想顯示選定的日期。如何從datepicker傳遞參數顯示模式到信息顯示模式
如何將日曆模態中的選定日期傳遞給信息模態?
我檢查的基礎文檔中關於顯示,但我沒有看到這個選項: 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">×</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>