サラリーマンやりながらネットショップ運営していこうぜ: 4月 2016

2016年4月5日火曜日

オーダーフォーム改造のためのタブメニューをあれこれ模索中ですが
どれも一長一短。
CSSでガチガチにデザインしてあるものは、HTMLの構造に無理があったり。
jQueryを使ったものでも、項目を増やすことが難しかったり・・・

前回のポストの時点でベストかなぁと思ってたタブメニューですが、ようやくシンプルなものが見つかりました。

CSSでのカスタマイズも簡単。
おまけに項目を増やすのもクラス名を追加するだけでできちゃうなかなかのすぐれもの。

今回見つけたのはこちらのエントリー。
いや、マジ感謝っす。

[jQuery] ものすごくシンプルなタブメニュー
タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。 Result jQuery [code language="js"] $(function() { $(".tab li").click(function()...

デモはこちら

This is the content of TAB 1.

This is the content of TAB 2.

This is the content of TAB 3.

サンプルコードは下のような感じ

<!doctype html>

<html>

<head>

<title>無題ドキュメント</title>

* {

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.tab_menu_box {

text-align: center;

}

ul.tab_menu {

list-style: none;

margin-left: auto;

margin-right: auto;

}

ul.tab_menu li {

background-color: #f2f2f2;

color: #666;

cursor: pointer;

display: inline-block;

width: 100px;

}

ul.tab_menu li:hover {

color: #FF0000;

}

ul.tab_menu li.active {

background-color: #999;

color: #fff;

}

div.tabContent {

width: 300px;

display: none;

margin-left: auto;

margin-right: auto;

border: thin solid rgba(201,201,201,1.00);

}

div.active {

display: block;

-webkit-animation: fadein 1s linear 0s 1;

}

label {

width: 100%;

display: inline-block;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

}

@-webkit-keyframes fadein {

0% {

opacity:0;

}

100% {

opacity:1;

}

</style>

</head>

<body>

$(".tab_menu li").click(function() {

var num = $(".tab_menu li").index(this);

$(".tabContent").removeClass('active');

$(".tabContent").eq(num).addClass('active');

$(".tab_menu li").removeClass('active');

$(this).addClass('active')

});

});</script>

NO1</label>

</li>

<li>

NO2</label>

</li>

<li>

NO3</label>

</li>

</ul>

</div>

<div class="tabContent active">This is the content of TAB 1.</div>

<div class="tabContent">This is the content of TAB 2.</div>

<div class="tabContent">This is the content of TAB 3.</div>

</body>

</html>

2016年4月4日月曜日

jQueryを使ったラジオボタンでタブ切り替え

ネットショップのオーダーフォームをリニューアルしようと思い、ラジオボタンを使ったタブメニューの切り替えをいろいろ模索してたところようやく簡単シンプルなものが見つかったのでメモ。

参考にしたのは下のリンク先の情報

ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた
トップページ > WEB製作 > ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた久々にjQueryネタでも。本当にちょっとしたものなのですが、意外と使えそうなのでポストしてみます。概要はタイトルにもある通り、ラジオボタンの選択値によって、指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するというものです。ラジオボタンの checked はスクリプトの仕様上、必須です。では、切り替えるスクリプト。まず最初に removeClassで表示させます。ラジオボタンに checked がない場合は、TRが3つ、普通に表示されてしまうので注意。で、次にラジオボタンの値によりしかるべし TR に invisible クラスを与えるだけです。テーブルでなく、DIV タグにしたい場合は、テーブルタグではなく div で書き、セレクタを tr の内容ではなく、div　にしてしまえば、ほぼそのまま流用可能。 (1)の trigger は、画面の初期表示時にイベントを自動実行させるためのものです。この場合は、チェーンメソッドにして、change 自身を実行させています。便利。

上記のサイトではtableタグを使っていたので、それをDIVタグに変更。
あと項目が３つだけだったので１０個増やして全部で１３個のメニューから呼び出せるようにしました。

CSS周りは全然いじっていませんけど、デフォルトではクラス名「.invisible」が必須でほかは自由にデザインできるので適当に変更しちゃってください。
とりあえず全体のソース。
あ、jQueryはバージョン1.xじゃないと動きませんのでそのへんは注意してくださいね。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQueryを使ったラジオボタンでタブメニュー切り替え</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[type=radio]').change(function() {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').removeClass('invisible');

if ($("input:radio[name='tabmenu1']:checked").val() == "1") {
$('#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "2") {
$('#tr1,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "3") {
$('#tr1,#tr2,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "4") {
$('#tr1,#tr2,#tr3,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "5") {
$('#tr1,#tr2,#tr3,#tr4,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "6") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "7") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "8") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "9") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "10") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "11") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "12") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "13") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12').addClass('invisible');
}
}).trigger('change'); //←(1)
});
</script>
<style>
.invisible {
display: none;
}
</style>
</head>
<body>

<div>
<label >
<input type="radio" name="tabmenu1" value="1" id="radio1" checked />
NO1</label>
</div>
<div>
<label for="radio2">
<input type="radio" name="tabmenu1" value="2" id="radio2"/>
NO2</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="3" id="radio3" />
NO3</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="4" id="radio4" />
NO4</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="5" id="radio5" />
NO5</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="6" id="radio6" />
NO6</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="7" id="radio7" />
NO7</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="8" id="radio8" />
NO8</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="9" id="radio9" />
NO9</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="10" id="radio10" />
NO10</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="11" id="radio11" />
NO11</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="12" id="radio12" />
NO12</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="13" id="radio13" />
NO13</label>
</div>
<div id="tr1">
<h5>機能</h5>
<p>1</p>
</div>
<div>
<div id="tr2">
<h5>機能</h5>
<p>2</p>
</div>
<div id="tr3">
<h5>機能</h5>
<p>3</p>
</div>
<div id="tr4">
<h5>機能</h5>
<p>4</p>
</div>
<div id="tr5">
<h5>機能</h5>
<p>5</p>
</div>
<div id="tr6">
<h5>機能</h5>
<p>6</p>
</div>
<div id="tr7">
<h5>機能</h5>
<p>7</p>
</div>
<div id="tr8">
<h5>機能</h5>
<p>8</p>
</div>
<div id="tr9">
<h5>機能</h5>
<p>9</p>
</div>
<div id="tr10">
<h5>機能</h5>
<p>10</p>
</div>
<div id="tr11">
<h5>機能</h5>
<p>11</p>
</div>
<div id="tr12">
<h5>機能</h5>
<p>12</p>
</div>
<div id="tr13">
<h5>機能</h5>
<p>13</p>
</div>
</div>
</body>
</html>

登録: 投稿 (Atom)

サラリーマンやりながらネットショップ運営していこうぜ

2016年4月5日火曜日

WEB製作に知っておくと便利な「正規表現」

二桁の数字を検索するための正規表現

三桁の数字を検索するための正規表現

カスタマイズ簡単なシンプル構造のタブメニューを見つけた！

[jQuery] ものすごくシンプルなタブメニュー

サンプルコードは下のような感じ

2016年4月4日月曜日

jQueryを使ったラジオボタンでタブ切り替え

ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた