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関連についての記述を一部変更しました。