EFOサービスを日本で初めて始めた会社でCTOをしていた、弓削田です。
その当時はEFOというは無かったんですが、入力フォームを改善することで、
ECサイトの売上や、お問い合わせをしてくる人の数が確実に増えるということが分かり、
入力フォームって、非常に重要なポジションであることを認識することができました。
もっと言ってしまえば、「日本国内の入力フォームは世界で一番難しい」という事も分かり
改めてEFOの奥深さを感じ、
今回はそうしたEFOに関連する、今どきのチェックボックスの表示方法についての
プログラミング対応を書きたいと思います。
昨日のRadioボタンと似ていますが、若干違う点もあるので、あえて２つは別物という扱いにしています。
ブラウザごとのチェックボックスの見え方
<label><input type="checkbox" name="test_1" value="1">1</label><br>
<label><input type="checkbox" name="test_2" value="2" checked>2</label>
Google Chrome
Safari
Firefox
iPhone
radioボタンほどではなく、PCブラウザではほとんど同じような見栄えですが、
スマートフォンは、まるで別物の見え方ですね。
ソースコード
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="checkbox.css">
<script src="checkbox.js"></script>
</head>
<body>
<label><input type="checkbox" name="test_1" value="1">1</label><br>
<label><input type="checkbox" name="test_2" value="2" checked>2</label>
</body>
</html>
span[type="checkbox"]{
border:2px solid orange;
position:relative;
display:inline-block;
width:32px;
height:32px;
border-radius:4px;
vertical-align:middle;
margin:4px;
cursor:pointer;
}
span[type="checkbox"][data-checked="true"]{
background-color:orange;
}
span[type="checkbox"][data-checked="true"]:before{
content:"";
display:block;
width:30%;
height:50%;
background-color:transparent;
border-color:white;
border-style:solid;
border-width : 0 4px 4px 0;
margin:5% auto 0;
transform:rotate(45deg);
}
input[type="checkbox"][data-designed="1"]{
display:none;
}
window.$$checkbox = (function(){
// labelタグに入っているcheckboxボタンの一覧を取得
let MAIN = function(){
let checks = document.querySelectorAll("label input[type='checkbox']");
if(!checks){return;}
for(let check of checks){
this.set_check_button(check);
}
};
// ラジオボタンの設定フロー
MAIN.prototype.set_check_button = function(check){
if(!check){return;}
this.make_check_button_design(check);
this.make_check_button_event(check);
};
// 表示するラジオボタンエレメントの作成
MAIN.prototype.make_check_button_design = function(checkbox){
if(!checkbox){return;}
let span = document.createElement("span");
span.setAttribute("type" , "checkbox");
if(checkbox.name){
span.setAttribute("name" , checkbox.name);
}
if(checkbox.value){
span.setAttribute("value" , checkbox.value);
}
if(checkbox.className){
span.setAttribute("class" , checkbox.className);
}
checkbox.parentNode.insertBefore(span , checkbox);
checkbox.setAttribute("data-designed" , "1");
this.check_checkbox(checkbox);
};
// ラジオボタンにイベントセット
MAIN.prototype.make_check_button_event = function(checkbox){
if(!checkbox){return;}
checkbox.addEventListener("click" , (function(e){
this.check_checkbox(e.target);
}).bind(this));
};
// ラジオボタンのチェック状態を判定してspanを書き換える処理
MAIN.prototype.check_checkbox = function(target_elm){
if(!target_elm){return;}
let checks = document.querySelectorAll("input[type='checkbox'][name='"+ target_elm.name +"']");
for(let checkbox of checks){
let span = checkbox.parentNode.querySelector("span[type='checkbox']");
if(!span){return;}
if(checkbox.checked === true){
span.setAttribute("data-checked" , "true");
}
else{
span.setAttribute("data-checked" , "false");
}
}
};
return MAIN;
})();
// 起動処理(ページ読み込み完了を待ってスタート)
switch(document.readyState){
case "complete" :
new $$checkbox();
break;
case "interactive" :
window.addEventListener("DOMContentLoaded" , function(){new $$checkbox()});
break;
default :
window.addEventListener("load" , function(){new $$checkbox()});
break;
}
ちょこっと解説
今回も、labelタグ内にあるinputタグのcheckboxボタン(type)をすべて自動置換する仕様にしています。 radioボタンとの違いは、 checkboxは、nameの付け方がユニークでないと行けないのに対して、 radioボタンは、連動させる同一nameのタグが存在するということで、 checkboxの方が比較的かんたんだったんですね。 でも、phpなどの指定で、自動配列nameのような名前をつけるケースもあるので、 ユニークname値がすべてではないのが現実ですが、 今回はそこは無視して作業を進めました。 あと、今回のコンセプトは、html+css+javascriptの構成のみで行いたかったので、 チェックボックスのチェック部分をcssのafter疑似属性で作っています。 単純に、borderを描いた要素をナナメ45度に傾けているだけなんですが、 とてもいい感じに見えると思いません？ 気に入ってもらえた方、好きに改造して使ってもらっていいですよ。デモ
See the Pen efo-checkbox by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