ページ

2015年2月28日土曜日

GAEと戯れる 18 - スクロールするテーブル -

今回は画面関連を色々・・・


1. スクロール付きのテーブルを作る
     MFCなんかでいうListCtrlみたいなもん?

     ポイントは<table>の中に<table>を作るらしい。
     内側のtableの属性がoverflow: autoを設定してやる。

     例)
    <div id="list_area">
      <table id="tbl_outside">
        <caption>登録お店情報一覧</caption>
        <thead>
          <tr>
            <th width="3%">ID</th>
            <th width="12%">名前</th>
            <th width="15%">住所</th>
            <th width="10%">座標</th>
            <th width="10%">電話番号</th>
            <th width="10%">予約変更可能日</th>
            <th width="5%">前回ステータス</th>
            <th width="5%">前回参加人数</th>
            <th width="5%">前回総支出</th>
            <th width="25%">メモ</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="10">登録お店情報一覧</td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td colspan="10">
              <div style="height:300px; overflow:auto;">
                <table id="tbl_inside">
                  <c:forEach var="shop" items="${shops}">
                    <tr>
                      <td width="3%">${shop.key.id}</td>
                      <td width="12%">${shop.name}</td>
                      <td width="15%">${shop.address}</td>
                      <td width="10%">${shop.coordinate}</td>
                      <td width="10%">${shop.telephone}</td>
                      <td width="10%">${shop.checkDate}</td>
                      <td width="5%">${shop.lastStatus}</td>
                      <td width="5%">${shop.lastPartakeNum}</td>
                      <td width="5%">${shop.lastPayment}</td>
                      <td width="25%">${shop.memo}</td>
                    </tr>
                  </c:forEach>
                </table>              
              </div>
            </td>
          </tr>
        </tbody>
      </table>

    </div>

イメージ







参考サイト
http://javascript123.seesaa.net/article/103060039.html
関連
http://www12.plala.or.jp/costellazione/css-make/write.html
http://yume.hacca.jp/koiki/css/table/table.htm


2. 戻るボタンを作る
    よくある前のページに戻るボタンを作ってみる。マウスをかざしたら絵が変わる。

    戻る処理は
    onclick=“history.back(); return false;”

    マウスをかざしたら絵が変わるやつはjQueryを使用すると便利な事に!!
/**
 * 画像切り替え
 */
$(function(){
     $('a img').hover(function(){
        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
          }, function(){
             if (!$(this).hasClass('currentPage')) {
             $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
        }
   });

});

自動で画像ファイルのon/off文字列を変更してくれる。便利〜。

例)







↓マウスをかざすと







いい感じ^^

参考サイト
http://www.tohoho-web.com/how2/link.htm
http://www.red.oit-net.jp/tatsuya/java/image3.htm
http://neet-navi.info/wordpress/431/








0 件のコメント:

コメントを投稿