月別アーカイブ: 2014年6月

フォームに内容を追加して送信

今回は Form に対して内容を追加して送信する方法をやってみます。
個人的には地味ながら便利な機能だと思って良く利用しています。
 ※ 「こうしたほうが良い」と言う話があればぜひ教えて下さい。

<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() {

                $('.submit').click( function() {
                    $('#base_form').append('<input type="hidden" name="' + $(this).attr('key') + '" value="' + $(this).attr('data') + '" />').submit();
                });

            });

        --></script>

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

            div {
                margin          : 5px;
                padding         : 5px;
            }

            #form_area {
                width           : 200px;
                border          : 1px solid #000000;
            }

            .submit {
                padding         : 5px;
                width           : 170px;
                border          : 1px solid #000000;
                cursor          : pointer;
            }

        --></style>

    </head>

        <div id="form_area">
            <h1>Form Area</h1>
            <form id="base_form" action="" method="get">
                <input type="text" name="text" value="DefaultData">
            </form>
        </div>

        <div id="disp_area">
            <h1>Button Area</h1>
            <p id="submit1" class="submit" key="addData" data="A">Submit Field Data Is "A"</p>
            <p id="submit2" class="submit" key="addData" data="B">Submit Field Data Is "B"</p>
            <p id="submit3" class="submit" Key="addData" data="C">Submit Field Data Is "C"</p>
        </div>

    </body>
</html>

sample

spmple 中には Form が一つ存在しています。
また、それとは別に button(と言うか文字列領域)が 3 個表示されています。
jQuery で制御を行うため input, submit, button である必要はありません。
ただ、ロールオーバーやカーソル変更が無いと操作対象かが判りにくいところもあります。

button を click することで Form に特定の要素を追加して送信します。
今回は確認しやすいように Method は「GET」形式にしています。
送信結果の確認は手抜きのため URL を見て確認して下さい(笑)

リスト一覧などで特定の ID 以外同じものを送信する場合などに便利ですね。
この手順であれば、追加できる項目は複数にも出来ますし、Form の配置に悩むこともありません。
便利なので今後のためにも備忘録的に残しておこうと思います。

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

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

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

今回も引き続きカレンダーに関する情報です。
前回の内容で六曜を算出するには太陰暦が必要ということがわかりました。
じゃあ調べようということで太陰暦について調べました。

・・・中々複雑なものですねぇ、正直な話、この先十年分のデータを登録しておくほうが現実的な気もします。(笑)
まぁ、なにはともあれ今回は調べて中では一般的?な天保暦もどきで暦変換を試して見ることにします。

