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