2016-12-04 361 views
1

我正在使用我在網上找到的教程以適合我的項目需求。我想添加功能按鈕,選擇幾天之間(更改日曆中的「活動」日期)並選擇幾個月。html/css交互式日曆next/prev日期按鈕編碼

我的第一個問題是如何編碼prev day和next day按鈕來改變前一天和第二天以根據css激活?

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <style> 
 
    * { 
 
     box-sizing: border-box; 
 
    } 
 
    ul { 
 
     list-style-type: none; 
 
    } 
 
    body { 
 
     font-family: Verdana, sans-serif; 
 
    } 
 
    .month { 
 
     padding: 70px 25px; 
 
     width: 100%; 
 
     background: #1abc9c; 
 
    } 
 
    .month ul { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .month ul li { 
 
     color: white; 
 
     font-size: 40px; 
 
     text-transform: uppercase; 
 
     letter-spacing: 3px; 
 
    } 
 
    .month .prev { 
 
     float: left; 
 
     padding-top: 10px; 
 
    } 
 
    .month .prevDay { 
 
     float: left; 
 
    } 
 
    .month .next { 
 
     float: right; 
 
     padding-top: 10px; 
 
    } 
 
    .month .nextDay { 
 
     float: right; 
 
    } 
 
    .weekdays { 
 
     margin: 0; 
 
     padding: 10px 0; 
 
     background-color: #ddd; 
 
    } 
 
    .weekdays li { 
 
     display: inline-block; 
 
     width: 13.6%; 
 
     color: #666; 
 
     text-align: center; 
 
    } 
 
    .days { 
 
     padding: 10px 0; 
 
     background: #eee; 
 
     margin: 0; 
 
    } 
 
    .days li { 
 
     list-style-type: none; 
 
     display: inline-block; 
 
     width: 13.6%; 
 
     text-align: center; 
 
     margin-bottom: 5px; 
 
     font-size: 12px; 
 
     color: #777; 
 
    } 
 
    .days li .active { 
 
     padding: 5px; 
 
     background: #1abc9c; 
 
     color: white !important 
 
    } 
 
    /* Add media queries for smaller screens */ 
 
    @media screen and (max-width: 720px) { 
 
     .weekdays li, 
 
     .days li { 
 
     width: 13.1%; 
 
     } 
 
    } 
 
    @media screen and (max-width: 420px) { 
 
     .weekdays li, 
 
     .days li { 
 
     width: 12.5%; 
 
     } 
 
     .days li .active { 
 
     padding: 2px; 
 
     } 
 
    } 
 
    @media screen and (max-width: 290px) { 
 
     .weekdays li, 
 
     .days li { 
 
     width: 12.2%; 
 
     } 
 
    } 
 
    </style> 
 

 
    <style> 
 
    .pM_button { 
 
     padding: 15px 25px; 
 
     font-size: 24px; 
 
     text-align: center; 
 
     cursor: pointer; 
 
     outline: none; 
 
     color: #cc9900; 
 
     background-color: #ffff00; 
 
     border: none; 
 
     border-radius: 15px; 
 
     box-shadow: 0 9px #999; 
 
    } 
 
    .pM_button:hover { 
 
     background-color: #ffff00 
 
    } 
 
    .pM_button:active { 
 
     background-color: #ffcc00; 
 
     box-shadow: 0 5px #666; 
 
     transform: translateY(4px); 
 
    } 
 
    .nM_button { 
 
     padding: 15px 25px; 
 
     font-size: 24px; 
 
     text-align: center; 
 
     cursor: pointer; 
 
     outline: none; 
 
     color: #ffffff; 
 
     background-color: #9900cc; 
 
     border: none; 
 
     border-radius: 15px; 
 
     box-shadow: 0 9px #999; 
 
    } 
 
    .nM_button:hover { 
 
     background-color: #9900cc 
 
    } 
 
    .nM_button:active { 
 
     background-color: #660066; 
 
     box-shadow: 0 5px #666; 
 
     transform: translateY(4px); 
 
    } 
 
    .nD_button { 
 
     padding: 15px 25px; 
 
     font-size: 24px; 
 
     text-align: center; 
 
     cursor: pointer; 
 
     outline: none; 
 
     color: #ffffff; 
 
     background-color: #ff0000; 
 
     border: none; 
 
     border-radius: 15px; 
 
     box-shadow: 0 9px #999; 
 
    } 
 
    .nD_button:hover { 
 
     background-color: #ff0000 
 
    } 
 
    .nD_button:active { 
 
     background-color: #800000; 
 
     box-shadow: 0 5px #666; 
 
     transform: translateY(4px); 
 
    } 
 
    .pD_button { 
 
     padding: 15px 25px; 
 
     font-size: 24px; 
 
     text-align: center; 
 
     cursor: pointer; 
 
     outline: none; 
 
     color: #ffffff; 
 
     background-color: #33cc33; 
 
     border: none; 
 
     border-radius: 15px; 
 
     box-shadow: 0 9px #999; 
 
    } 
 
    .pD_button:hover { 
 
     background-color: #33cc33 
 
    } 
 
    .pD_button:active { 
 
     background-color: #009900; 
 
     box-shadow: 0 5px #666; 
 
     transform: translateY(4px); 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body onkeydown="GetKey()"> 
 

 
    <div class=" month "> 
 
    <ul> 
 
     <li class="prev "> 
 
     <button class="pM_button ">Prev Month</button> 
 
     </li> 
 
     <li class="prevDay "> 
 
     <button class="pD_button ">Prev Day</button> 
 
     </li> 
 
     <li class="next "> 
 
     <button class="nM_button ">Next Month</button> 
 
     </li>" 
 
     <li class="nextDay "> 
 
     <button class="nD_button ">Next Day</button> 
 
     </li> 
 
     <li style="text-align:center "> 
 
     August 
 
     <br> 
 
     <span style="font-size:18px ">2016</span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <ul class="weekdays "> 
 
    <li>Mo</li> 
 
    <li>Tu</li> 
 
    <li>We</li> 
 
    <li>Th</li> 
 
    <li>Fr</li> 
 
    <li>Sa</li> 
 
    <li>Su</li> 
 
    </ul> 
 

 
    <ul class="days "> 
 
    <li><span class="active ">1</span> 
 
    </li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>13</li> 
 
    <li>14</li> 
 
    <li>15</li> 
 
    <li>16</li> 
 
    <li>17</li> 
 
    <li>18</li> 
 
    <li>19</li> 
 
    <li>20</li> 
 
    <li>21</li> 
 
    <li>22</li> 
 
    <li>23</li> 
 
    <li>24</li> 
 
    <li>25</li> 
 
    <li>26</li> 
 
    <li>27</li> 
 
    <li>28</li> 
 
    <li>29</li> 
 
    <li>30</li> 
 
    <li>31</li> 
 
    </ul> 
 

 
    <script type="text/javascript "> 
 
    function GetKey(e) { 
 
     var code; 
 
     if (!e) var e = window.event; 
 
     if (e.keyCode) code = e.keyCode; 
 
     else if (e.which) code = e.which; 
 
     //var character = String.fromCharCode(code); 
 
     setTimeout('ShowTree(' + code + ');', 100); 
 
    } 
 

 
    function nextDay() { 
 

 
    } 
 

 
    function ShowTree(character, k) { 
 

 

 
     //Main Menu Key 
 
     if (character == 106) { 
 
     cWindow.close(); 
 
     } 
 

 
     //Close Key 
 
     if (character == 111) { 
 
     alert(" Key:/"); 
 
     responsiveVoice.speak("Close ", "UK English Male "); 
 
     } 
 

 
     //PageUP Key, next month 
 
     if (character == 98) { 
 
     alert(" Key: 2 "); 
 
     responsiveVoice.speak("Page Up ", "UK English Male "); 
 
     } 
 
     //PageDOWN key, previous month 
 
     if (character == 99) { 
 
     alert(" Key: 3 "); 
 
     responsiveVoice.speak("Page Down ", "UK English Male "); 
 
     } 
 

 
     //Previous Key, Previous Day 
 
     if (character == 65) { //keypad key 101 
 
     responsiveVoice.speak("Previous ", "UK English Male "); 
 

 
     //alert(" Key: 5 "); 
 
     } 
 

 
     //Next Key, Next Day 
 
     if (character == 68) { //keypad key 102 
 
     responsiveVoice.speak("Next ", "UK English Male "); 
 
     $(".pD_button ").click(.days.active++); 
 
     //alert(" Key: 6 "); 
 
     } 
 

 
     //Select Key 
 
     if (character == 83) { //keypad key 104 
 
     responsiveVoice.speak("Select ", "UK English Male "); 
 

 
     } 
 

 
     //alert(" Key: 8 "); 
 
    } 
 
    </script> 
 

 

 

 
</body> 
 

 
</html>

+0

要clerify我的問題,我想在數字小鍵盤(字符102或者68,如果我的按鈕6沒有鍵盤)點擊放置在日曆標題中的下一個按鈕,並使下一個日期處於活動狀態。與前一個按鈕相同,但字符65或101除外,並使前一個日期處於活動狀態。 Rimon和030發佈的解決方案對我的應用程序無效 - 但我很感謝您的幫助。 – Melissa

回答

1

您可以輕鬆地通過使用addClass("class")active類添加到任何DOM元素,並與removeClass("class")刪除類,你使用jQuery提供。

所以,如果你想標記pD_button爲活動,你可以,如果你想用香草來完成這個JavaScript你會寫自己的函數添加與jQuery

$(".pD_button").addClass("active"); 

像這樣做並刪除一個類。 你可以做到這一點與

班級名冊https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

的className https://developer.mozilla.org/en-US/docs/Web/API/Element/className

這種方法比在CSS中使用:active僞類要好。 當點擊鼠標時觸發激活的僞類,但只有當鼠標按鈕被按下時觸發。這意味着在您釋放鼠標點擊後,關閉:active。通過使用上面提到的方法,您只需在onclick事件發生時獲得所需的行爲即可添加其他課程。

var prevButton = $(".pD_button"); 
prevButton.on("click", function() { 
    if (!prevButton.hasClass("active")) { 
    prevButton.addClass("active"); 
    } else /*if (prevButton.hasClass("active"))*/ { 
    prevButton.removeClass("active"); 
    } 
}); 

您可以點擊這裏查看:https://jsfiddle.net/cqm26q1n/

重要的是您的CSS中的.active.pD_button類之後,以便在active類附加到它時覆蓋它的CSS。

編輯: 使用我建議使用jQuery .keydown(handler)相結合的辦法:

var prevButton = $(".pD_button"); 
prevButton.on("keydown", function(e) { 
    if (e.which === 102 || e.which === 68) { 
    if (!prevButton.hasClass("active")) { 
    prevButton.addClass("active"); 
    } else /*if (prevButton.hasClass("active"))*/ { 
     prevButton.removeClass("active"); 
    } 
    } 
}); 

檢查中的keydown here的文檔。

0

假設你是jQuery(注意$符號和.click事件的存在),本節中有幾個錯誤是你寫的。

//Next Key, Next Day 
    if (character == 68) { //keypad key 102 
    responsiveVoice.speak("Next ", "UK English Male "); 
    $(".pD_button ").click(.days.active++); 
    //alert(" Key: 6 "); 
    } 

在這個喜歡$(".pD_button ").click(.days.active++);

一般jQuery的事件更具體的工作原理是,$("SELECTOR").EVENT(CALLBACK_FUNCTION);

所以,你的情況,要到下一個日期,代碼應該像

//Next Key, Next Day 
    if (character == 68) { //keypad key 102 
    responsiveVoice.speak("Next ", "UK English Male "); 


    $(".pD_button ").click(function(e){ 
     $('ul.days').find("li.active").removeClass('active').next().addClass('active'); 
     e.preventDefault(); 
    }); 


    //alert(" Key: 6 "); 
} 

同樣,要使前一個日期處於活動狀態,您只需要使用.after()方法而不是.next()這條線$('ul.days').find("li.active").removeClass('active').next().addClass('active');

要了解更多關於jQuery的.next()方法,檢查鏈接 https://api.jquery.com/click/瞭解.click事件