<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 arrMonthDays   = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
                var arrROKUYOU     = new Array('大安','赤口','先勝','友引','先負','仏滅');
                var arrCahngeTable = new Array();
                var arrDayData     = new Array();
                    arrDayData['2013']         = new Array();
                    arrDayData['2013']['days'] = 533
                    arrDayData['2013']['data'] = 2901
                    arrDayData['2014']         = new Array();
                    arrDayData['2014']['days'] = 412
                    arrDayData['2014']['data'] = 2741
                    arrDayData['2015']         = new Array();
                    arrDayData['2015']['days'] = 650
                    arrDayData['2015']['data'] = 1210
                    arrDayData['2016']         = new Array();
                    arrDayData['2016']['days'] = 507
                    arrDayData['2016']['data'] = 2651
                    arrDayData['2017']         = new Array();
                    arrDayData['2017']['days'] = 369
                    arrDayData['2017']['data'] = 2647
                    arrDayData['2018']         = new Array();
                    arrDayData['2018']['days'] = 611
                    arrDayData['2018']['data'] = 1323
                    arrDayData['2019']         = new Array();
                    arrDayData['2019']['days'] = 468
                    arrDayData['2019']['data'] = 2709
                    arrDayData['2020']         = new Array();
                    arrDayData['2020']['days'] = 329
                    arrDayData['2020']['data'] = 5781


                $('#chackData').click(function () {

                    // Data Get
                    yData = parseInt($('#year option:selected').val());
                    mData = parseInt($('#month option:selected').val());
                    dData = parseInt($('#day option:selected').val());

                    // Data Change
                    //// Count Day
                    cntDays = dData;
                    for (var tempM = 1; tempM < mData; tempM++) {
                        cntDays += arrMonthDays[tempM - 1];
                    }
                    if ((yData % 4) == 0) {
                        if ((yData % 100) == 0) {
                            if ((yData % 400) == 0) {
                                cntDays++;
                            }
                        } else {
                            cntDays++;
                        }
                    }

                    tableSet(yData);
                    if (cntDays < arrCahngeTable[0]['days']) {
                        cntDays += 365;
                        if ((yData % 4) == 0) {
                            if ((yData % 100) == 0) {
                                if ((yData % 400) == 0) {
                                    cntDays++;
                                }
                            } else {
                                cntDays++;
                            }
                        }
                        tableSet((yData - 1));
                    }

                    getMon = 0;
                    getDay = 0;
                    for (var mCnt = 12; mCnt >= 0 ; mCnt--) {
                        if (arrCahngeTable[mCnt]['month'] != 0) {
                            if (arrCahngeTable[mCnt]['days'] <= cntDays) {
                                getMon = arrCahngeTable[mCnt]['month'];
                                getDay = cntDays - arrCahngeTable[mCnt]['days'] + 1;

                                break;
                            }
                        }
                    }
                    if (getMon < 0) {
                        getMon = -getMon;
                    }


                    // Disp Set
                    $('#dispData').text(getMon + '/' + getDay + '(' + arrROKUYOU[(getMon + getDay) % arrROKUYOU.length] + ')');

                });

                function tableSet(yData) {
                
                    tempDays = arrDayData[yData]['days'];
                    tempData = arrDayData[yData]['data'];
                    workDays = Math.floor(tempDays / 13 + 0.001);
                    uruuFlg  = tempDays % 13;
                    if (uruuFlg == 0) {
                        tempData *= 2;
                        maxMonth  = 12;
                    } else {
                        maxMonth  = 13;
                    }

                    arrCahngeTable[0] = new Array();
                    arrCahngeTable[0]['days']  = workDays;
                    arrCahngeTable[0]['month'] = 1;
                    for (var mCnt = 1; mCnt <= maxMonth; mCnt++) {
                        arrCahngeTable[mCnt] = new Array();
                        arrCahngeTable[mCnt]['days']  = arrCahngeTable[mCnt - 1]['days'] + 29;
                        arrCahngeTable[mCnt]['month'] = mCnt + 1;
                        if (tempData >= 4096) {
                            arrCahngeTable[mCnt]['days']++;
                        }
                                                
                        tempData = (tempData % 4096) * 2;
                    }
                    arrCahngeTable[maxMonth]['month'] = 0;

                    if (maxMonth > 12) {
                        for (var mCnt = uruuFlg + 1; mCnt < 13; mCnt++) {
                            arrCahngeTable[mCnt]['month'] = mCnt;
                        }
                        arrCahngeTable[uruuFlg]['month'] = -uruuFlg;
                    } else {
                        arrCahngeTable[13] = new Array();
                        arrCahngeTable[13]['days']  = 0;
                        arrCahngeTable[13]['month'] = 0;
                    }
                    
                }

            });

        --></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="year" class="dateSelect">
                <option value="2014" selected="selected">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
            </select>
            /
            <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="dispData"></span>
        </div>

    </body>
</html>

sample

sample では指定した日付をに対して、旧暦の月・日を表示するようにしてみました。
それにともなって六曜を表示しています。
太陰暦での月日を算出方法が解れば、後は前回の内容を適用するだけです。

それにしても太陰暦の出し方がこんなに面倒なものだとは思いませんでした。
今回は既に計算済みのデータを使用する簡易版ですが、仮に計算で割り出すにしても何年かするとズレが生じるようです。
そのため、特定の期間しか対応出来ないというものが多いようですね。

今後の業務にて太陰暦を算出する機会が何度あるかわかりませんがとりあえずは対応できそうです。
・・・まぁ、内容は理解しましたし正確なデータが必要な場合はAPIを探して使う方がいいのかもしれません。
どうしようか悩むところではありますねぇ・・・

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

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

