PrimeUIについて

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/

ファイル構成

ファイル構成は、次の通りです。
prime-ui1

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>

prime-ui2

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