我讨厌 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