PrimeUIは、PrimeFacesから派生したJavaScriptライブラリです。
PrimeUIは、jQuery UIをベースとしたライブラリで、豊富なウィジェットを提供しています。そして、PHPなどJSP以外の言語でも使用できます。
公式サイトはこちらです。
http://www.primefaces.org/primeui/
今回は、Picklistについてサンプルを作成してみました。
ダウンロード
PrimeUI
執筆時点での最新バージョンは、2.1です。
https://github.com/primefaces/primeui/releases
jQuery
今回はバージョン1系を使いました。執筆時点での最新バージョンは、1.11.3です。
http://jquery.com/download/
jQuery UI
執筆時点での最新バージョンは、1.11.4です。[Custom Download]をクリックして、ThemeにNo Themeを選択します。
http://jqueryui.com/
Font Awesome
執筆時点での最新バージョンは、4.4.0です。
http://fortawesome.github.io/Font-Awesome/
ファイル構成
PrimeUI
developmentディレクトリとproductionディレクトリがあります。今回は、productionディレクトリの中にあるprimeui-2.1-min.cssとprimeui-2.1-min.jsを使いました。
themesディレクトリにテーマファイルが入っていますので、任意のテーマを選びます。テーマは、PrimeUI公式サイトの右上にあるThemesアイコンをクリックすると確認することができます。
今回は、bootstrapを選択しました。
jQuery
jquery-1.11.3.min.jsを任意のディレクトリに配置します。
jQuery UI
jquery-ui.min.cssとjquery-ui.min.jsを任意のディレクトリに配置します。
Font Awesome
font-awesome-4.4.0以下の全ファイルを任意のディレクトリに配置します。
サンプルコード
作成したコードは、次の通りです。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PrimeUI example</title> <link rel="stylesheet" href="themes/bootstrap/theme.css"> <link rel="stylesheet" href="css/jquery-ui.min.css"> <link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/primeui-2.1-min.css"> <style type="text/css"> body, .ui-widget { font-family: Meiryo; font-size: 13px; } </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/primeui-2.1-min.js"></script> <script type="text/javascript"> $(function() { var cities = new Array( {label:'横浜市', value:1}, {label:'大阪市', value:2}, {label:'名古屋市', value:3}, {label:'札幌市', value:4}, {label:'神戸市', value:5} ); $('#cities').puipicklist({ sourceData: cities }); }); </script> </head> <body> <span>PrimeUI Picklist</span> <p/> <form> <div id="cities"> <select name="source"> </select> <select name="target"> </select> </div> </form> </body> </html>
linkタグとscriptタグは、上記コードの順番と異なる場合、動作しないこともあり得ます。また、font-sizeの値を大きくするとボタンのデザインが崩れます。
次にコードの説明をします。
40行目のdivタグの中に2つのselectタグを入れます。selectタグのnameは、sourceとtargetにします。
JavaScript側では、Picklistに表示するリストを用意します。リストの各オブジェクトは、labelとvalueを定義できます。
そして、$(‘#cities’).puipicklist()でidがcitiesのdivタグをPicklistとして初期化します。sourceDataには、Picklistの左側に表示するリストを指定します。
追記
2015-09-23 theme関連についての記述を一部変更しました。