2013
Nov
08
YUI 3 有一個 Module 叫做 Panel ，可以用來製作燈箱效果、警告視窗等等功能。
Panel 的實際長像如下，這是一個寬 300, 高 200 的 Panel
建立一個 Panel
首先我們得 require panel 這個 module, 這裡我用 use 就可以了，接著我們要 new Panel 這個 Object ，並定義一些參數
- srcNode: 這是指 Panel 要置入的 tag 名稱，可以用下列三種寫法 ： #id, .class , tag
- width: 定義 Panel 的寬度
- height: 定義 Panel 的高度
- headerContent： 定義標題
- bodyContent：定義內容
Example
- YUI().use("panel", function (Y) {
- var panel = new Y.Panel({
- srcNode: '#myPanelContent',
- width : 400,
- modal : true,
- headerContent:"Header",
- bodyContent:"Content"
- });
- panel.render();
- });
新增按鈕
預設的 Panel 只有右上角一個 「關閉鈕」，現在我們就來增加「確定」和「取消」按鈕。
- section : 定義按鈕的位置
- 「Y.WidgetStdMod.FOOTER」 新增按鈕到 Panel 的 footer
- 「Y.WidgetStdMod.HEADER」 新增按鈕到 Panel 的 header
example
- YUI().use("panel", function (Y) {
- var panel = new Y.Panel({
- width: 300,
- });
- var ok = {
- "value": "確定",
- section: Y.WidgetStdMod.FOOTER,
- action: function () {alert("you clicked.")}
- };
- panel.addButton(ok);
- panel.render();
- });
取代所有的按鈕
YUI 提供了另一個按鈕定義方式，可以在你建立 Panel 時，定義 buttons，不過這個方式會連右上角的「關閉鈕」一起刪除，我想大部分的功能「關閉鈕」都是必要的，所以還是不要常用這個功能。
example
- var panel = new Y.Panel({
- width: 300,
- buttons: [
- ok = {
- "value": "確定",
- section: Y.WidgetStdMod.FOOTER,
- action: function () {alert("you clicked.")}
- }
- ]
- });
- panel.render();
刪除按鈕，確認視窗
接下來做一個常常會用到的 Panel ，當我點擊刪除文章時，希望可以先跳出一個確認視窗，等我按了確認才真的執行刪除。
YUI code
- <script src="/filemanage/blog_files/deleteConfirm.js"></script>
- YUI().use("deleteConfirm", function (Y) {
- Y.one("body").addClass("yui3-skin-sam");
- new Y.deleteConfirm({ srcNode: Y.one(".btn-wrap")} );
- });