今日の人気記事

  1. テーブルやリストから文字列を検索「QuickSearch」
  2. クリック操作で時計回りにスライドする画像ギャラリー「Aperture」

フォーム - 曜日を選択する「WeekLine Day Picker」

スポンサーリンク

曜日の選択を実装するプラグイン「WeekLine」を紹介します。

jQueryプラグイン「WeekLine」

このプラグインを使えば、要素を指定するだけで日曜から土曜までの選択できる曜日リストを実装することができます。

デフォルトでは、欧文表記(Sun、Mon...)ですがオプションを使って欧文表記(日、月...)に変更することもできます。

スポンサーリンク

それではデモページで曜日を選択してみてください。

「WeekLine」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="WeekLine のデモでーす。">
<title>jQuery - ProgressBar</title>
<link rel="Stylesheet" href="css/cleanslate.css" />
<link rel="Stylesheet" href="css/jquery.weekLine.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.weekLine.min.js"></script>
</head>
<body>
<h1>WeekLine のデモ。</h1>
<p>曜日を選択してください。</p>
<p>欧文</p>
<span id="demo1"></span>

<p>和文</p>
<p id="demo2"></p>

<script>
$(document).ready(function(){
  $("#demo1").weekLine();
  $("#demo2").weekLine({
    dayLabels: ["日", "月", "火", "水", "木", "金", "土"]
  });
});
</script>

<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/weekline/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)