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)