六耀の計算について(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 人がこの 投稿 は役に立ったと言っています。

項目の絞り込みと移動

今回は一覧の絞り込みです。
最近パネルがばらばらに動く処理はよく見かけます。
これも「仕事で出来ればいいなぁ」といった話がありましたので試しに作ってみようと思います。

<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"><!--

            jQuery(function() {

                var valData;
                var valTop;
                var valLeft;

                var countTop  = 0;
                var countLeft = 0;
                
                var maxLeft   = 3;
                var menuHigth = 100;

                $('.button').click(function () {

                    // Get Value
                    countTop  = 0;
                    countLeft = 0;
                    valData = $(this).val();

                    // Loop
                    $('.list_div').each( function() {
                        if ($(this).hasClass(valData)) {
                        
                            // On Target
                            $(this).animate(
                                {
                                    top    : ((100 * countTop) + menuHigth),
                                    left   : (250 * countLeft)
                                }
                            ).show();

                            // Count Format
                            if (countLeft >= maxLeft) {
                                countLeft = 0;
                                countTop  = countTop  + 1;
                            } else {
                                countLeft = countLeft + 1;
                            }

                        } else {
                        
                            // Off Target
                            $(this).animate(
                                {
                                    top    : 50,
                                    left   : 0
                                }
                            ).hide();

                        }
                    });
                });

                $('.list_div').hide();

            });

        --></script>

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

            .list_div {

                position         : absolute;
                
                top              : 50px;
                left             : 0px;
                padding          : 5px;
                width            : 250px;
                height           : 100px;

            }

        --></style>

    </head>

        <div id="button_area">
            <button class="button" value="1">Click Button 1</button>
            <button class="button" value="2">Click Button 2</button>
            <button class="button" value="3">Click Button 3</button>
            <button class="button" value="4">Click Button 4</button>
        </div>

        <div id="list_area">
            <div class="list_div 1 2">
                <img src="./icon_jpeg01.jpg">
            </div>
            <div class="list_div 4">
                <img src="./icon_jpeg02.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg03.jpg">
            </div>
            <div class="list_div 2 3">
                <img src="./icon_jpeg04.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg05.jpg">
            </div>
            <div class="list_div 4">
                <img src="./icon_jpeg06.jpg">
            </div>
            <div class="list_div 1 2">
                <img src="./icon_jpeg07.jpg">
            </div>
            <div class="list_div 3">
                <img src="./icon_jpeg08.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg09.jpg">
            </div>
            <div class="list_div 2 4">
                <img src="./icon_jpeg10.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg11.jpg">
            </div>
            <div class="list_div 3">
                <img src="./icon_jpeg12.jpg">
            </div>
            <div class="list_div 1 2">
                <img src="./icon_jpeg13.jpg">
            </div>
            <div class="list_div 4">
                <img src="./icon_jpeg14.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg15.jpg">
            </div>
            <div class="list_div 2 3">
                <img src="./icon_jpeg16.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg17.jpg">
            </div>
            <div class="list_div 4">
                <img src="./icon_jpeg18.jpg">
            </div>
            <div class="list_div 1 2">
                <img src="./icon_jpeg19.jpg">
            </div>
            <div class="list_div 3">
                <img src="./icon_jpeg20.jpg">
            </div>
            <div class="list_div 1 4">
                <img src="./icon_jpeg21.jpg">
            </div>
            <div class="list_div 2">
                <img src="./icon_jpeg22.jpg">
            </div>
        </div>

    </body>
</html>

sample

spmple を button が 4 個表示されています。
button を click することで特定の要素を表示します。
表示する際には click した button に関連する項目のみ表示します。
また、今回の主題である項目の位置変更が出来るようになりました。

実際には検索用の入力欄を 2 個設置して、入力した範囲の項目を表示させる形となりそうです。
とりあえず検索に関しては、もともと問題ないかなと考えていましたのでこれで何とかなりそうです。
やっぱり動きがあると目を引く分サイトを作るほうも楽しくなりますね。

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

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