我討厭 YUI 3 .....第十二天 Panel

Tags:

YUI3

簡中版

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")}  );
 
});

下載 confirm.js

This post was last modified by puritys 2016/09/25

我討厭 YUI 3 .....第十一天 Node Rotate Plugin

我討厭 YUI 3 .....第十三天 Radio

回應 (Leave a comment)

Name

E-mail

Message