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

, , No Comments
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 コメント :

コメントを投稿

※閲覧記事と無関係なコメントはスパムとみなす場合がございます。
(ㆁωㆁ*)管理人がコメントを承認するまで表示されません(ㆁωㆁ*)

top