便利なJavaScriptライブラリ集

社内システムを構築していて利用して便利だと思ったライブラリを
纏めてみました。業務に即生かせるものではないですがお役に立てば幸いです。
全てjQuery系のライブラリになります。

DataTables

お助かり度 (4.5)
検索結果などのグリッドコンテンツを見栄えよく作成してくれる。
通常のHTMLタグ構成のテーブルにJavaScriptでアタッチするだけ!
1ページあたりに表示する件数、ページング処理、キーワードフィルターを自動でやってくれて便利です
-サンプル-
javascript2-1
-HTML側-

	  	
			<table id="projectSearchResult" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
				<thead>
					<tr>
			            <th>案件番号</th>
			            <th>取引先</th>
			            <th>案件名</th>
			            <th>売上種別</th>
			            <th>案件管理部署</th>
			            <th>案件責任者</th>
			            <th>営業担当者</th>
			            <th>案件ステータス</th>
			            <th>操作</th>
	        		</tr>
	    		</thead>
	    		<tfoot>
		        	<tr>
			            <th>案件番号</th>
			            <th>取引先</th>
			            <th>案件名</th>
			            <th>売上種別</th>
			            <th>案件管理部署</th>
			            <th>案件責任者</th>
			            <th>営業担当者</th>
			            <th>案件ステータス</th>
			            <th>操作</th>
	        		</tr>
    			</tfoot>
	    		<tbody>
			        <tr class="info">
			            <td>2016-000-001</td>
			            <td>XXXXXX</td>
			            <td>テスト案件</td>
			            <td>受託</td>
			            <td>ITSS事業部</td>
			            <td>野口 大輔</td>
			            <td>時庭 禎和</td>
			            <td>未完了</td>
			        </tr>
			    </tbody>
			  </table>

-JavaScript-側

			//DataTables エクステンション初期化
			projectSearchResultDataTables=$('#projectSearchResult').DataTable( {
				// 大量データ利用時、「処理中」メッセージを表示するかを設定
				bProcessing: true,
				// 初期表示の行数設定
				iDisplayLength: 10,
				// ページングボタンの制御
				// two_button:進むと戻る
				// full_numbers:全ボタン表示
				sPaginationType: "full_numbers",
				// 改ページを有効にするか設定
				bPaginate: true,
				// ソート行を強調(cssクラスを指定)するかを設定
				bSortClasses: false,
				//検索(フィルタ)を表示するかを設定
				bFilter:true,
				//画面の表示件数を選択可能かを設定
				bLengthChange:true,
				// 自働列幅の計算を有効にするか設定
				bAutoWidth: true,
				// テーブル情報の表示を有効にするか設定
				bInfo: true,
				// 水平スクロールを有効にするか設定
				sScrollX: true,
				// 垂直方向のスクロールを有効にするか設定
				//sScrollY: "200px",
				sScrollY: false,
				
				//取引先の昇順でデフォルトソート
				"order": [[ 1, "asc" ]],
			
				//ローカライズ
		        "oLanguage": {
		        	"sLengthMenu": "表示行数 _MENU_ 件",
		            "oPaginate": {
		                "sNext": "次のページ",
		                "sPrevious": "前のページ",
		                "sFirst": "最初",
		                "sLast": "最後"
		            },
		        	"sInfo": "全_TOTAL_件中 _START_件から_END_件を表示",
		            "sSearch": "さらに絞込み:"
		        },
		        
		        //"stripeClasses": [ 'active', 'info' ], //ストライプ色
		        
		        //カラムごとの設定(ソート可否)
		        "columns": [
		                    { "orderable": false },
		                    null,
		                    null,
		                    { "orderable": false },
		                    { "orderable": false },
		                    { "orderable": false },
		                    { "orderable": false },
		                    { "orderable": false },
		                    { "orderable": false }
		                  ]
		    });

jQuery.superLabels

