まだデータがありません。
やたらと長いフォームをスライダーに「jFormslider」
当ページのリンクには広告が含まれています。
スポンサーリンク
やたらと長いフォームをスライダーにするプラグイン「jFormslider」を紹介します。
jQueryプラグイン「jFormslider」
このプラグインを使えば、ページの上から下まで……とやたろと長い入力フォームをスライダーに変更することができます。
スライダーごとに入力チェックをすることができるので、ユーザーの入力ミスを減らすことができそうですね。
また、項目ごとに分けることができるので、フォームを見やすく構成することもできそうです。
スポンサーリンク
それでは、デモページのフォームをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="jFormslider のデモでーす。">
<title>jFormslider - jQuery Plugin Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jFormslider.js"></script>
<script>
$(document).ready(function(){
options={
width:500,
height:170,
next_prev:true,
next_class:'btn btn-primary btn-xs',
prev_class:'btn btn-primary btn-xs',
error_class:'alert alert-danger',
texts:{
next:'次！',
prev:'前！'
},
speed:600,
};
$('#slider').jFormslider(options);
})
</script>
</head>
<body>
<h1>jFormslider のデモでーす</h1>
<div id="slider" class="form">
<ul>
<li data-id="slider_start">
<div class="form-group">
<input type="text" class="form-control" placeholder="「姓」を入力してください" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="「名」を入力してください" required>
</div>
</li>
<li>
<div class="form-group">
<input type="text" class="form-control" data-toggle="tooltip" data-placement="top" title="Enter valid email" placeholder="Eメールアドレス を入力してください" email>
</div>
</li>
<li>
<div class="form-group">
<input type="text" class="form-control" placeholder="「電話番号」を入力してください" required>
</div>
</li>
</ul>
</div>
<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/jformslider/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク