advanced.html revision 84765788c559bfdead67172a79759ac60c77231b
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek<!DOCTYPE html>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek<html>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <head>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <style>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek body {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek font-family: sans-serif;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek line-height:18px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek margin: 50px 0px 0px 100px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek font-size:12px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek h1 {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek color: #222;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek #desc {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek margin-bottom:20px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek border-bottom:1px dotted #333;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek #desc span {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek background:#a3350d;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek padding:2px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek color:#f27243;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek .yui3-panel {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek outline:none;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek .yui3-widget-hd {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek font-weight:bold;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek .yui3-panel-content .yui3-widget-bd {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek padding:15px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek label {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek margin-right:30px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek fieldset {
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek border:none;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek padding:0;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
e7ccfb139388c947ec2dee16cfe3005f5643b90dPetr Cech input[type="text"] {
56c9f8731173eae841a05f31bb03d311076a8485Petr Cech border:none;
56c9f8731173eae841a05f31bb03d311076a8485Petr Cech border:1px solid #ccc;
56c9f8731173eae841a05f31bb03d311076a8485Petr Cech padding: 3px 7px;
56c9f8731173eae841a05f31bb03d311076a8485Petr Cech -webkit-border-radius:2px;
56c9f8731173eae841a05f31bb03d311076a8485Petr Cech -moz-border-radius:2px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek border-radius:2px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek font-size:100%;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek width:200px;
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek }
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek </style>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <script type="text/javascript" src="/build/yui/yui-debug.js"></script>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek </head>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <body class='yui3-skin-sam'>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <h1>Panel Example.</h1>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <div id="dt"></div>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <p><input type="button" id="addRow" value="Add"></p>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <div id="panelContent">
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <div class="yui3-widget-bd">
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <form>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <fieldset>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <p><label for="id">ID</label><br/>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <input type="text" name="id" id="productId" placeholder=""></p>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <p><label for="name">Name</label><br/>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <input type="text" name="name" id="name" value="" placeholder=""></p>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <p><label for="password">Price</label><br/>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <input type="text" name="price" id="price" value="" placeholder="$"></p>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce </fieldset>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce </form>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce </div>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce </div>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce <div id="nestedPanel"></div>
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek <script>
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek YUI({filter:"raw"}).use("datatable-base", "panel", "dd-plugin", function(Y) {
4f3a9d837a55b49448eca3c713c85a406207e523Simo Sorce
150b76e13b7c4f3ccf1d709bf517ca2af6b2c9a2Jakub Hrozek
//Create the datatable with some gadget information
var cols = ["id","name","price"],
data = [
{id:"ga-3475", name:"gadget", price:"$6.99"},
{id:"sp-9980", name:"sprocket", price:"$3.75"},
{id:"wi-0650", name:"widget", price:"$4.25"}
],
dt = new Y.DataTable.Base({
columnset: cols,
recordset: data,
summary: "Price sheet for inventory parts",
caption: "Price sheet for inventory parts"
}),
//Create the main modal form
panel = new Y.Panel({
srcNode: "#panelContent",
width: 250,
centered: true,
visible: false,
modal:true,
headerContent: "Add A New Product",
plugins: [Y.Plugin.Drag]
}),
addRowBtn = Y.one("#addRow"),
nestedPanel;
//Render The Datatable
dt.render("#dt");
//Add the footer buttons to the modal form
panel.addButton(
{
value: "Add Item",
action: function(e) {
e.preventDefault();
addItem();
},
section: Y.WidgetStdMod.FOOTER
}
);
panel.addButton(
{
value: "Remove All Items",
action: function(e) {
e.preventDefault();
removeAllItemsConfirm();
},
section: Y.WidgetStdMod.FOOTER
}
);
//Render the modal form
panel.render();
//When the addRowBtn is pressed, show the modal form
addRowBtn.on('click', function(e) {
panel.show();
});
//Define the addItem function - this will be called
//when "Add Item" is pressed on the modal form
var addItem = function() {
var o = {},
id = Y.one('#productId'),
name = Y.one('#name'),
price = Y.one('#price');
o.id = id.get("value");
o.name = name.get("value");
o.price = price.get("value");
id.set("value", "");
name.set("value", "");
price.set("value", "");
data.push(o);
dt.set('recordset', data).render();
dt.render();
panel.hide();
};
//Define the removeItems function - this will be called
//when "Remove All Items" is pressed on the modal form
//and is confirmed "yes" by the nested panel.
var removeItems = function() {
data = [];
dt.set('recordset', data).render();
dt.render();
panel.hide();
};
//Instantiate the nested panel if it doesn't exist, otherwise just show it.
var removeAllItemsConfirm = function() {
if (!nestedPanel) {
nestedPanel = new Y.Panel({
bodyContent: "Are you sure you want to remove all items?",
zIndex: 5,
centered:true,
width:400,
modal:true,
buttons: [
{
value: "Yes",
action : function(e) {
e.preventDefault();
nestedPanel.hide();
panel.hide();
removeItems();
},
section: Y.WidgetStdMod.FOOTER
},
{
value: "No",
action: function(e) {
e.preventDefault();
nestedPanel.hide();
},
section: Y.WidgetStdMod.FOOTER
}
]
}).render('#nestedPanel');
}
else {
nestedPanel.show();
}
}
});
</script>
</body>
</html>