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
  1. YUI().use("panel", function (Y) {
  2.  
  3. var panel = new Y.Panel({
  4. srcNode: '#myPanelContent',
  5. width : 400,
  6. modal : true,
  7. headerContent:"Header",
  8. bodyContent:"Content"
  9. });
  10. panel.render();
  11.  
  12. });

新增按鈕

預設的 Panel 只有右上角一個 「關閉鈕」,現在我們就來增加「確定」和「取消」按鈕。

  • section : 定義按鈕的位置
    • 「Y.WidgetStdMod.FOOTER」 新增按鈕到 Panel 的 footer
    • 「Y.WidgetStdMod.HEADER」 新增按鈕到 Panel 的 header
example
  1. YUI().use("panel", function (Y) {
  2. var panel = new Y.Panel({
  3. width: 300,
  4. });
  5. var ok = {
  6. "value": "確定",
  7. section: Y.WidgetStdMod.FOOTER,
  8. action: function () {alert("you clicked.")}
  9. };
  10. panel.addButton(ok);
  11. panel.render();
  12. });

取代所有的按鈕

YUI 提供了另一個按鈕定義方式,可以在你建立 Panel 時,定義 buttons,不過這個方式會連右上角的「關閉鈕」一起刪除,我想大部分的功能「關閉鈕」都是必要的,所以還是不要常用這個功能。

example
  1. var panel = new Y.Panel({
  2. width: 300,
  3. buttons: [
  4. ok = {
  5. "value": "確定",
  6. section: Y.WidgetStdMod.FOOTER,
  7. action: function () {alert("you clicked.")}
  8. }
  9. ]
  10. });
  11. panel.render();

刪除按鈕,確認視窗

接下來做一個常常會用到的 Panel ,當我點擊刪除文章時,希望可以先跳出一個確認視窗,等我按了確認才真的執行刪除。

YUI code
  1. <script src="/filemanage/blog_files/deleteConfirm.js"></script>
  2. YUI().use("deleteConfirm", function (Y) {
  3.  
  4. Y.one("body").addClass("yui3-skin-sam");
  5. new Y.deleteConfirm({ srcNode: Y.one(".btn-wrap")} );
  6.  
  7. });

回應 (Leave a comment)