フロントが苦手なWEBエンジニアの技術メモ: YUI3 でpanel表示

YUI3 を使って panel を表示するサンプルを作成。

javascript


YUI().use('panel', function(Y) {
    var panel = new Y.Panel({
        srcNode  : '#sPanel',
        centered : true,
        render   : true,
        visible  : false,
        modal    : true,
        buttons  : []
    }); 
    
    Y.one('#sPanelOpen').on('click', function(e) {
        e.preventDefault();
        panel.show();
    }); 
    
    Y.one('#sPanelClose').on('click', function(e) {
        e.preventDefault();
        panel.hide();
    }); 
});

php


<html>
<head>
</head>
<title>YUI3.0サンプル</title>
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script src="/sample.js"></script>
</head>
<body class="yui3-skin-sam">
<a href="" id="sPanelOpen">open</a></br>

<div id="sPanel">
<strong>サンプルパネル</strong></br>
<a href="" id="sPanelClose">close</a></br>
</div>

</body>
</html>

これで、open リンクをクリックすると panel が表示されます。
body に class="yui3-skin-sam" を設定すると panel 表示時に、背景を薄暗くできます。
panel は yui3.4 から利用できるようです。

サンプル画面

yuiドキュメント

自分はフロント系が苦手なので、もう少し js 、html に強くなるため YUI 関連も引き続き調べていこうと思います。

フロントが苦手なWEBエンジニアの技術メモ

2011年11月21日月曜日

YUI3 でpanel表示

0 件のコメント:

コメントを投稿