お助かり度 (3.5)
テキストボックスへの入力ヒントが表示できます。
画像ではわかりずらいですが、入力時にヒントが右にスライドして入力の邪魔になりません。
-サンプル-
javascript2-2
-HTML側-

	  	
	<form action="masterUserEditComplete.html" class="formMasterUserInput" id="formMasterUserInput" style="padding: 10px" method="post">
      			<div id="projectNoRow" class="row">
					    <div class="form-group">
					      <label class="col-xs-2 control-label text-right">ユーザ名
					      	<span id="userNameRequireMark" class="glyphicon glyphicon-asterisk icom-small crimson"></span></label>
					      <div class="col-xs-6">
									<label id="userNamePlaceHolder" for="text-input">ユーザ名を入力してください</label>
          				
									<div class="invalidMessageDiv">
					        	<div class="invalidMessage-top"></div>
					        </div>
									<span class="control-label" id="userNameDisp" style="font-weight: bold;text-align: left"></span>
					      </div>
					    </div>
					  </div>
					  
      			<div id="projectNoRow" class="row">
					    <div class="form-group">
					      <label class="col-xs-2 control-label text-right">ユーザフリガナ
					      	<span id="userKanaRequireMark" class="glyphicon glyphicon-asterisk icom-small crimson"></span></label>
					      <div class="col-xs-6">
									<label id="userKanaPlaceHolder" for="text-input">フリガナを全角カタカナで入力してください</label>
          				
									<div class="invalidMessageDiv">
					        	<div class="invalidMessage-top"></div>
					        </div>
									<span class="control-label" id="userKanaDisp" style="font-weight: bold;text-align: left"></span>
					      </div>
					    </div>
					  </div>

-JavaScript-側

	//superLabelsエクステンション初期化
	if($('form[class="formMasterUserInput"]').length) {
		$('form[class="formMasterUserInput"]').superLabels({
			labelLeft:25,
			labelTop:5
		});
	}

datepicker

お助かり度 (4.0)
日付をカレンダーから入力できるようにするUI部品です。年月までの入力にも対応しています。
-サンプル-
javascript2-3
-HTML側-

	  	<div class="row">
		    <div class="form-group">
		      <label class="col-xs-2 control-label text-right">入社日
		      	<span id="hireDateRequireMark" class="glyphicon glyphicon-asterisk icom-small crimson"></span></label>
		      <div class="col-xs-4">
						<div id="hireDateDiv" class="attach-datepicker_YYYYMMDD input-group date">
								
								<span class="input-group-addon" style="background-color: green"><span class="glyphicon glyphicon-calendar white"></span></span>
						</div>
						<div class="invalidMessageDiv">
		        	<div class="invalidMessage-top"></div>
		        </div>
						<span class="control-label" id="hireDateDisp" style="font-weight: bold;text-align: left"></span>
		      </div>
		    </div>
		  </div>

-JavaScript-側

	//datepickerエクステンションアタッチ
	if($('.attach-datepicker_YYYYMMDD').datepicker!=null) {
	    $('.attach-datepicker_YYYYMMDD').datepicker({
			language: 'ja',
			format: "yyyy年mm月dd日",
		    autoclose: true
	    })
	}

jquery.jpostal

