tests/manual/advanced.html

	advanced.html revision 7c8e4396f9846993dbd8fa11e53d3e7e7e8d3ca2
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<!DOCTYPE html>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<html>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra    <head>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        <style>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            body {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                font-family: sans-serif;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                line-height:18px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                margin: 50px 0px 0px 100px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                font-size:12px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            h1 {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              color: #222;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            #desc {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              margin-bottom:20px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              border-bottom:1px dotted #333;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            #desc span {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              background:#a3350d;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              padding:2px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              color:#f27243;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            .yui3-panel {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              outline:none;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            .yui3-widget-hd {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              font-weight:bold;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            .yui3-panel-content .yui3-widget-bd {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              padding:15px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            label {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              margin-right:30px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            fieldset {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              border:none;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              padding:0;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            input[type="text"] {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              border:none;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              border:1px solid #ccc;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              padding: 3px 7px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              -webkit-border-radius:2px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              -moz-border-radius:2px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              border-radius:2px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              font-size:100%;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              width:200px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        </style>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        <script type="text/javascript" src="http://localhost:8888/yui3/build/yui/yui-debug.js"></script>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra    </head>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra    <body class='yui3-skin-sam'>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        <h1>Panel Example.</h1>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        <div id="dt"></div>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        <p><input type="button" id="addRow" value="Add"></p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        <div id="panelContent">
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            <div class="yui3-widget-bd">
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra            <form>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              <fieldset>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                <p><label for="id">ID</label><br/>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                <input type="text" name="id" id="productId" placeholder=""></p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                <p><label for="name">Name</label><br/>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                <input type="text" name="name" id="name" value="" placeholder=""></p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                <p><label for="password">Price</label><br/>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                <input type="text" name="price" id="price" value="" placeholder="$"></p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              </fieldset>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              </form>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra          </div>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        </div>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        <div id="nestedPanel"></div>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        <script>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra          YUI({filter:"raw"}).use("datatable-base", "panel", "dd-plugin", function(Y) {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              var cols = ["id","name","price"],
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              data = [
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  {id:"ga-3475", name:"gadget", price:"$6.99"},
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  {id:"sp-9980", name:"sprocket", price:"$3.75"},
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  {id:"wi-0650", name:"widget", price:"$4.25"}
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              ],
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              dt = new Y.DataTable.Base({
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  columnset: cols,
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  recordset: data,
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  summary: "Price sheet for inventory parts",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  caption: "Price sheet for inventory parts"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              }),
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              panel = new Y.Panel({
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                srcNode: "#panelContent",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                width: 250,
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                centered: true,
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                visible: false,
e64780b4f675937dd55b203de02d49680e206a63Tilo Mitra                headerContent: "Add A New Product",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                plugins: [Y.Plugin.Drag]
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              }),
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              addRowBtn = Y.one("#addRow"),
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              nestedPanel;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              dt.render("#dt");
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              panel.addButton(
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    value: "Add Item",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    action: function(e) {
7c8e4396f9846993dbd8fa11e53d3e7e7e8d3ca2Tilo Mitra                      e.preventDefault();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                      addItem();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    },
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    section: Y.WidgetStdMod.FOOTER
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              );
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              panel.addButton(
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    value: "Remove All Items",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    action: function(e) {
7c8e4396f9846993dbd8fa11e53d3e7e7e8d3ca2Tilo Mitra                      e.preventDefault();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                      removeAllItemsConfirm();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    },
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    section: Y.WidgetStdMod.FOOTER
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              );
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              panel.render();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              addRowBtn.on('click', function(e) {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                panel.show();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              });
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              var addItem = function() {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                var o = {},
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                id = Y.one('#productId'),
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                name = Y.one('#name'),
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                price = Y.one('#price');
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                o.id = id.get("value");
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                o.name = name.get("value");
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                o.price = price.get("value");
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                id.set("value", "");
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                name.set("value", "");
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                price.set("value", "");
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                data.push(o);
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                dt.set('recordset', data).render();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                dt.render();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                panel.hide();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              };
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              var removeItems = function() {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                data = [];
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                dt.set('recordset', data).render();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                dt.render();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                panel.hide();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              };
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              var removeAllItemsConfirm = function() {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                if (!nestedPanel) {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  nestedPanel = new Y.Panel({
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    // headerContent: "Confirm",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    bodyContent: "Are you sure you want to remove all items?",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    zIndex: 5,
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    centered:true,
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    width:400,
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    buttons: [
e64780b4f675937dd55b203de02d49680e206a63Tilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                      {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                          value: "Yes",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                          action: function(e) {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                            e.preventDefault();
e64780b4f675937dd55b203de02d49680e206a63Tilo Mitra                            nestedPanel.hide();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                            panel.hide();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                            removeItems();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                          },
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                          section: Y.WidgetStdMod.FOOTER
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                      },
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                      {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                          value: "No",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                          action: function(e) {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                            e.preventDefault();
7c8e4396f9846993dbd8fa11e53d3e7e7e8d3ca2Tilo Mitra                            nestedPanel.hide();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                          },
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                          section: Y.WidgetStdMod.FOOTER
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                      }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                    ]
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  }).render('#nestedPanel');
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                else {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                  nestedPanel.show();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra                }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra              }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra          });
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra        </script>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra    </body>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra</html>