大人になったら肺呼吸@wp

大人になったら肺呼吸の特設会場

コンボボックスで検索ができるJSライブラリChosen

スクリーンショット 2013-06-08 15.17.23

はじめに

コンボボックスにたくさんの選択候補があると、探すのも大変です。
ChosenというJSライブラリを使うと、普通のコンボックスで検索ができるようになります。

デモサイト

以下のサイトでコンボックスを選択すると、テキストボックスが表示され検索ができるようになります。

スクリーンショット 2013-06-08 15.28.40

複数選択の場合、以下のように表示されます。

スクリーンショット 2013-06-08 15.41.51

Chosenの使い方

１．以下のサイトからzipファイルをダウンロードします。

２．ファイルを解凍して、chosen.jquery.min.jsとchosen.cssを取り出します。
３．Chosenの動作にはjQueryが必要なので、jQueryとchosen.jquery.min.jsをインクルードします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>

４．chosen.cssをインクルードします。

<link href="chosen.css" rel="stylesheet">

５．コンボックスのselectタグにclass=”chzn-select”を指定します。

<select data-placeholder="Choose a Country" class="chzn-select" style="width:350px;">
   <option>北海道</option>
   <option>青森</option>
   <option>岩手</option>
   <option>宮城</option>
   <option>秋田</option>
   <option>山形</option>
   <option>福島</option>
 </select>

６．ページの最後で以下のスクリプトを呼び出します。

<script type="text/javascript">
  $(".chzn-select").chosen();
  $(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>

サンプルコード

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Chosenのサンプル</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="chosen.jquery.min.js"></script>
 <link href="chosen.css" rel="stylesheet">
 </head>
 <body>
 <h2>普通のコンボボックス</h2>
 <select data-placeholder="Choose a Country" style="width:350px;">
   <option>北海道</option>
   <option>青森</option>
   <option>岩手</option>
   <option>宮城</option>
   <option>秋田</option>
   <option>山形</option>
   <option>福島</option>
 </select>

 <h2>Chosenを適用したコンボボックス</h2>
 <select data-placeholder="Choose a Country" class="chzn-select" style="width:350px;">
   <option>北海道</option>
   <option>青森</option>
   <option>岩手</option>
   <option>宮城</option>
   <option>秋田</option>
   <option>山形</option>
   <option>福島</option>
 </select>

 <script type="text/javascript">
  $(".chzn-select").chosen();
  $(".chzn-select-deselect").chosen({allow_single_deselect:true});
 </script>
 </body>
</html>

おわりに

Chosenを使うとコンボボックスを少しだけ使いやすくすることができます。
コンボボックスはWeb画面でよく使われるインタフェースなので、試してみてはいかがでしょうか。

 2013年6月8日 JavaScript

textareaを全画面表示してくれるJSライブラリWideArea.js

スクリーンショット 2013-06-07 23.23.24

はじめに

テキストエリアが狭すぎて書きたいことが書けない。

でもテキストエリア幅を変えるとレイアウトが崩れてしまう。そんなときは、クリック１つでテキストエリアを全画面表示して編集することができるWideArea.jsが便利です。

デモサイト

以下のサイトでテキストエリア内にある矢印アイコンをクリックすると、テキストエリアが全画面表示されます。

IE10、Firefox 21、Google Chrome 27で動作することを確認しています。

WideArea.jsの使い方

１．上記のサイトからライブラリを一式ダウンロードします。

２．HTML内でjsファイルとcssファイルをインクルードします。

 

 <script type="text/javascript" src="widearea.js?v02"></script>
<link href="widearea.css?v02" rel="stylesheet">

３．テキストエリアにdata-widearea=”enable”を指定します。

<textarea data-widearea="enable"></textarea>

４．ページの最後でwideArea()関数を呼び出します。

<script type="text/javascript">
wideArea();
</script>

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WideAreaのサンプル</title>
<script type="text/javascript" src="widearea.js?v02"></script>
<link href="widearea.css?v02" rel="stylesheet">
</head>
<body>
<h2>WideAreaを適用したテキストエリア</h2>
<textarea style="overflow:hidden;" placeholder="Type something..." data-widearea="enable"></textarea>

<script type="text/javascript">
wideArea();
</script>
</body>
</html>

おわりに

デザインを崩さず、テキストエリアを広げられるのでとても良いですね。テキストエリアが広いと書きたいことがすらすらと書けそうな気がします。

 2013年6月7日 JavaScript