advanced.html revision 5267cbf697da3664dc718c6856142af29ead26d3
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: sans-serif;
line-height:18px;
margin: 50px 0px 0px 100px;
font-size:12px;
}
h1 {
color: #222;
}
#desc {
margin-bottom:20px;
border-bottom:1px dotted #333;
}
#desc span {
background:#a3350d;
padding:2px;
color:#f27243;
}
.yui3-panel {
outline:none;
}
.yui3-widget-hd {
font-weight:bold;
}
.yui3-panel-content .yui3-widget-bd {
padding:15px;
}
label {
margin-right:30px;
}
fieldset {
border:none;
padding:0;
}
input[type="text"] {
border:none;
border:1px solid #ccc;
padding: 3px 7px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
font-size:100%;
width:200px;
}
</style>
</head>
<body class='yui3-skin-sam'>
<h1>Panel Example.</h1>
<div id="dt"></div>
<p><input type="button" id="addRow" value="Add"></p>
<div id="panelContent">
<div class="yui3-widget-bd">
<form>
<fieldset>
<p><label for="id">ID</label><br/>
<input type="text" name="id" id="productId" placeholder=""></p>
<p><label for="name">Name</label><br/>
<input type="text" name="name" id="name" value="" placeholder=""></p>
<p><label for="password">Price</label><br/>
<input type="text" name="price" id="price" value="" placeholder="$"></p>
</fieldset>
</form>
</div>
</div>
<div id="nestedPanel"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum pellentesque augue. Vivamus fermentum consectetur elementum. Phasellus egestas, elit eu pretium dictum, tortor lorem ullamcorper justo, iaculis sollicitudin elit leo id leo. Donec mattis urna et eros iaculis sit amet eleifend lectus faucibus. Aenean porta mattis sapien, in varius felis aliquam eget. Donec porta nunc a neque molestie hendrerit. Quisque ultricies accumsan nulla, id semper nisl mattis quis. In hac habitasse platea dictumst. Quisque eu leo tellus, eget dapibus nisl. Vestibulum consequat elementum neque eu viverra.
Praesent ligula odio, tempor vitae varius a, pharetra in massa. Cras a eros non dui egestas sollicitudin vitae non tortor. Ut sodales vestibulum eleifend. Donec porttitor, nisl vel porttitor sagittis, tortor tellus dignissim augue, in sodales felis libero at turpis. Nulla eget tellus justo. Sed id nisl eget nibh molestie dapibus. Suspendisse luctus urna mi, nec mattis augue. Ut et auctor leo. Duis non arcu diam. Aliquam non velit vel lectus vehicula commodo at id nisl. Pellentesque lacinia imperdiet ligula ac convallis. Nulla facilisi. Sed ante nulla, sodales eget auctor sed, consectetur ut lorem. Nunc varius mi id augue pellentesque interdum. Maecenas augue dolor, vehicula vel tempor a, vehicula nec risus. Nulla facilisi. Quisque tellus lacus, rutrum ut pellentesque eget, gravida sodales erat. Sed ac tellus velit, gravida lacinia neque.
Pellentesque fringilla vehicula lectus, ac sollicitudin velit hendrerit in. Nullam id odio ut quam interdum ultricies vel at risus. Morbi fringilla elementum massa, a aliquam nisi faucibus sed. Maecenas non mauris lectus, non pellentesque mauris. Donec at iaculis nibh. In dui lorem, ornare at feugiat lacinia, fermentum at leo. In condimentum volutpat varius. Cras pulvinar nisi a lacus semper vel adipiscing tortor aliquam. Nulla nec risus in lacus semper posuere id et risus. Mauris dictum ipsum diam, quis vulputate tortor. Fusce arcu dolor, varius nec bibendum in, lobortis id dolor. Nulla facilisi. Ut eu laoreet magna.
In vitae felis ligula. Ut eros velit, convallis posuere vehicula mattis, tristique sed eros. Fusce venenatis vehicula velit nec consequat. Phasellus sed arcu tellus, id feugiat nulla. Mauris metus lorem, bibendum vitae lacinia at, fringilla in eros. Vestibulum ultricies malesuada nulla eu tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean risus ligula, varius in viverra et, semper in ante. Aenean facilisis, tortor a eleifend aliquet, mauris magna eleifend lorem, quis pretium mi lorem a augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi turpis leo, placerat nec faucibus eget, sagittis at turpis. Nam non fermentum leo. Ut pretium, eros ac pharetra suscipit, nibh odio scelerisque urna, a accumsan sem elit eget dui. In pharetra orci sit amet risus venenatis id auctor diam rhoncus.
Nunc tristique purus sed elit varius lobortis. Nulla in erat ac purus porta ultricies. Nullam vitae ullamcorper dolor. Integer non est at arcu fermentum hendrerit. Pellentesque condimentum blandit elit, eu euismod dui scelerisque ac. Nullam dictum bibendum dignissim. Cras cursus euismod vulputate. Fusce placerat tellus ac quam pharetra congue. Vestibulum dapibus, mi vel faucibus sollicitudin, justo sem consequat libero, in tristique ipsum ligula quis metus. Quisque dignissim nulla at nisl blandit pretium. Fusce tempor, enim condimentum ultricies fermentum, neque eros dictum dolor, nec gravida mi ligula nec augue. Sed eu lacus non tortor porttitor gravida in vitae nisi. Praesent sit amet volutpat libero. Mauris accumsan, nulla vel rutrum vulputate, augue ipsum laoreet nulla, eu accumsan neque lorem eget justo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum pellentesque augue. Vivamus fermentum consectetur elementum. Phasellus egestas, elit eu pretium dictum, tortor lorem ullamcorper justo, iaculis sollicitudin elit leo id leo. Donec mattis urna et eros iaculis sit amet eleifend lectus faucibus. Aenean porta mattis sapien, in varius felis aliquam eget. Donec porta nunc a neque molestie hendrerit. Quisque ultricies accumsan nulla, id semper nisl mattis quis. In hac habitasse platea dictumst. Quisque eu leo tellus, eget dapibus nisl. Vestibulum consequat elementum neque eu viverra.
Praesent ligula odio, tempor vitae varius a, pharetra in massa. Cras a eros non dui egestas sollicitudin vitae non tortor. Ut sodales vestibulum eleifend. Donec porttitor, nisl vel porttitor sagittis, tortor tellus dignissim augue, in sodales felis libero at turpis. Nulla eget tellus justo. Sed id nisl eget nibh molestie dapibus. Suspendisse luctus urna mi, nec mattis augue. Ut et auctor leo. Duis non arcu diam. Aliquam non velit vel lectus vehicula commodo at id nisl. Pellentesque lacinia imperdiet ligula ac convallis. Nulla facilisi. Sed ante nulla, sodales eget auctor sed, consectetur ut lorem. Nunc varius mi id augue pellentesque interdum. Maecenas augue dolor, vehicula vel tempor a, vehicula nec risus. Nulla facilisi. Quisque tellus lacus, rutrum ut pellentesque eget, gravida sodales erat. Sed ac tellus velit, gravida lacinia neque.
Pellentesque fringilla vehicula lectus, ac sollicitudin velit hendrerit in. Nullam id odio ut quam interdum ultricies vel at risus. Morbi fringilla elementum massa, a aliquam nisi faucibus sed. Maecenas non mauris lectus, non pellentesque mauris. Donec at iaculis nibh. In dui lorem, ornare at feugiat lacinia, fermentum at leo. In condimentum volutpat varius. Cras pulvinar nisi a lacus semper vel adipiscing tortor aliquam. Nulla nec risus in lacus semper posuere id et risus. Mauris dictum ipsum diam, quis vulputate tortor. Fusce arcu dolor, varius nec bibendum in, lobortis id dolor. Nulla facilisi. Ut eu laoreet magna.
In vitae felis ligula. Ut eros velit, convallis posuere vehicula mattis, tristique sed eros. Fusce venenatis vehicula velit nec consequat. Phasellus sed arcu tellus, id feugiat nulla. Mauris metus lorem, bibendum vitae lacinia at, fringilla in eros. Vestibulum ultricies malesuada nulla eu tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean risus ligula, varius in viverra et, semper in ante. Aenean facilisis, tortor a eleifend aliquet, mauris magna eleifend lorem, quis pretium mi lorem a augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi turpis leo, placerat nec faucibus eget, sagittis at turpis. Nam non fermentum leo. Ut pretium, eros ac pharetra suscipit, nibh odio scelerisque urna, a accumsan sem elit eget dui. In pharetra orci sit amet risus venenatis id auctor diam rhoncus.
Nunc tristique purus sed elit varius lobortis. Nulla in erat ac purus porta ultricies. Nullam vitae ullamcorper dolor. Integer non est at arcu fermentum hendrerit. Pellentesque condimentum blandit elit, eu euismod dui scelerisque ac. Nullam dictum bibendum dignissim. Cras cursus euismod vulputate. Fusce placerat tellus ac quam pharetra congue. Vestibulum dapibus, mi vel faucibus sollicitudin, justo sem consequat libero, in tristique ipsum ligula quis metus. Quisque dignissim nulla at nisl blandit pretium. Fusce tempor, enim condimentum ultricies fermentum, neque eros dictum dolor, nec gravida mi ligula nec augue. Sed eu lacus non tortor porttitor gravida in vitae nisi. Praesent sit amet volutpat libero. Mauris accumsan, nulla vel rutrum vulputate, augue ipsum laoreet nulla, eu accumsan neque lorem eget justo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum pellentesque augue. Vivamus fermentum consectetur elementum. Phasellus egestas, elit eu pretium dictum, tortor lorem ullamcorper justo, iaculis sollicitudin elit leo id leo. Donec mattis urna et eros iaculis sit amet eleifend lectus faucibus. Aenean porta mattis sapien, in varius felis aliquam eget. Donec porta nunc a neque molestie hendrerit. Quisque ultricies accumsan nulla, id semper nisl mattis quis. In hac habitasse platea dictumst. Quisque eu leo tellus, eget dapibus nisl. Vestibulum consequat elementum neque eu viverra.
Praesent ligula odio, tempor vitae varius a, pharetra in massa. Cras a eros non dui egestas sollicitudin vitae non tortor. Ut sodales vestibulum eleifend. Donec porttitor, nisl vel porttitor sagittis, tortor tellus dignissim augue, in sodales felis libero at turpis. Nulla eget tellus justo. Sed id nisl eget nibh molestie dapibus. Suspendisse luctus urna mi, nec mattis augue. Ut et auctor leo. Duis non arcu diam. Aliquam non velit vel lectus vehicula commodo at id nisl. Pellentesque lacinia imperdiet ligula ac convallis. Nulla facilisi. Sed ante nulla, sodales eget auctor sed, consectetur ut lorem. Nunc varius mi id augue pellentesque interdum. Maecenas augue dolor, vehicula vel tempor a, vehicula nec risus. Nulla facilisi. Quisque tellus lacus, rutrum ut pellentesque eget, gravida sodales erat. Sed ac tellus velit, gravida lacinia neque.
Pellentesque fringilla vehicula lectus, ac sollicitudin velit hendrerit in. Nullam id odio ut quam interdum ultricies vel at risus. Morbi fringilla elementum massa, a aliquam nisi faucibus sed. Maecenas non mauris lectus, non pellentesque mauris. Donec at iaculis nibh. In dui lorem, ornare at feugiat lacinia, fermentum at leo. In condimentum volutpat varius. Cras pulvinar nisi a lacus semper vel adipiscing tortor aliquam. Nulla nec risus in lacus semper posuere id et risus. Mauris dictum ipsum diam, quis vulputate tortor. Fusce arcu dolor, varius nec bibendum in, lobortis id dolor. Nulla facilisi. Ut eu laoreet magna.
In vitae felis ligula. Ut eros velit, convallis posuere vehicula mattis, tristique sed eros. Fusce venenatis vehicula velit nec consequat. Phasellus sed arcu tellus, id feugiat nulla. Mauris metus lorem, bibendum vitae lacinia at, fringilla in eros. Vestibulum ultricies malesuada nulla eu tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean risus ligula, varius in viverra et, semper in ante. Aenean facilisis, tortor a eleifend aliquet, mauris magna eleifend lorem, quis pretium mi lorem a augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi turpis leo, placerat nec faucibus eget, sagittis at turpis. Nam non fermentum leo. Ut pretium, eros ac pharetra suscipit, nibh odio scelerisque urna, a accumsan sem elit eget dui. In pharetra orci sit amet risus venenatis id auctor diam rhoncus.
Nunc tristique purus sed elit varius lobortis. Nulla in erat ac purus porta ultricies. Nullam vitae ullamcorper dolor. Integer non est at arcu fermentum hendrerit. Pellentesque condimentum blandit elit, eu euismod dui scelerisque ac. Nullam dictum bibendum dignissim. Cras cursus euismod vulputate. Fusce placerat tellus ac quam pharetra congue. Vestibulum dapibus, mi vel faucibus sollicitudin, justo sem consequat libero, in tristique ipsum ligula quis metus. Quisque dignissim nulla at nisl blandit pretium. Fusce tempor, enim condimentum ultricies fermentum, neque eros dictum dolor, nec gravida mi ligula nec augue. Sed eu lacus non tortor porttitor gravida in vitae nisi. Praesent sit amet volutpat libero. Mauris accumsan, nulla vel rutrum vulputate, augue ipsum laoreet nulla, eu accumsan neque lorem eget justo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum pellentesque augue. Vivamus fermentum consectetur elementum. Phasellus egestas, elit eu pretium dictum, tortor lorem ullamcorper justo, iaculis sollicitudin elit leo id leo. Donec mattis urna et eros iaculis sit amet eleifend lectus faucibus. Aenean porta mattis sapien, in varius felis aliquam eget. Donec porta nunc a neque molestie hendrerit. Quisque ultricies accumsan nulla, id semper nisl mattis quis. In hac habitasse platea dictumst. Quisque eu leo tellus, eget dapibus nisl. Vestibulum consequat elementum neque eu viverra.
Praesent ligula odio, tempor vitae varius a, pharetra in massa. Cras a eros non dui egestas sollicitudin vitae non tortor. Ut sodales vestibulum eleifend. Donec porttitor, nisl vel porttitor sagittis, tortor tellus dignissim augue, in sodales felis libero at turpis. Nulla eget tellus justo. Sed id nisl eget nibh molestie dapibus. Suspendisse luctus urna mi, nec mattis augue. Ut et auctor leo. Duis non arcu diam. Aliquam non velit vel lectus vehicula commodo at id nisl. Pellentesque lacinia imperdiet ligula ac convallis. Nulla facilisi. Sed ante nulla, sodales eget auctor sed, consectetur ut lorem. Nunc varius mi id augue pellentesque interdum. Maecenas augue dolor, vehicula vel tempor a, vehicula nec risus. Nulla facilisi. Quisque tellus lacus, rutrum ut pellentesque eget, gravida sodales erat. Sed ac tellus velit, gravida lacinia neque.
Pellentesque fringilla vehicula lectus, ac sollicitudin velit hendrerit in. Nullam id odio ut quam interdum ultricies vel at risus. Morbi fringilla elementum massa, a aliquam nisi faucibus sed. Maecenas non mauris lectus, non pellentesque mauris. Donec at iaculis nibh. In dui lorem, ornare at feugiat lacinia, fermentum at leo. In condimentum volutpat varius. Cras pulvinar nisi a lacus semper vel adipiscing tortor aliquam. Nulla nec risus in lacus semper posuere id et risus. Mauris dictum ipsum diam, quis vulputate tortor. Fusce arcu dolor, varius nec bibendum in, lobortis id dolor. Nulla facilisi. Ut eu laoreet magna.
In vitae felis ligula. Ut eros velit, convallis posuere vehicula mattis, tristique sed eros. Fusce venenatis vehicula velit nec consequat. Phasellus sed arcu tellus, id feugiat nulla. Mauris metus lorem, bibendum vitae lacinia at, fringilla in eros. Vestibulum ultricies malesuada nulla eu tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean risus ligula, varius in viverra et, semper in ante. Aenean facilisis, tortor a eleifend aliquet, mauris magna eleifend lorem, quis pretium mi lorem a augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi turpis leo, placerat nec faucibus eget, sagittis at turpis. Nam non fermentum leo. Ut pretium, eros ac pharetra suscipit, nibh odio scelerisque urna, a accumsan sem elit eget dui. In pharetra orci sit amet risus venenatis id auctor diam rhoncus.
Nunc tristique purus sed elit varius lobortis. Nulla in erat ac purus porta ultricies. Nullam vitae ullamcorper dolor. Integer non est at arcu fermentum hendrerit. Pellentesque condimentum blandit elit, eu euismod dui scelerisque ac. Nullam dictum bibendum dignissim. Cras cursus euismod vulputate. Fusce placerat tellus ac quam pharetra congue. Vestibulum dapibus, mi vel faucibus sollicitudin, justo sem consequat libero, in tristique ipsum ligula quis metus. Quisque dignissim nulla at nisl blandit pretium. Fusce tempor, enim condimentum ultricies fermentum, neque eros dictum dolor, nec gravida mi ligula nec augue. Sed eu lacus non tortor porttitor gravida in vitae nisi. Praesent sit amet volutpat libero. Mauris accumsan, nulla vel rutrum vulputate, augue ipsum laoreet nulla, eu accumsan neque lorem eget justo.
</p>
<script>
YUI({filter:"raw"}).use("datatable-base", "panel", "dd-plugin", function(Y) {
//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
{
value: "Add Item",
action: function(e) {
addItem();
},
section: Y.WidgetStdMod.FOOTER
}
);
{
value: "Remove All Items",
action: function(e) {
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');
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) {
panel.hide();
removeItems();
},
section: Y.WidgetStdMod.FOOTER
},
{
value: "No",
action: function(e) {
},
section: Y.WidgetStdMod.FOOTER
}
]
}).render('#nestedPanel');
}
else {
}
}
});
</script>
</body>
</html>