• Breaking Entry

    TeLog Anime+Game

    深夜アニメのおもしろ記事や家ゲーRPG・ネトゲ・スマホゲームのおすすめ
    感想、レビュー、リセマラ、攻略系情報ブログ
    たまに知的好奇心をそそる記事も。





    2014年6月8日日曜日

    【HTML/CSS/Javascript】 RSSを表示/非表示に切り替えたりしてみた





    RSS部分を改良した表示./非表示の作り方も往復用に更新しとこうと思います(。・ω・)

    このテンプレート使用してからプラグイン部分がこのせまいとこしかなかったので上部分にぶっこもうかと悩んでたんですよ(´・ω・`)
    いろいろ調べてなんとか設置できたんだけども・・・。
    設置し終わるとこう・・・まだまだ自分のしたいように設定できてないのが何よりも引っかかってしまって・・・。
    最初はゆっくり変化させずマウスオン、オフだけでRSS表示してOKにしよっかとか思ってましたが、もうまだ物足りなさ過ぎて・・・。
    CSSでゆっくり変化させる方法を調べてみました( ・`ω・´)
    参照ページ
    coliss
    デモページ
    まず最初にHTMLからゆっくり表示/非表示を始めてくれるボタンを作ります。
    <div?class="checkbox">? ??<label>
    ? ? ? ? ?<input?id="check"?type="image"?src="画像URL"??onclick="hideToggle($('.hide_area'));"
    ? ??</label>
    </div>
    Inputのボタンデザインが色々あるのでここから参考してくる(。・ω・)
    次に表示/非表示を始めるボタンに隠すコンテンツを設定する。
    <table?class="table table-bordered table-hover">
    ??<tr?class="hide_area">
    ? ?<td?class="example">
    ??<div?id="固有ID">
    ? ? 隠すコンテンツ

    </
    div>
    ? ?</td>
    ??</tr>?
    </table>?
    head内に下記を挿入する
    ?
    ? ? ? ? ??<script?src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>
    // 初期表示
    $(function(){
    ? ??// 初期表示でチェックボックスが空だったら非表示エリアを隠す
    ? ??if ($('#check').val() != '1') {
    ? ? ? ??$('.hide_area').hide();
    ? ??}
    });
    // 表示/非表示
    var speed = 500; //表示アニメのスピード(ミリ秒)
    var stateDeliv = 1;
    function hideToggle(hidearea) {
    ? ??hidearea.toggle(speed);
    }
    </script>
    ? ? ? ? ??
    CSSからデザインを固める
    .table?{
    ??width:?960px;
    ??display:block;
    ??margin:0?auto;
    ??padding:0?auto;
    ? position:relative;
    }
    .table?table-bordered?table-hover?{
    ??overflow:?scroll;
    ??width:?960px;
    ??height:?510px;
    ??background-color:?glay;
    ??text-align:left;
    ??border:1px?#CCCCCC?solid;
    ??background-color:696969;
    ??text-color:#000000;
    }
    たったこれだけ!で反映されました( ・`ω・´)
    これを気にtableの使い方を学べたので使える時にもっとチャレンジしてこうと思ってます(。・ω・)
    デモページを見て認識するのに手間取った←のでもっと色んなサイト走り回って沢山吸収していきたいです!(`・ω・´)キリッ

    0 件のコメント :

    コメントを投稿

    ※コメント反映までに時間がかかることがございます。

    ANTENA RSS

    ARCHIVE

    LINK





    Feedly

    follow us in feedly

    PAGE TOP