タグ別アーカイブ: triggerHandler

六耀の計算について(1)

今回はカレンダーに関する情報です。
カレンダーには「大安」「仏滅」・・・などの「六耀」表示があります。
とりあえず今回は六耀の計算方法を試したいと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var arrROKUYOU = new Array('大安','赤口','先勝','友引','先負','仏滅');
                $('#chackData').click(function () {
                    $mData = parseInt($('#month option:selected').val());
                    $dData = parseInt($('#day option:selected').val());
                    $('#disp').text(arrROKUYOU[($mData + $dData) % arrROKUYOU.length]);
                });
                $('.selectData').triggerHandler();

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin          : 5px;
            }

        --></style>

    </head>

        <div id="data_area">
            <select id="month" class="dateSelect">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            /
            <select id="day" class="dateSelect">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option></option>
            </select>
            <button id="chackData">Click Me!!</button>
        </div>

        <div id="disp_area">
            「六耀」:<span id="disp"></span>
        </div>

    </body>
</html>

sample

まず「六耀」を求める手順ですが、大きく分けると2つの工程があるようです
 ・現在の日付を旧暦の日付を取得する。
 ・旧暦の日付から「六耀」を取得する。

今回の処理では旧暦の月・日を指定することで「六耀」が表示されるようにしています。
つまり「2.旧暦の日付から「六耀」を取得する。」の部分ですね。
sample では指定した旧暦の月・日に対応する「六耀」を表示しています。

現在の暦から「六耀」を表示するには一筋縄ではいかないようです。
とりあえずは旧暦に変換する必要がありますが、なんか旧暦っていくつか種類が幾つかあるんですね。
今の暦から旧暦に変更する方法はその調査も踏まえて、また次の機会に行おうと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

jQueryでイベントを発生させる。

前回は通常実行されるイベントのキャンセルでした。
今回は通常実行される処理を発生させる方法です。

たとえば a タグなどをクリックすると、通常は href で指定した URL に移動します。
これらのイベントを他の処理を条件に発生させる方法です。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {
                
                // initialize
                $('#message').hide();

                // Base Event
                $('#checkbox').click( function() {
                    alert('checkbox clicked!!');
                });

                // event trigger
                $('#triggerN').click(function(){
                    $("#checkbox").trigger("click");
                });

                // event triggerHandler
                $('#triggerH').click(function(){
                    $("#checkbox").triggerHandler("click");
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            #checkArea, #buttonArea {
                margin : 10px;
            }
        --></style>
        
    </head>
    <body>

        <div id="checkArea">
            <div>
                <p>click me!</p>
                <input type="checkbox" id="checkbox" /><span id="message">checked</span>
            </div>
        </div>

        <div id="buttonArea">
            <div>
                <input type="button" id="triggerN" value="trigger" />
                <input type="button" id="triggerH" value="triggerHandler" />
            </div>
        </div>

    </body>
</html>

sample

sampleページでは checkbox の check 状態が「On」の場合、「checked」という文字が
表示されるようにプログラムしています。
そのため、 checkbox を click すると checkbox の表示状態が変更され、alert が表示されます。

これに対して下部に設置した button を click することで、checkbox を click した時と
同じ処理を発生させることができます。

・・・えっと、button を 2 つ設置しているのには意味があります。
基本の「指定の object に対して、指定のイベントを実行させる」ことは同じです。
ですが、少しだけ処理が異なります。

「trigger」ボタンでは trigger という処理を実行します。
 object に対して、指定した event を実際に行ったような処理を行います。
 そのため、sample のページでは 「trigger」を押すことで check の状態も変更します。
 そのうえで alert も表示されます。

「triggerHandler」ボタンでは triggerHandler という処理を実行します。
 object に対して、指定した event で実行予定の jQuery の内容だけを実行します。
 そのため、sample のページでは 「triggerHandler」を押しても check の状態は変更されません。
 しかし、alert は表示されます。
 また、checkbox の上位の object に別の event が設定してあっても、それらは実行されません。

この 2つを利用すると mauseover を条件に、Link を click した処理を実行するとか使えそうです。
まぁ、メインで使用する事は無いのかも知れませんが・・・
メインで無くとも、ページスクロール時にページ内遷移と同じ処理を行うなど、色々と面白いことができそうですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。