こっちで色々実験するまえに誤操作したら後戻りできない本家ブログで実験しちゃうここ最近・・・。
本家ブログでRSSを表示させたり非表示にしたりする試みが上手くイケたので更新しようと思います(。・ω・)
なんか順序が逆になってたりしますが気にしてはいけない(*´σー`)(鼻ホジ)
いつかは自ブログにも施したい思いがついに叶ったと言っても過言ではないと思いました(`・ω・´)
中学からブログを始め記事を更新するだけで頭の中が一杯だったのに今ではブログをある程度カスタマイズできるまで成長して・・・お母さん嬉しいよ(自演)
それではさっそく手順を書こうと思いますが、まず最初に参考にしたデモページ。
まず最初にHTML部分に表示/非表示を設定できるボタンを作ります。
<div class="checkbox"> <label>
<input id="check" type="image" src="画像URL" onclick="hideToggle($('.hide_area'));"
</label>
</div>
<input id="check" type="image" src="画像URL" onclick="hideToggle($('.hide_area'));"
</label>
</div>
次に表示/非表示させる隠したいコンテンツを指定します。
<table class="table table-bordered table-hover">
<tr class="hide_area"><!--隠すエリア-->
<td class="example">
隠したいコンテンツ
</td>
</tr><!--隠すエリア-->
</table><!--隠すエリア-->
<tr class="hide_area"><!--隠すエリア-->
<td class="example">
隠したいコンテンツ
</td>
</tr><!--隠すエリア-->
</table><!--隠すエリア-->
<head>~</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>
<!--/隠すエリア-->
<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;
}
本家ブログではたったこれだけで反映できちゃいました(`・ω・´)!!
デモページを見て自分で理解するまで少々時間がかかったので、独学なりにお勉強しようと思います(。・ω・)
0 コメント:
コメントを投稿