お助かり度 (3.0)
郵便番号から住所検索ができるプラグインです。
-サンプル-
javascript2-4
-HTML側-

	  	<div class="row">
							    <div class="form-group">
							      <label class="col-xs-2 control-label text-right">郵便番号
							      	<span id="postcodeRequireMark" class="glyphicon glyphicon-asterisk icom-small crimson"></span></label>
							      <div class="col-xs-3" id="postcodeDiv">
							      	<div class="row">
							      		<div class="col-xs-5">
					       					
							        	</div>
							      		<div class="col-xs-2" style="margin: 7px 0px 0px -10px">
										      <span id="postcodeHifun">-</span>
							        	</div>
							      		<div class="col-xs-5">
					       					
							        	</div>
							        </div>
											<div class="invalidMessageDiv">
							        	<div class="invalidMessage-top"></div>
							        </div>
											<span class="control-label" id="postcodeDisp" style="font-weight: bold;text-align: left"></span>
							      </div>
							      <div>
							      	<button id="btn_postcode2address" type="button" class="btn btnLayout01" style="width: 200px">
							      		郵便番号から住所を検索</button>
							      </div>
							  	</div>
							  </div>
							  		      			
		      			<div class="row">
							    <div class="form-group">
							      <label class="col-xs-2 control-label text-right">都道府県
							      	<span id="address1RequireMark" class="glyphicon glyphicon-asterisk icom-small crimson"></span></label>
							      <div class="col-xs-2" id="address1Div">
					        		
											
												<p>
						          		選択してください
													北海道
													青森県
													岩手県
													宮城県
													秋田県
													山形県
													福島県
													茨城県
													栃木県
													群馬県
													埼玉県
													千葉県
													東京都
													神奈川県
													新潟県
													富山県
													石川県
													福井県
													山梨県
													長野県
													岐阜県
													静岡県
													愛知県
													三重県
													滋賀県
													京都府
													大阪府
													兵庫県
													奈良県
													和歌山県
													鳥取県
													島根県
													岡山県
													広島県
													山口県
													徳島県
													香川県
													愛媛県
													高知県
													福岡県
													佐賀県
													長崎県
													熊本県
													大分県
													宮崎県
													鹿児島県
													沖縄県 
				    						</p>
												<p>
													<p>
								          	[[${option.name}]]
													</p>
				    						</p>
											
											<span class="control-label" id="address1Disp" style="font-weight: bold;text-align: left"></span>
											<div class="invalidMessageDiv">
							        	<div class="invalidMessage-top" style="padding-left: 7px;font-size: 0.8em"></div>
							        </div>
							      </div>
							      <label class="col-xs-2 control-label text-right">市区町村
							      	<span id="address2RequireMark" class="glyphicon glyphicon-asterisk icom-small crimson"></span></label>
							      <div class="col-xs-5" id="address2Div">
							        
											<div class="invalidMessageDiv">
							        	<div class="invalidMessage-top"></div>
							        </div>
											<span class="control-label" id="address2Disp" style="font-weight: bold;text-align: left"></span>
							      </div>
							    </div>
							  </div>

		      			<div class="row">
							    <div class="form-group">
							      <label class="col-xs-2 control-label text-right">町域
							      	<span id="address3RequireMark" class="glyphicon glyphicon-asterisk icom-small crimson"></span></label>
							      <div class="col-xs-9" id="address3Div">
							        
											<div class="invalidMessageDiv">
							        	<div class="invalidMessage-top"></div>
							        </div>
											<span class="control-label" id="address3Disp" style="font-weight: bold;text-align: left"></span>
							      </div>
							    </div>
							  </div>

-JavaScript-側

	//郵便番号から住所を検索実行の処理
		$('#btn_postcode2address').jpostal({
			click : '#btn_postcode2address',
			postcode : [
				'#postcode1',
				'#postcode2'
			],
			address : {
				'#address1'  : '%3',
				'#address2'  : '%4',
				'#address3'  : '%5'
			}
		});

jquery-metadata-master

お助かり度 (4.0)
ファイルプレビューをブラウザで表示することができます。
-サンプル-
javascript2-5
-HTML側-

	<div class="modal" role="dialog" id="printModalDialog">
		<div class="modal-dialog">
			<div class="modal-content" style="width:1200px;margin-left: -300px;margin-top: -30px">
				<div class="modal-body">
					<div class="row">
	 				<span class="col-xs-1 modal-title"><span id="modalTitle">プレビュー</span></span>
	 				<button class="col-xs-1 col-xs-offset-10 btn btn-primary" style="width: 80px">閉じる</button>
	 			</div>
					<a id="previewFile" class="media { width: 1150, height: 500 }" href=""></a> 
				</div>
			</div>
		</div>
	</div>

-JavaScript-側

	$("#previewFile").prop("href", );
    $('a.media').media();
	$('#printModalDialog').modal('show');

bootstrap-touchspin-master

お助かり度 (4.0)
タッチスピンによる数値入力を行えるUIプラグイン。小数にも対応。
-サンプル-
javascript2-6
-HTML側-

	<label class="col-xs-2 control-label text-right">支払いサイト
	<span id="paymentSiteMark" class="glyphicon glyphicon-asterisk icom-small crimson"></span></label>
	<div class="col-xs-2" id="paymentSiteDiv">
		
		<span class="control-label" id="paymentSiteDisp" style="font-weight: bold;text-align: left"></span>
	</div>

-JavaScript-側

	if($("input[name='paymentSite']").TouchSpin!=null) {
			$("input[name='paymentSite']").TouchSpin({
				min: 0,
		        max: 999,
		        step: 1,
		        decimals: 0,
		        boostat: 1,
		        maxboostedstep: 30,
		        postfix: '日',
		        verticalbuttons: true
		    });
		}

~以上です~