upgraded to yui 0.12.0
upgraded to yui-ext 0.33 rc2
This commit is contained in:
JT Smith
parent
62b3d90db7
commit
cfd09a5cb6
1271 changed files with 539033 additions and 0 deletions
3
www/extras/yui-ext/examples/README.txt
Normal file
3
www/extras/yui-ext/examples/README.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
The examples can be browsed by opening index.html in the docs folder.
|
||||
|
||||
Some examples use XHR. Those examples will need to be on a webserver to run since XHR can't access the local file system.
|
||||
85
www/extras/yui-ext/examples/dialog/blog.html
Normal file
85
www/extras/yui-ext/examples/dialog/blog.html
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Comment Dialog Example</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/resizable.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/basic-dialog.css" />
|
||||
|
||||
|
||||
<script type="text/javascript" src="post.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="post.css" />
|
||||
|
||||
</head>
|
||||
<body class="ytheme-gray">
|
||||
<div class="post">
|
||||
<h2>Comment Dialog Example</h2>
|
||||
<div id="comment-box">
|
||||
<ul>
|
||||
<li><a id="post-comment" href="#">Post Comment</a></li>
|
||||
<li><a id="view-comments" href="#">View Comments</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>This is a more complex example that shows how to implement a comment dialog similar to the one on <a href="http://www.jackslocum.com/yui/" target="_blank">my blog<a/>.
|
||||
The dialog retrieves the comments in JSON format and renders them to the "View Comments" tab. The "Post Comment" tab posts the comment
|
||||
to a file on the server that just returns a dummy response (not what you type in) in JSON format. The reason for the dummy response
|
||||
is so the example can easily be dropped in whatever your environment is and work.</p>
|
||||
<p>Note that the js is not minified so it is readable. See <a href="post.js">post.js</a> for the full source code.</p>
|
||||
<div style="background:#F8F8F8;padding:10px;margin:10px;margin-left:0px;border:1px solid #e8e8e8;border-left:4px solid #e8e8e8;">This example was sponsored by Dharmesh Shah of <a href="http://onstartups.com/">http://onstartups.com/</a>. Thanks Dharmesh!</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
|
||||
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
|
||||
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
|
||||
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
|
||||
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
|
||||
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
|
||||
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
|
||||
</div>
|
||||
|
||||
<!-- comments dialog -->
|
||||
<div id="comments-dlg" style="visibility:hidden;">
|
||||
<div class="ydlg-hd">Comments</div>
|
||||
<div class="ydlg-bd">
|
||||
<div id="post-tab" class="ydlg-tab" title="Post Comment">
|
||||
<div class="inner-tab">
|
||||
<form action="" method="post" id="comment-form" onsubmit="return false;">
|
||||
<input id="postId" type="hidden" name="postId" value="1" />
|
||||
<p>
|
||||
<label for="author"><small>Name</small></label>
|
||||
<input class="textinput" type="text" name="author" id="author" value="" size="22" tabindex="1" />
|
||||
</p>
|
||||
|
||||
<p><label for="email"><small>E-mail (will not be published)</small></label>
|
||||
<input class="textinput" type="text" name="email" id="email" value="" size="22" tabindex="2" />
|
||||
</p>
|
||||
|
||||
<p><label for="url"><small>Website</small></label>
|
||||
<input class="textinput" type="text" name="url" id="url" value="" size="22" tabindex="3" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="comment"><small>Comment</small></label>
|
||||
<textarea name="comment" id="comment" tabindex="4" cols="40" rows="10"></textarea>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="view-tab" class="ydlg-tab" title="View Comments">
|
||||
<ul id="comments-list" class="inner-tab">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ydlg-ft">
|
||||
<div id="dlg-msg">
|
||||
<span id="post-error" class="posting-msg"><img src="images/warning.gif" width="16" height="16" align="absmiddle" /> <span id="post-error-msg"></span></span>
|
||||
<span id="post-wait" class="posting-msg"><img src="../../images/grid/loading.gif" width="16" height="16" align="absmiddle" /> Posting Comment...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
44
www/extras/yui-ext/examples/dialog/comments.txt
Normal file
44
www/extras/yui-ext/examples/dialog/comments.txt
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
{"comments": [{
|
||||
id: "1",
|
||||
author: "Jack Slocum",
|
||||
link: "http://www.jackslocum.com/",
|
||||
date: "October 29th, 2006 9:21pm",
|
||||
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
|
||||
},{
|
||||
id: "2",
|
||||
author: "Jack Slocum",
|
||||
link: "http://www.jackslocum.com/",
|
||||
date: "October 29th, 2006 9:21pm",
|
||||
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
|
||||
},{
|
||||
id: "3",
|
||||
author: "Jack Slocum",
|
||||
link: "http://www.jackslocum.com/",
|
||||
date: "October 29th, 2006 9:21pm",
|
||||
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
|
||||
},{
|
||||
id: "4",
|
||||
author: "Jack Slocum",
|
||||
link: "http://www.jackslocum.com/",
|
||||
date: "October 29th, 2006 9:21pm",
|
||||
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
|
||||
},{
|
||||
id: "5",
|
||||
author: "Jack Slocum",
|
||||
link: "http://www.jackslocum.com/",
|
||||
date: "October 29th, 2006 9:21pm",
|
||||
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
|
||||
},{
|
||||
id: "6",
|
||||
author: "Jack Slocum",
|
||||
link: "http://www.jackslocum.com/",
|
||||
date: "October 29th, 2006 9:21pm",
|
||||
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
|
||||
},{
|
||||
id: "7",
|
||||
author: "Jack Slocum",
|
||||
link: "http://www.jackslocum.com/",
|
||||
date: "October 29th, 2006 9:21pm",
|
||||
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
|
||||
}
|
||||
]}
|
||||
68
www/extras/yui-ext/examples/dialog/hello.html
Normal file
68
www/extras/yui-ext/examples/dialog/hello.html
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Hello World Dialog Example</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/resizable.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/basic-dialog.css" />
|
||||
|
||||
<script language="javascript" src="hello.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="example-info">
|
||||
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".
|
||||
</div>
|
||||
<h1>Hello World Dialog</h1>
|
||||
<p>This example shows how to create a very simple modal BasicDialog with "autoTabs".</p>
|
||||
<input type="button" id="show-dialog-btn" value="Hello World" /><br /><br />
|
||||
<div style="background:#F8F8F8;padding:10px;margin:10px;margin-left:0px;border:1px solid #e8e8e8;border-left:4px solid #e8e8e8;">This example and the gray theme were sponsored by Dharmesh Shah of <a href="http://onstartups.com/">http://onstartups.com/</a>. Thanks Dharmesh!</div>
|
||||
<p>Note that the js is not minified so it is readable. See <a href="hello.js">hellos.js</a> for the full source code.</p>
|
||||
Here's snapshot of the code that creates the dialog:
|
||||
<pre class="code"><code>dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
|
||||
modal:true,
|
||||
autoTabs:true,
|
||||
width:500,
|
||||
height:300,
|
||||
shadow:true,
|
||||
minWidth:300,
|
||||
minHeight:300
|
||||
});
|
||||
dialog.addKeyListener(27, dialog.hide, dialog);
|
||||
dialog.addButton('Close', dialog.hide, dialog);
|
||||
dialog.addButton('Submit', dialog.hide, dialog).disable();
|
||||
</code></pre>
|
||||
|
||||
<!-- The dialog is created from existing markup.
|
||||
The inline styles just hide it until it created and should be in a stylesheet -->
|
||||
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
|
||||
<div class="ydlg-hd">Hello Dialog</div>
|
||||
<div class="ydlg-bd">
|
||||
<!-- Auto create tab 1 -->
|
||||
<div class="ydlg-tab" title="Hello World 1">
|
||||
<!-- Nested "inner-tab" to safely add padding -->
|
||||
<div class="inner-tab">
|
||||
Hello...<br><br><br>
|
||||
<input type="button" id="theme-btn" value="Toggle Theme" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Auto create tab 2 -->
|
||||
<div class="ydlg-tab" title="Hello World 2">
|
||||
<div class="inner-tab">
|
||||
... World!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
www/extras/yui-ext/examples/dialog/hello.js
vendored
Normal file
45
www/extras/yui-ext/examples/dialog/hello.js
vendored
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
// create the HelloWorld application (single instance)
|
||||
var HelloWorld = function(){
|
||||
// everything in this space is private and only accessible in the HelloWorld block
|
||||
|
||||
// define some private variables
|
||||
var dialog, showBtn;
|
||||
|
||||
var toggleTheme = function(){
|
||||
getEl(document.body, true).toggleClass('ytheme-gray');
|
||||
};
|
||||
// return a public interface
|
||||
return {
|
||||
init : function(){
|
||||
showBtn = getEl('show-dialog-btn');
|
||||
// attach to click event
|
||||
showBtn.on('click', this.showDialog, this, true);
|
||||
|
||||
getEl('theme-btn').on('click', toggleTheme);
|
||||
},
|
||||
|
||||
showDialog : function(){
|
||||
if(!dialog){ // lazy initialize the dialog and only create it once
|
||||
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
|
||||
//modal:true,
|
||||
autoTabs:true,
|
||||
width:500,
|
||||
height:300,
|
||||
shadow:true,
|
||||
minWidth:300,
|
||||
minHeight:250,
|
||||
proxyDrag: true
|
||||
});
|
||||
dialog.addKeyListener(27, dialog.hide, dialog);
|
||||
dialog.addButton('Close', dialog.hide, dialog);
|
||||
dialog.addButton('Submit', dialog.hide, dialog).disable();
|
||||
}
|
||||
dialog.show(showBtn.dom);
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// using onDocumentReady instead of window.onload initializes the application
|
||||
// when the DOM is ready, without waiting for images and other resources to load
|
||||
YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);
|
||||
BIN
www/extras/yui-ext/examples/dialog/images/comment-bg.gif
Normal file
BIN
www/extras/yui-ext/examples/dialog/images/comment-bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 838 B |
BIN
www/extras/yui-ext/examples/dialog/images/comment.gif
Normal file
BIN
www/extras/yui-ext/examples/dialog/images/comment.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 595 B |
BIN
www/extras/yui-ext/examples/dialog/images/warning.gif
Normal file
BIN
www/extras/yui-ext/examples/dialog/images/warning.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 960 B |
43
www/extras/yui-ext/examples/dialog/layout.html
Normal file
43
www/extras/yui-ext/examples/dialog/layout.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Layout Dialog Example</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/resizable.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/basic-dialog.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/layout.css" />
|
||||
|
||||
<script language="javascript" src="layout.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="example-info">
|
||||
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".
|
||||
</div>
|
||||
<h1>Layout Dialog Example</h1>
|
||||
<p>This example shows how to create a modal dialog with an embedded BorderLayout using LayoutDialog.</p>
|
||||
<input type="button" id="show-dialog-btn" value="Show Dialog" /><br /><br />
|
||||
<p>Note that the js is not minified so it is readable. See <a href="layout.js">layout.js</a> for the full source code.</p>
|
||||
|
||||
<!-- dialog is created from existing markup -->
|
||||
<div id="hello-dlg" style="visibility:hidden;">
|
||||
<div class="ydlg-hd">Layout Dialog</div>
|
||||
<div class="ydlg-bd">
|
||||
<div id="west" class="ylayout-inactive-content">
|
||||
West
|
||||
</div>
|
||||
<div id="center" class="ylayout-inactive-content">
|
||||
<br /><input type="button" id="theme-btn" value="Toggle Theme" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
www/extras/yui-ext/examples/dialog/layout.js
vendored
Normal file
64
www/extras/yui-ext/examples/dialog/layout.js
vendored
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
|
||||
// create the LayoutExample application (single instance)
|
||||
var LayoutExample = function(){
|
||||
// everything in this space is private and only accessible in the HelloWorld block
|
||||
|
||||
// define some private variables
|
||||
var dialog, showBtn;
|
||||
|
||||
var toggleTheme = function(){
|
||||
getEl(document.body, true).toggleClass('ytheme-gray');
|
||||
};
|
||||
// return a public interface
|
||||
return {
|
||||
init : function(){
|
||||
showBtn = getEl('show-dialog-btn');
|
||||
// attach to click event
|
||||
showBtn.on('click', this.showDialog, this, true);
|
||||
|
||||
getEl('theme-btn').on('click', toggleTheme);
|
||||
},
|
||||
|
||||
showDialog : function(){
|
||||
if(!dialog){ // lazy initialize the dialog and only create it once
|
||||
dialog = new YAHOO.ext.LayoutDialog("hello-dlg", {
|
||||
modal:true,
|
||||
width:600,
|
||||
height:400,
|
||||
shadow:true,
|
||||
minWidth:300,
|
||||
minHeight:300,
|
||||
west: {
|
||||
split:true,
|
||||
initialSize: 150,
|
||||
minSize: 100,
|
||||
maxSize: 250,
|
||||
titlebar: true,
|
||||
collapsible: true,
|
||||
animate: true
|
||||
},
|
||||
center: {
|
||||
autoScroll:true,
|
||||
tabPosition: 'top',
|
||||
closeOnTab: true,
|
||||
alwaysShowTabs: true
|
||||
}
|
||||
});
|
||||
dialog.addKeyListener(27, dialog.hide, dialog);
|
||||
dialog.addButton('Close', dialog.hide, dialog);
|
||||
dialog.addButton('Submit', dialog.hide, dialog);
|
||||
|
||||
var layout = dialog.getLayout();
|
||||
dialog.beginUpdate();
|
||||
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
|
||||
layout.add('center', new YAHOO.ext.ContentPanel('center', {title: 'Inner Tab'}));
|
||||
dialog.endUpdate();
|
||||
}
|
||||
dialog.show(showBtn.dom);
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// using onDocumentReady instead of window.onload initializes the application
|
||||
// when the DOM is ready, without waiting for images and other resources to load
|
||||
YAHOO.ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);
|
||||
124
www/extras/yui-ext/examples/dialog/post.css
Normal file
124
www/extras/yui-ext/examples/dialog/post.css
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
body{
|
||||
font: normal 9pt verdana,tahoma,arial,helvetica;
|
||||
}
|
||||
.post{
|
||||
padding:15px;
|
||||
}
|
||||
.post h2{
|
||||
font:normal 22px times;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.post p{
|
||||
margin-bottom:10px;
|
||||
line-height:18px;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
font-size:8pt;
|
||||
background-image: url('../../images/grid/loading.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
padding-left:20px;
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
/** Posting messages */
|
||||
.ydlg-ft{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#dlg-msg {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
width:40%;
|
||||
}
|
||||
.posting-msg{
|
||||
display:none;
|
||||
font:normal 8pt tahoma, arial;
|
||||
color:black;
|
||||
}
|
||||
#post-error-msg{
|
||||
color:red;
|
||||
}
|
||||
.active-msg{
|
||||
display:block;
|
||||
}
|
||||
|
||||
/** Comment Box (with links) */
|
||||
#comment-box{
|
||||
float:right;
|
||||
clear:none;
|
||||
border:2px solid #aca899;
|
||||
background-color:#f3f2e7;
|
||||
padding:10px;
|
||||
margin:15px;
|
||||
}
|
||||
#comment-box li{
|
||||
margin:4px;
|
||||
}
|
||||
#comment-box a{
|
||||
text-decoration:none;
|
||||
}
|
||||
#comments-list{
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
/** Comment Post Form */
|
||||
#post-tab .inner-tab{
|
||||
margin:10px;
|
||||
margin-top:5px;
|
||||
}
|
||||
#comment-form label {
|
||||
margin:4px;
|
||||
margin-left:0px;
|
||||
display:block;
|
||||
color:#333333;
|
||||
font:normal 10px arial,helvetica;
|
||||
line-height:14px;
|
||||
}
|
||||
#comment-form .textinput{
|
||||
border:1px solid #6593cf;
|
||||
width:98%;
|
||||
padding:1px;
|
||||
margin-bottom:2px;
|
||||
font:normal 11px tahoma, arial;
|
||||
}
|
||||
#comment {
|
||||
width:480px;
|
||||
height:205px;
|
||||
font:normal 11px tahoma, arial;
|
||||
}
|
||||
|
||||
/** Comment List */
|
||||
.commentmetadata {
|
||||
margin: 0;
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
font-weight:normal;
|
||||
color:gray;
|
||||
margin-bottom:10px;
|
||||
float:right;
|
||||
clear:none;
|
||||
}
|
||||
.cuser{
|
||||
float:left;
|
||||
clear:none;
|
||||
font:bold 12px tahoma, arial;
|
||||
padding-left:21px;
|
||||
background: url(images/comment.gif) no-repeat;
|
||||
}
|
||||
.cuser a{
|
||||
font:bold 12px tahoma, arial;
|
||||
}
|
||||
.cheader{
|
||||
height:20px;
|
||||
}
|
||||
#comments-list li {
|
||||
display:block;
|
||||
background: url(images/comment-bg.gif) repeat-x;
|
||||
background-position:0px -5px;
|
||||
padding:15px;
|
||||
padding-bottom:18px;
|
||||
font-size:12px;
|
||||
}
|
||||
152
www/extras/yui-ext/examples/dialog/post.js
vendored
Normal file
152
www/extras/yui-ext/examples/dialog/post.js
vendored
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
var Comments = function(){
|
||||
var dialog, postLink, viewLink, txtComment;
|
||||
var tabs, commentsList, postBtn, renderer;
|
||||
var wait, error, errorMsg;
|
||||
var posting = false;
|
||||
|
||||
return {
|
||||
init : function(){
|
||||
// cache some elements for quick access
|
||||
txtComment = getEl('comment');
|
||||
commentsList = getEl('comments-list');
|
||||
postLink = getEl('post-comment');
|
||||
viewLink = getEl('view-comments');
|
||||
wait = getEl('post-wait');
|
||||
error = getEl('post-error');
|
||||
errorMsg = getEl('post-error-msg');
|
||||
|
||||
this.createDialog();
|
||||
|
||||
postLink.addHandler('click', true, function(){
|
||||
tabs.activate('post-tab');
|
||||
dialog.show(postLink);
|
||||
});
|
||||
|
||||
viewLink.addHandler('click', true, function(){
|
||||
tabs.activate('view-tab');
|
||||
dialog.show(viewLink);
|
||||
});
|
||||
},
|
||||
|
||||
// submit the comment to the server
|
||||
submitComment : function(){
|
||||
postBtn.disable();
|
||||
wait.radioClass('active-msg');
|
||||
YAHOO.util.Connect.setForm(document.getElementById('comment-form'));
|
||||
|
||||
var commentSuccess = function(o){
|
||||
postBtn.enable();
|
||||
var data = renderer.parse(o.responseText);
|
||||
// if we got a comment back
|
||||
if(data){
|
||||
wait.removeClass('active-msg');
|
||||
renderer.append(data.comments[0]);
|
||||
dialog.hide();
|
||||
}else{
|
||||
error.radioClass('active-msg');
|
||||
errorMsg.update(o.responseText);
|
||||
}
|
||||
};
|
||||
|
||||
var commentFailure = function(o){
|
||||
postBtn.enable();
|
||||
error.radioClass('active-msg');
|
||||
errorMsg.update('Unable to connect.');
|
||||
};
|
||||
|
||||
YAHOO.util.Connect.asyncRequest('POST', 'post.php',
|
||||
{success: commentSuccess, failure: commentFailure});
|
||||
},
|
||||
|
||||
createDialog : function(){
|
||||
dialog = new YAHOO.ext.BasicDialog("comments-dlg", {
|
||||
autoTabs:true,
|
||||
width:500,
|
||||
height:300,
|
||||
shadow:true,
|
||||
minWidth:300,
|
||||
minHeight:300
|
||||
});
|
||||
dialog.addKeyListener(27, dialog.hide, dialog);
|
||||
dialog.addButton('Close', dialog.hide, dialog);
|
||||
postBtn = dialog.addButton('Post', this.submitComment, this);
|
||||
|
||||
// clear any messages and indicators when the dialog is closed
|
||||
dialog.on('hide', function(){
|
||||
wait.removeClass('active-msg');
|
||||
error.removeClass('active-msg');
|
||||
txtComment.dom.value = '';
|
||||
});
|
||||
|
||||
// stoe a refeence to the tabs
|
||||
tabs = dialog.getTabs();
|
||||
|
||||
// auto fit the comment box to the dialog size
|
||||
var sizeTextBox = function(){
|
||||
txtComment.setSize(dialog.size.width-44, dialog.size.height-264);
|
||||
};
|
||||
sizeTextBox();
|
||||
dialog.on('resize', sizeTextBox);
|
||||
|
||||
// hide the post button if not on Post tab
|
||||
tabs.on('tabchange', function(panel, tab){
|
||||
postBtn.setVisible(tab.id == 'post-tab');
|
||||
});
|
||||
|
||||
// set up the comment renderer, all ajax requests for commentsList
|
||||
// go through this render
|
||||
renderer = new CommentRenderer(commentsList);
|
||||
var um = commentsList.getUpdateManager();
|
||||
um.setRenderer(renderer);
|
||||
|
||||
// lazy load the comments when the view tab is activated
|
||||
var commentsLoaded = false;
|
||||
tabs.getTab('view-tab').on('activate', function(){
|
||||
if(!commentsLoaded){
|
||||
um.update('comments.txt');
|
||||
commentsLoaded = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// This class handles rendering JSON into comments
|
||||
var CommentRenderer = function(list){
|
||||
// create a template for each JSON object
|
||||
var tpl = new YAHOO.ext.DomHelper.Template(
|
||||
'<li id="comment-{id}">' +
|
||||
'<div class="cheader">' +
|
||||
'<div class="cuser">{author}:</div>' +
|
||||
'<div class="commentmetadata">{date}</div>' +
|
||||
'</div>{text}</li>'
|
||||
);
|
||||
|
||||
this.parse = function(json){
|
||||
try{
|
||||
return eval('(' + json + ')');
|
||||
}catch(e){}
|
||||
return null;
|
||||
};
|
||||
|
||||
// public render function for use with UpdateManager
|
||||
this.render = function(el, response){
|
||||
var data = this.parse(response.responseText);
|
||||
if(!data || !data.comments || data.comments.length < 1){
|
||||
el.update('There are no comments for this post.');
|
||||
return;
|
||||
}
|
||||
// clear loading
|
||||
el.update('');
|
||||
for(var i = 0, len = data.comments.length; i < len; i++){
|
||||
this.append(data.comments[i]);
|
||||
}
|
||||
};
|
||||
|
||||
// appends a comment
|
||||
this.append = function(data){
|
||||
tpl.append(list.dom, data);
|
||||
};
|
||||
};
|
||||
|
||||
YAHOO.ext.EventManager.onDocumentReady(Comments.init, Comments, true);
|
||||
10
www/extras/yui-ext/examples/dialog/post.php
Normal file
10
www/extras/yui-ext/examples/dialog/post.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?
|
||||
//This file does nothing. All it does is kick out a bogus new comment in JSON format.
|
||||
?>{"comments": [{
|
||||
id: "10",
|
||||
author: "Jack Slocum",
|
||||
link: "http://www.jackslocum.com/",
|
||||
date: "October 29th, 2006 9:21pm",
|
||||
text: "New posted comment. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
|
||||
}
|
||||
]}
|
||||
33
www/extras/yui-ext/examples/examples.css
Normal file
33
www/extras/yui-ext/examples/examples.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
body {
|
||||
font-family:verdana,tahoma,helvetica;
|
||||
padding:20px;
|
||||
font-size:13px;
|
||||
background-color:#fff !important;
|
||||
}
|
||||
p {
|
||||
margin-bottom:15px;
|
||||
}
|
||||
h1 {
|
||||
font-size:large;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
.example-info{
|
||||
float:right;
|
||||
width:150px;
|
||||
border:1px solid #c3daf9;
|
||||
border-top:1px solid #DCEAFB;
|
||||
border-left:1px solid #DCEAFB;
|
||||
background:#ecf5fe url('info-bg.gif') repeat-x;
|
||||
font-size:10px;
|
||||
padding:8px;
|
||||
}
|
||||
pre.code{
|
||||
background: #F8F8F8;
|
||||
border: 1px solid #e8e8e8;
|
||||
padding:10px;
|
||||
margin:10px;
|
||||
margin-left:0px;
|
||||
border-left:5px solid #e8e8e8;
|
||||
font-size: 12px !important;
|
||||
line-height:14px !important;
|
||||
}
|
||||
194
www/extras/yui-ext/examples/grid/PropsGrid.js
vendored
Normal file
194
www/extras/yui-ext/examples/grid/PropsGrid.js
vendored
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
YAHOO.ext.grid.PropsDataModel = function(propertyNames, source){
|
||||
YAHOO.ext.grid.PropsDataModel.superclass.constructor.call(this, []);
|
||||
if(source){
|
||||
this.setSource(source);
|
||||
}
|
||||
this.names = propertyNames || {};
|
||||
};
|
||||
YAHOO.extendX(YAHOO.ext.grid.PropsDataModel, YAHOO.ext.grid.DefaultDataModel, {
|
||||
setSource : function(o){
|
||||
this.source = o;
|
||||
var data = [];
|
||||
for(var key in o){
|
||||
if(this.isEditableValue(o[key])){
|
||||
var vals = [key, o[key]];
|
||||
vals.key = key;
|
||||
data.push(vals);
|
||||
}
|
||||
}
|
||||
this.removeAll();
|
||||
this.addRows(data);
|
||||
},
|
||||
|
||||
getRowId: function(rowIndex){
|
||||
return this.data[rowIndex].key;
|
||||
},
|
||||
|
||||
getPropertyName: function(rowIndex){
|
||||
return this.data[rowIndex].key;
|
||||
},
|
||||
|
||||
isEditableValue: function(val){
|
||||
if(val && val instanceof Date){
|
||||
return true;
|
||||
}else if(typeof val == 'object' || typeof val == 'function'){
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
setValueAt : function(value, rowIndex, colIndex){
|
||||
var origVal = this.getValueAt(rowIndex, colIndex);
|
||||
if(typeof origVal == 'boolean'){
|
||||
value = (value == 'true' || value == '1');
|
||||
}
|
||||
YAHOO.ext.grid.PropsDataModel.superclass.setValueAt.call(this, value, rowIndex, colIndex);
|
||||
var key = this.data[rowIndex].key;
|
||||
if(key){
|
||||
this.source[key] = value;
|
||||
}
|
||||
},
|
||||
|
||||
getName : function(propName){
|
||||
if(typeof this.names[propName] != 'undefined'){
|
||||
return this.names[propName];
|
||||
}
|
||||
return propName;
|
||||
},
|
||||
|
||||
getSource : function(){
|
||||
return this.source;
|
||||
}
|
||||
});
|
||||
YAHOO.ext.grid.PropsColumnModel = function(dataModel, customEditors){
|
||||
YAHOO.ext.grid.PropsColumnModel.superclass.constructor.call(this, [
|
||||
{header: 'Name', sortable: true},
|
||||
{header: 'Value'}
|
||||
]);
|
||||
this.dataModel = dataModel;
|
||||
this.bselect = YAHOO.ext.DomHelper.append(document.body, {
|
||||
tag: 'select', cls: 'ygrid-editor', children: [
|
||||
{tag: 'option', value: 'true', html: 'true'},
|
||||
{tag: 'option', value: 'false', html: 'false'}
|
||||
]
|
||||
});
|
||||
YAHOO.util.Dom.generateId(this.bselect);
|
||||
this.editors = {
|
||||
'date' : new YAHOO.ext.grid.DateEditor(),
|
||||
'string' : new YAHOO.ext.grid.TextEditor(),
|
||||
'number' : new YAHOO.ext.grid.NumberEditor(),
|
||||
'boolean' : new YAHOO.ext.grid.SelectEditor(this.bselect)
|
||||
};
|
||||
this.customEditors = customEditors || {};
|
||||
this.renderCellDelegate = this.renderCell.createDelegate(this);
|
||||
};
|
||||
|
||||
YAHOO.extendX(YAHOO.ext.grid.PropsColumnModel, YAHOO.ext.grid.DefaultColumnModel, {
|
||||
isCellEditable : function(colIndex, rowIndex){
|
||||
return colIndex == 1;
|
||||
},
|
||||
|
||||
getRenderer : function(col){
|
||||
if(col == 1){
|
||||
return this.renderCellDelegate;
|
||||
}
|
||||
return YAHOO.ext.grid.DefaultColumnModel.defaultRenderer;
|
||||
},
|
||||
|
||||
renderCell : function(val, rowIndex, colIndex){
|
||||
if(val instanceof Date){
|
||||
return this.renderDate(val);
|
||||
}else if(typeof val == 'boolean'){
|
||||
return this.renderBool(val);
|
||||
}else{
|
||||
return val;
|
||||
}
|
||||
},
|
||||
|
||||
getCellEditor : function(colIndex, rowIndex){
|
||||
var propName = this.dataModel.getPropertyName(rowIndex);
|
||||
if(this.customEditors[propName]){
|
||||
return this.customEditors[propName];
|
||||
}
|
||||
var val = this.dataModel.getValueAt(rowIndex, colIndex);
|
||||
if(val instanceof Date){
|
||||
return this.editors['date'];
|
||||
}else if(typeof val == 'number'){
|
||||
return this.editors['number'];
|
||||
}else if(typeof val == 'boolean'){
|
||||
return this.editors['boolean'];
|
||||
}else{
|
||||
return this.editors['string'];
|
||||
}
|
||||
},
|
||||
|
||||
getCellEditor : function(colIndex, rowIndex){
|
||||
var val = this.dataModel.getValueAt(rowIndex, colIndex);
|
||||
if(val instanceof Date){
|
||||
return this.editors['date'];
|
||||
}else if(typeof val == 'number'){
|
||||
return this.editors['number'];
|
||||
}else if(typeof val == 'boolean'){
|
||||
return this.editors['boolean'];
|
||||
}else{
|
||||
return this.editors['string'];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
YAHOO.ext.grid.PropsColumnModel.prototype.renderDate = function(dateVal){
|
||||
return dateVal.dateFormat('m/j/Y');
|
||||
};
|
||||
|
||||
YAHOO.ext.grid.PropsColumnModel.prototype.renderBool = function(bVal){
|
||||
return bVal ? 'true' : 'false';
|
||||
};
|
||||
|
||||
YAHOO.ext.grid.PropsGrid = function(container, propNames){
|
||||
var dm = new YAHOO.ext.grid.PropsDataModel(propNames);
|
||||
var cm =new YAHOO.ext.grid.PropsColumnModel(dm);
|
||||
dm.sort(cm, 0, 'ASC');
|
||||
YAHOO.ext.grid.PropsGrid.superclass.constructor.call(this, container, dm, cm);
|
||||
this.container.addClass('yprops-grid');
|
||||
this.lastEditRow = null;
|
||||
this.on('cellclick', this.onCellClick, this, true);
|
||||
this.on('beforeedit', this.beforeEdit, this, true);
|
||||
this.on('columnresize', this.onColumnResize, this, true);
|
||||
};
|
||||
YAHOO.extendX(YAHOO.ext.grid.PropsGrid, YAHOO.ext.grid.EditorGrid, {
|
||||
onCellClick : function(grid, rowIndex, colIndex, e){
|
||||
if(colIndex == 0){
|
||||
this.startEditing(rowIndex, 1);
|
||||
}
|
||||
},
|
||||
|
||||
render : function(){
|
||||
YAHOO.ext.grid.PropsGrid.superclass.render.call(this);
|
||||
this.getView().fitColumnsToContainer();
|
||||
},
|
||||
|
||||
autoSize : function(){
|
||||
YAHOO.ext.grid.PropsGrid.superclass.autoSize.call(this);
|
||||
this.getView().fitColumnsToContainer();
|
||||
},
|
||||
|
||||
onColumnResize : function(){
|
||||
this.colModel.setColumnWidth(1, this.getView().wrap.clientWidth - this.colModel.getColumnWidth(0));
|
||||
},
|
||||
|
||||
beforeEdit : function(grid, rowIndex, colIndex){
|
||||
if(this.lastEditRow && rowIndex != this.lastEditRow.rowIndex){
|
||||
YAHOO.util.Dom.removeClass(this.lastEditRow, 'ygrid-prop-edting');
|
||||
}
|
||||
this.lastEditRow = this.getRow(rowIndex);
|
||||
YAHOO.util.Dom.addClass(this.lastEditRow, 'ygrid-prop-edting');
|
||||
},
|
||||
|
||||
setSource : function(source){
|
||||
this.dataModel.setSource(source);
|
||||
},
|
||||
|
||||
getSource : function(){
|
||||
return this.dataModel.getSource();
|
||||
}
|
||||
});
|
||||
29
www/extras/yui-ext/examples/grid/array-grid.html
Normal file
29
www/extras/yui-ext/examples/grid/array-grid.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Array Grid Example</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css" />
|
||||
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
<script type="text/javascript" src="array-grid.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="example-info">
|
||||
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".
|
||||
</div>
|
||||
<h1>Array Grid Example</h1>
|
||||
<p>This example shows how to create a grid from Array data. For more details on this example, see <a href="http://www.jackslocum.com/yui/2006/08/30/a-grid-component-for-yahoo-ui-extensions-v1/">the blog post</a>.</p>
|
||||
<p>Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>.</p>
|
||||
|
||||
<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
|
||||
<div id="example-grid" style="border: 1px solid #cccccc; overflow: hidden; width: 535px; height: 225px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
87
www/extras/yui-ext/examples/grid/array-grid.js
vendored
Normal file
87
www/extras/yui-ext/examples/grid/array-grid.js
vendored
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
var Example = {
|
||||
init : function(){
|
||||
// some data yanked off the web
|
||||
var myData = [
|
||||
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
|
||||
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
|
||||
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
|
||||
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
|
||||
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
|
||||
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
|
||||
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
|
||||
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
|
||||
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
|
||||
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
|
||||
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
|
||||
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
|
||||
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
|
||||
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
|
||||
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
|
||||
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
|
||||
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
|
||||
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
|
||||
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
|
||||
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
|
||||
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
|
||||
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
|
||||
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
|
||||
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
|
||||
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
|
||||
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
|
||||
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
|
||||
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
|
||||
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
|
||||
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
|
||||
];
|
||||
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);
|
||||
|
||||
// example of custom renderer function
|
||||
function italic(value){
|
||||
return '<i>' + value + '</i>';
|
||||
}
|
||||
|
||||
// example of custom renderer function
|
||||
function change(val, suffix){
|
||||
suffix = suffix || '';
|
||||
if(val > 0){
|
||||
return '<span style="color:green;">' + val + suffix + '</span>';
|
||||
}else if(val < 0){
|
||||
return '<span style="color:red;">' + val + suffix + '</span>';
|
||||
}
|
||||
return val;
|
||||
}
|
||||
// example of custom renderer function
|
||||
function pctChange(val){
|
||||
return change(val, '%');
|
||||
}
|
||||
|
||||
// example of custom renderer function, this hideous code was grabbed off the web
|
||||
function money(mnt) {
|
||||
mnt -= 0;
|
||||
mnt = (Math.round(mnt*100))/100;
|
||||
mnt = (mnt == Math.floor(mnt)) ? mnt + '.00' : ( (mnt*10 == Math.floor(mnt*10)) ? mnt + '0' : mnt);
|
||||
return "$" + mnt;
|
||||
}
|
||||
|
||||
// sortTypes provide support for custom sorting comparison functions
|
||||
// not needed for this table but here for demonstration
|
||||
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
|
||||
|
||||
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
|
||||
// custom or reusable ColumnModels
|
||||
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
|
||||
{header: "Company", width: 200, sortable: true, sortType: sort.asUCString},
|
||||
{header: "Price", width: 75, sortable: true, renderer: money},
|
||||
{header: "Change", width: 75, sortable: true, renderer: change},
|
||||
{header: "% Change", width: 75, sortable: true, renderer: pctChange},
|
||||
{header: "Last Updated", width: 85, sortable: true, renderer: italic}
|
||||
]);
|
||||
|
||||
// create the Grid
|
||||
var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
|
||||
grid.render();
|
||||
|
||||
grid.getSelectionModel().selectFirstRow();
|
||||
}
|
||||
}
|
||||
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
|
||||
31
www/extras/yui-ext/examples/grid/custom-grid.html
Normal file
31
www/extras/yui-ext/examples/grid/custom-grid.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Customizing the Grid</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css" />
|
||||
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
<script type="text/javascript" src="PropsGrid.js"></script>
|
||||
<script type="text/javascript" src="custom-grid.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="example-info">
|
||||
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".
|
||||
</div>
|
||||
<h1>Customizing the Grid</h1>
|
||||
<p>This example shows how to extend the grid to create a customized grid. The customized grid is an implementation of a Visual Studio Properties Editor.</p>
|
||||
<p>Note that the js is not minified so it is readable. See <a href="custom-grid.js">custom-grid.js</a> for the grid creation code
|
||||
and <a href="PropsGrid.js">PropsGrid.js</a> for the extended grid code.</p>
|
||||
|
||||
<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
|
||||
<div id="props-grid" style="overflow: hidden; width: 275px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
18
www/extras/yui-ext/examples/grid/custom-grid.js
vendored
Normal file
18
www/extras/yui-ext/examples/grid/custom-grid.js
vendored
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
var Example = {
|
||||
init : function(){
|
||||
var propsGrid = new YAHOO.ext.grid.PropsGrid('props-grid');
|
||||
// The props grid takes an object as a data source
|
||||
propsGrid.setSource({
|
||||
"(name)": "Properties Grid",
|
||||
"grouping": false,
|
||||
"autoFitColumns": true,
|
||||
"productionQuality": false,
|
||||
"created": new Date(Date.parse('10/15/2006')),
|
||||
"tested": false,
|
||||
"version": .01,
|
||||
"borderWidth": 1
|
||||
});
|
||||
propsGrid.render();
|
||||
}
|
||||
}
|
||||
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
|
||||
42
www/extras/yui-ext/examples/grid/edit-grid.html
Normal file
42
www/extras/yui-ext/examples/grid/edit-grid.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Editor Grid Example</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css" />
|
||||
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
<script type="text/javascript" src="edit-grid.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="example-info">
|
||||
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".
|
||||
</div>
|
||||
<h1>Editor Grid Example</h1>
|
||||
<p>This example shows how to create a grid with inline editing. For more details on this example, see <a href="http://www.jackslocum.com/yui/2006/09/10/adding-built-in-editing-support-to-the-yahoo-ui-extensions-grid/">the blog post</a>.</p>
|
||||
<p>Note that the js is not minified so it is readable. See <a href="edit-grid.js">edit-grid.js</a>.</p>
|
||||
|
||||
<p>The data in the grid is loaded from <a href="plants.xml">plants.xml</a>.</p>
|
||||
|
||||
<!-- you must define the select box here, as the custom editor for the 'Light' column will require it -->
|
||||
<select name="light" id="light" class="ygrid-editor" style="visibility: hidden;">
|
||||
<option value="Shade">Shade</option>
|
||||
<option value="Mostly Shady">Mostly Shady</option>
|
||||
<option value="Sun or Shade">Sun or Shade</option>
|
||||
|
||||
<option value="Mostly Sunny">Mostly Sunny</option>
|
||||
|
||||
<option value="Sunny">Sunny</option>
|
||||
</select>
|
||||
|
||||
<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
|
||||
<div id="editor-grid" style="border: 1px solid #cccccc; overflow: hidden; width: 535px; height: 225px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
92
www/extras/yui-ext/examples/grid/edit-grid.js
vendored
Normal file
92
www/extras/yui-ext/examples/grid/edit-grid.js
vendored
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
EditorExample = function(){
|
||||
var dataModel;
|
||||
var grid;
|
||||
var colModel;
|
||||
|
||||
var formatMoney = function(value){
|
||||
value -= 0;
|
||||
value = (Math.round(value*100))/100;
|
||||
value = (value == Math.floor(value)) ? value + '.00' : ( (value*10 == Math.floor(value*10)) ? value + '0' : value);
|
||||
return "$" + value;
|
||||
};
|
||||
|
||||
var formatBoolean = function(value){
|
||||
return value ? 'Yes' : 'No';
|
||||
};
|
||||
|
||||
var formatDate = function(value){
|
||||
return value.dateFormat('M d, Y');
|
||||
};
|
||||
|
||||
var parseDate = function(value){
|
||||
return new Date(Date.parse(value));
|
||||
};
|
||||
|
||||
return {
|
||||
init : function(){
|
||||
var yg = YAHOO.ext.grid;
|
||||
var cols = [{
|
||||
header: "Common Name",
|
||||
width: 160,
|
||||
editor: new yg.TextEditor({allowBlank: false})
|
||||
},{
|
||||
header: "Light",
|
||||
width: 130,
|
||||
editor: new yg.SelectEditor('light')
|
||||
},{
|
||||
header: "Price",
|
||||
width: 70,
|
||||
renderer: formatMoney,
|
||||
editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, maxValue: 10})
|
||||
},{
|
||||
header: "Available",
|
||||
width: 95,
|
||||
renderer: formatDate,
|
||||
editor: new yg.DateEditor({format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6],
|
||||
disabledDaysText: 'Plants are not available on the weekends',
|
||||
disabledDates : ['^07', '04/15', '12/02/06'],
|
||||
disabledDatesText : 'The plants are pollinating on %0, choose a different date.'})
|
||||
},{
|
||||
header: "Indoor?",
|
||||
width: 55,
|
||||
renderer: formatBoolean,
|
||||
editor: new yg.CheckboxEditor()
|
||||
}];
|
||||
colModel = new YAHOO.ext.grid.DefaultColumnModel(cols);
|
||||
colModel.defaultSortable = true;
|
||||
|
||||
var schema = {
|
||||
tagName: 'plant',
|
||||
id: 'use-index',
|
||||
fields: ['common', 'light', 'price', 'availability', 'indoor']
|
||||
};
|
||||
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
|
||||
dataModel.addPreprocessor(2, parseFloat);
|
||||
dataModel.addPreprocessor(3, parseDate);
|
||||
dataModel.addPreprocessor(4, Boolean);
|
||||
dataModel.setDefaultSort(colModel, 0, "ASC");
|
||||
|
||||
grid = new YAHOO.ext.grid.EditorGrid('editor-grid', dataModel, colModel);
|
||||
// to use double click to edit:
|
||||
//grid.getSelectionModel().clicksToActivateCell = 2;
|
||||
grid.render();
|
||||
|
||||
dataModel.load('plants.xml');
|
||||
},
|
||||
|
||||
// filtering support, regex, function or text match
|
||||
filter : function(e){
|
||||
var mfilter = function(value){
|
||||
return (value == 'Shade');
|
||||
}
|
||||
dataModel.filter({0: /^B.*/i, 1: mfilter});
|
||||
},
|
||||
|
||||
// hide columns
|
||||
hide : function(e){
|
||||
colModel.setHidden(1, true);
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.ext.EventManager.onDocumentReady(EditorExample.init, EditorExample, true);
|
||||
22
www/extras/yui-ext/examples/grid/paging-grid.html
Normal file
22
www/extras/yui-ext/examples/grid/paging-grid.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Paging Grid</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css" />
|
||||
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Paging and Remote Datasets</h1>
|
||||
<p>Unfortunately paging requires a server-side script for your environment and a static example can't be created.
|
||||
However, there is a great explanation of the paging system, how it works and how to use it available in <a href="http://www.jackslocum.com/yui/2006/09/26/using-the-remote-dataset-feature-of-the-grid/">the blog post</a>.</p>
|
||||
</body>
|
||||
</html>
|
||||
327
www/extras/yui-ext/examples/grid/plants.xml
Normal file
327
www/extras/yui-ext/examples/grid/plants.xml
Normal file
|
|
@ -0,0 +1,327 @@
|
|||
<?xml version="1.0" encoding="ISO-8859-1"?>
|
||||
<catalog>
|
||||
<plant>
|
||||
<common>Bloodroot</common>
|
||||
<botanical>Sanguinaria canadensis</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>2.44</price>
|
||||
<availability>03/15/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Columbine</common>
|
||||
<botanical>Aquilegia canadensis</botanical>
|
||||
<zone>3</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>9.37</price>
|
||||
<availability>03/06/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Marsh Marigold</common>
|
||||
<botanical>Caltha palustris</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Mostly Sunny</light>
|
||||
<price>6.81</price>
|
||||
<availability>05/17/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Cowslip</common>
|
||||
<botanical>Caltha palustris</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>9.90</price>
|
||||
<availability>03/06/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Dutchman's-Breeches</common>
|
||||
<botanical>Dicentra cucullaria</botanical>
|
||||
<zone>3</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>6.44</price>
|
||||
<availability>01/20/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Ginger, Wild</common>
|
||||
<botanical>Asarum canadense</botanical>
|
||||
<zone>3</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>9.03</price>
|
||||
<availability>04/18/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Hepatica</common>
|
||||
<botanical>Hepatica americana</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>4.45</price>
|
||||
<availability>01/26/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Liverleaf</common>
|
||||
<botanical>Hepatica americana</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>3.99</price>
|
||||
<availability>01/02/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Jack-In-The-Pulpit</common>
|
||||
<botanical>Arisaema triphyllum</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>3.23</price>
|
||||
<availability>02/01/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Mayapple</common>
|
||||
<botanical>Podophyllum peltatum</botanical>
|
||||
<zone>3</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>2.98</price>
|
||||
<availability>06/05/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Phlox, Woodland</common>
|
||||
<botanical>Phlox divaricata</botanical>
|
||||
<zone>3</zone>
|
||||
<light>Sun or Shade</light>
|
||||
<price>2.80</price>
|
||||
<availability>01/22/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Phlox, Blue</common>
|
||||
<botanical>Phlox divaricata</botanical>
|
||||
<zone>3</zone>
|
||||
<light>Sun or Shade</light>
|
||||
<price>5.59</price>
|
||||
<availability>02/16/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Spring-Beauty</common>
|
||||
<botanical>Claytonia Virginica</botanical>
|
||||
<zone>7</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>6.59</price>
|
||||
<availability>02/01/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Trillium</common>
|
||||
<botanical>Trillium grandiflorum</botanical>
|
||||
<zone>5</zone>
|
||||
<light>Sun or Shade</light>
|
||||
<price>3.90</price>
|
||||
<availability>04/29/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Wake Robin</common>
|
||||
<botanical>Trillium grandiflorum</botanical>
|
||||
<zone>5</zone>
|
||||
<light>Sun or Shade</light>
|
||||
<price>3.20</price>
|
||||
<availability>02/21/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Violet, Dog-Tooth</common>
|
||||
<botanical>Erythronium americanum</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Shade</light>
|
||||
<price>9.04</price>
|
||||
<availability>02/01/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Trout Lily</common>
|
||||
<botanical>Erythronium americanum</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Shade</light>
|
||||
<price>6.94</price>
|
||||
<availability>03/24/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Adder's-Tongue</common>
|
||||
<botanical>Erythronium americanum</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Shade</light>
|
||||
<price>9.58</price>
|
||||
<availability>04/13/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Anemone</common>
|
||||
<botanical>Anemone blanda</botanical>
|
||||
<zone>6</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>8.86</price>
|
||||
<availability>12/26/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Grecian Windflower</common>
|
||||
<botanical>Anemone blanda</botanical>
|
||||
<zone>6</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>9.16</price>
|
||||
<availability>07/10/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Bee Balm</common>
|
||||
<botanical>Monarda didyma</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Shade</light>
|
||||
<price>4.59</price>
|
||||
<availability>05/03/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Bergamot</common>
|
||||
<botanical>Monarda didyma</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Shade</light>
|
||||
<price>7.16</price>
|
||||
<availability>04/27/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Black-Eyed Susan</common>
|
||||
<botanical>Rudbeckia hirta</botanical>
|
||||
<zone>Annual</zone>
|
||||
<light>Sunny</light>
|
||||
<price>9.80</price>
|
||||
<availability>06/18/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Buttercup</common>
|
||||
<botanical>Ranunculus</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Shade</light>
|
||||
<price>2.57</price>
|
||||
<availability>06/10/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Crowfoot</common>
|
||||
<botanical>Ranunculus</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Shade</light>
|
||||
<price>9.34</price>
|
||||
<availability>04/03/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Butterfly Weed</common>
|
||||
<botanical>Asclepias tuberosa</botanical>
|
||||
<zone>Annual</zone>
|
||||
<light>Sunny</light>
|
||||
<price>2.78</price>
|
||||
<availability>06/30/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Cinquefoil</common>
|
||||
<botanical>Potentilla</botanical>
|
||||
<zone>Annual</zone>
|
||||
<light>Shade</light>
|
||||
<price>7.06</price>
|
||||
<availability>05/25/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Primrose</common>
|
||||
<botanical>Oenothera</botanical>
|
||||
<zone>3 - 5</zone>
|
||||
<light>Sunny</light>
|
||||
<price>6.56</price>
|
||||
<availability>01/30/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Gentian</common>
|
||||
<botanical>Gentiana</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Sun or Shade</light>
|
||||
<price>7.81</price>
|
||||
<availability>05/18/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Blue Gentian</common>
|
||||
<botanical>Gentiana</botanical>
|
||||
<zone>4</zone>
|
||||
<light>Sun or Shade</light>
|
||||
<price>8.56</price>
|
||||
<availability>05/02/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Jacob's Ladder</common>
|
||||
<botanical>Polemonium caeruleum</botanical>
|
||||
<zone>Annual</zone>
|
||||
<light>Shade</light>
|
||||
<price>9.26</price>
|
||||
<availability>02/21/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Greek Valerian</common>
|
||||
<botanical>Polemonium caeruleum</botanical>
|
||||
<zone>Annual</zone>
|
||||
<light>Shade</light>
|
||||
<price>4.36</price>
|
||||
<availability>07/14/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>California Poppy</common>
|
||||
<botanical>Eschscholzia californica</botanical>
|
||||
<zone>Annual</zone>
|
||||
<light>Sunny</light>
|
||||
<price>7.89</price>
|
||||
<availability>03/27/2006</availability>
|
||||
<indoor>false</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Shooting Star</common>
|
||||
<botanical>Dodecatheon</botanical>
|
||||
<zone>Annual</zone>
|
||||
<light>Mostly Shady</light>
|
||||
<price>8.60</price>
|
||||
<availability>05/13/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Snakeroot</common>
|
||||
<botanical>Cimicifuga</botanical>
|
||||
<zone>Annual</zone>
|
||||
<light>Shade</light>
|
||||
<price>5.63</price>
|
||||
<availability>07/11/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
<plant>
|
||||
<common>Cardinal Flower</common>
|
||||
<botanical>Lobelia cardinalis</botanical>
|
||||
<zone>2</zone>
|
||||
<light>Shade</light>
|
||||
<price>3.02</price>
|
||||
<availability>02/22/2006</availability>
|
||||
<indoor>true</indoor>
|
||||
</plant>
|
||||
</catalog>
|
||||
1
www/extras/yui-ext/examples/grid/sheldon.xml
Normal file
1
www/extras/yui-ext/examples/grid/sheldon.xml
Normal file
File diff suppressed because one or more lines are too long
34
www/extras/yui-ext/examples/grid/xml-grid.html
Normal file
34
www/extras/yui-ext/examples/grid/xml-grid.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>XML Grid Example</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css" />
|
||||
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
<script type="text/javascript" src="xml-grid.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="example-info">
|
||||
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".
|
||||
</div>
|
||||
<h1>XML Grid Example</h1>
|
||||
<p>This example shows how to load a grid with XML data. For more details on this example, see <a href="http://www.jackslocum.com/yui/2006/08/31/a-grid-component-for-yahoo-ui-part-2/">the blog post</a>.</p>
|
||||
|
||||
<p>This grid also uses autoHeight and autoWidth to dynamically size to fit it's data and columns.</p>
|
||||
|
||||
<p>Note that the js is not minified so it is readable. See <a href="xml-grid.js">xml-grid.js</a>.</p>
|
||||
|
||||
<p>The data in the grid is loaded from <a href="sheldon.xml">sheldon.xml</a>, which is directly from an Amazon.com search.</p>
|
||||
|
||||
<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
|
||||
<div id="example-grid" class="ygrid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
28
www/extras/yui-ext/examples/grid/xml-grid.js
vendored
Normal file
28
www/extras/yui-ext/examples/grid/xml-grid.js
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
var XmlExample = {
|
||||
init : function(){
|
||||
var schema = {
|
||||
tagName: 'Item',
|
||||
id: 'ASIN',
|
||||
fields: ['Author', 'Title', 'Manufacturer', 'ProductGroup']
|
||||
};
|
||||
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
|
||||
|
||||
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
|
||||
// custom or reusable ColumnModels
|
||||
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
|
||||
{header: "Author", width: 120, sortable: true},
|
||||
{header: "Title", width: 180, sortable: true},
|
||||
{header: "Manufacturer", width: 115, sortable: true},
|
||||
{header: "Product Group", width: 100, sortable: true}
|
||||
]);
|
||||
|
||||
// create the Grid
|
||||
var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
|
||||
grid.autoWidth = true;
|
||||
grid.autoHeight = true;
|
||||
grid.render();
|
||||
|
||||
dataModel.load('/blog/examples/sheldon.xml');
|
||||
}
|
||||
}
|
||||
YAHOO.ext.EventManager.onDocumentReady(XmlExample.init, XmlExample, true);
|
||||
BIN
www/extras/yui-ext/examples/info-bg.gif
Normal file
BIN
www/extras/yui-ext/examples/info-bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 852 B |
163
www/extras/yui-ext/examples/layout/complex.html
Normal file
163
www/extras/yui-ext/examples/layout/complex.html
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Complex Layout</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI utilities file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/layout.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css"/>
|
||||
|
||||
<script language="javascript" src="../grid/PropsGrid.js"></script>
|
||||
<style type="text/css">
|
||||
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
|
||||
.ylayout-panel-north {
|
||||
border:0px none;
|
||||
background-color:#c3daf9;
|
||||
}
|
||||
#nav {
|
||||
}
|
||||
#autoTabs, #center1, #center2, #west {
|
||||
padding:10px;
|
||||
}
|
||||
#north, #south{
|
||||
font:normal 8pt arial, helvetica;
|
||||
padding:4px;
|
||||
}
|
||||
.ylayout-panel-center p {
|
||||
margin:5px;
|
||||
}
|
||||
#props-panel .ygrid-col-0{
|
||||
}
|
||||
#props-panel .ygrid-col-1{
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
Example = function(){
|
||||
var layout;
|
||||
return {
|
||||
init : function(){
|
||||
layout = new YAHOO.ext.BorderLayout(document.body, {
|
||||
hideOnLayout: true,
|
||||
north: {
|
||||
split:false,
|
||||
initialSize: 25,
|
||||
titlebar: false
|
||||
},
|
||||
west: {
|
||||
split:true,
|
||||
initialSize: 200,
|
||||
minSize: 175,
|
||||
maxSize: 400,
|
||||
titlebar: true,
|
||||
collapsible: true,
|
||||
animate: true
|
||||
},
|
||||
east: {
|
||||
split:true,
|
||||
initialSize: 202,
|
||||
minSize: 175,
|
||||
maxSize: 400,
|
||||
titlebar: true,
|
||||
collapsible: true,
|
||||
animate: true
|
||||
},
|
||||
south: {
|
||||
split:true,
|
||||
initialSize: 100,
|
||||
minSize: 100,
|
||||
maxSize: 200,
|
||||
titlebar: true,
|
||||
collapsible: true,
|
||||
animate: true
|
||||
},
|
||||
center: {
|
||||
titlebar: true,
|
||||
autoScroll:true
|
||||
}
|
||||
});
|
||||
|
||||
var propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel');
|
||||
// bogus object as a data source
|
||||
propsGrid.setSource({
|
||||
"(name)": "Properties Grid",
|
||||
"grouping": false,
|
||||
"autoFitColumns": true,
|
||||
"productionQuality": false,
|
||||
"created": new Date(Date.parse('10/15/2006')),
|
||||
"tested": false,
|
||||
"version": .01,
|
||||
"borderWidth": 1
|
||||
});
|
||||
propsGrid.render();
|
||||
layout.beginUpdate();
|
||||
layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
|
||||
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));
|
||||
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
|
||||
layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
|
||||
layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: true}));
|
||||
layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
|
||||
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
|
||||
layout.getRegion('center').showPanel('center1');
|
||||
layout.getRegion('west').hide();
|
||||
layout.endUpdate();
|
||||
},
|
||||
|
||||
toggleWest : function(link){
|
||||
var west = layout.getRegion('west');
|
||||
if(west.isVisible()){
|
||||
west.hide();
|
||||
link.innerHTML = 'Show West Region';
|
||||
}else{
|
||||
west.show();
|
||||
link.innerHTML = 'Hide West Region';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id ="container">
|
||||
<div id="west" class="ylayout-inactive-content">
|
||||
Hi. I'm the west panel.
|
||||
</div>
|
||||
<div id="north" class="ylayout-inactive-content">
|
||||
north - generally for menus, toolbars and/or advertisements
|
||||
</div>
|
||||
<div id="autoTabs" class="ylayout-inactive-content">
|
||||
The layout manager will automatically create and/or remove the TabPanel component when a region has more than one panel. Close one of my panels and you can see what I mean.
|
||||
</div>
|
||||
<div id="center2" class="ylayout-inactive-content">
|
||||
<p><a href="#" onclick="Example.toggleWest(this);return false;">Show West Region</a></p>
|
||||
<p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
|
||||
<p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
|
||||
<hr>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
|
||||
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
|
||||
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
|
||||
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
|
||||
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
|
||||
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
|
||||
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
|
||||
</div>
|
||||
<div id="center1" class="ylayout-inactive-content">
|
||||
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
|
||||
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
|
||||
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
|
||||
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
|
||||
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
|
||||
</div>
|
||||
<div id="props-panel" class="ylayout-inactive-content" style="width:200px;height:200px;overflow:hidden;">
|
||||
</div>
|
||||
<div id="south" class="ylayout-inactive-content">
|
||||
south - generally for informational stuff, also could be for status bar
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
www/extras/yui-ext/examples/layout/feed-proxy.php
Normal file
9
www/extras/yui-ext/examples/layout/feed-proxy.php
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?php
|
||||
// this is an example server-side proxy to load feeds
|
||||
$feed = $_REQUEST['feed'];
|
||||
if($feed != '' && strpos($feed, 'http') === 0){
|
||||
header('Content-Type: text/xml');
|
||||
readfile($feed);
|
||||
return;
|
||||
}
|
||||
?>
|
||||
221
www/extras/yui-ext/examples/layout/feed-viewer.css
Normal file
221
www/extras/yui-ext/examples/layout/feed-viewer.css
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
html, body {
|
||||
font: normal 9pt tahoma;
|
||||
margin: 0px;
|
||||
padding:0px;
|
||||
border:0px;
|
||||
}
|
||||
.ylayout-panel-south{
|
||||
background:#c3daf9;
|
||||
border:0px none;
|
||||
border-top:1px solid #ddecfe;
|
||||
}
|
||||
.ytheme-gray .ylayout-panel-south{
|
||||
background:#f3f2e7;
|
||||
border:0px none;
|
||||
}
|
||||
.ylayout-panel-north, .ytheme-gray .ylayout-panel-north{
|
||||
background-image: url(images/header.gif);
|
||||
background-repeat: repeat-x;
|
||||
color:#FFF;
|
||||
font:bold 12px verdana, helvetica;
|
||||
overflow:hidden;
|
||||
padding:4px;
|
||||
border:0px none;
|
||||
border-bottom:2px solid #c3daf9;
|
||||
}
|
||||
.ytheme-gray .ylayout-panel-north{
|
||||
border-bottom:2px solid #f3f2e7;
|
||||
}
|
||||
.ylayout-panel-hd-text{
|
||||
font: bold 11px tahoma,verdana,helvetica;
|
||||
color:#083772;
|
||||
}
|
||||
.ytheme-gray .ylayout-panel-hd-text{
|
||||
font: bold 11px tahoma,verdana,helvetica;
|
||||
color:#333333;
|
||||
}
|
||||
#preview-body{
|
||||
background:white;
|
||||
}
|
||||
#main .ylayout-panel-center{
|
||||
border-bottom:1px solid #98c0f4;
|
||||
}
|
||||
#preview-body {
|
||||
padding:10px;
|
||||
overflow:auto;
|
||||
line-height: 18px;
|
||||
}
|
||||
#preview-body p{
|
||||
margin:5px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.ytoolbar{
|
||||
border:0px none;
|
||||
background-color:#D8E7FB;
|
||||
border-bottom:1px solid #c3daf9;
|
||||
padding-bottom:1px;
|
||||
}
|
||||
#preview-tb .view-tab,#preview-tb .view-window,#myfeeds-tb .add-feed{
|
||||
background-position: 0px 0px;
|
||||
background-repeat: no-repeat;
|
||||
padding-left:18px;
|
||||
padding-top:1px;
|
||||
width:auto;
|
||||
display:block;
|
||||
}
|
||||
.view-tab{
|
||||
background-image: url('images/new_tab.gif');
|
||||
}
|
||||
.view-window{
|
||||
background-image: url('images/new_window.gif');
|
||||
}
|
||||
.add-feed {
|
||||
background-image: url('images/add-feed.gif');
|
||||
}
|
||||
#myfeeds-body{
|
||||
overflow:auto;
|
||||
}
|
||||
#preview-tb .view-tab,#preview-tb .view-window{
|
||||
background-position: 0px 0px;
|
||||
background-repeat: no-repeat;
|
||||
padding-left:18px;
|
||||
padding-top:1px;
|
||||
width:auto;
|
||||
display:block;
|
||||
}
|
||||
.view-tab{
|
||||
background-image: url('images/new_tab.gif');
|
||||
}
|
||||
.view-window{
|
||||
background-image: url('images/new_window.gif');
|
||||
}
|
||||
.feed-list{
|
||||
padding:1px;
|
||||
}
|
||||
.feed-list a{
|
||||
border:1px solid white;
|
||||
display:block;
|
||||
-moz-outline:none;
|
||||
margin-bottom:2px;
|
||||
text-decoration:none;
|
||||
}
|
||||
.feed-list a .body{
|
||||
padding:5px 2px 5px 22px;
|
||||
background-image:url(images/rss.gif);
|
||||
background-position: 2px 5px;
|
||||
background-repeat: no-repeat;
|
||||
font:bold 12px tahoma, verdana, helvetica;
|
||||
color: #2d5593;
|
||||
display:block;
|
||||
-moz-outline:none;
|
||||
}
|
||||
.feed-list a .desc{
|
||||
font:normal 11px tahoma, verdana, helvetica;
|
||||
color: #222222;
|
||||
}
|
||||
.feed-list a:hover, .feed-list .selected{
|
||||
text-decoration: none;
|
||||
border:1px solid #c3daf9;
|
||||
background-color:#ddecfe;
|
||||
}
|
||||
.feed-list .selected{
|
||||
background-image: url('images/post-bg.gif');
|
||||
border:1px solid #c3daf9;
|
||||
}
|
||||
#feed-grid {
|
||||
overflow:auto;
|
||||
}
|
||||
#add-feed{
|
||||
background-image: url('images/post-bg.gif');
|
||||
border:2px solid #c3daf9;
|
||||
position:absolute;
|
||||
z-index:10006;
|
||||
font-size:8pt;
|
||||
width:300px;
|
||||
padding:5px;
|
||||
overflow:auto;
|
||||
left:-1000px;
|
||||
top:-1000px;
|
||||
}
|
||||
#add-feed input{
|
||||
font:normal 8pt arial,helvetica;
|
||||
}
|
||||
#add-feed .eg{
|
||||
display:block;
|
||||
padding:3px;
|
||||
color:#1e4e8f;
|
||||
}
|
||||
#feed-url{
|
||||
width:240px;
|
||||
}
|
||||
#add-feed-close{
|
||||
position:absolute;
|
||||
right:2px;
|
||||
top:2px;
|
||||
cursor:pointer;
|
||||
}
|
||||
#add-feed p{
|
||||
height:18px;
|
||||
display:none;
|
||||
}
|
||||
#add-feed p.active-msg{
|
||||
display:block;
|
||||
}
|
||||
|
||||
#status {
|
||||
font-size:8pt;
|
||||
background-image: url('/blog/images/grid/loading.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
padding-left:20px;
|
||||
padding-top:3px;
|
||||
height:18px;
|
||||
}
|
||||
#status.done {
|
||||
background-image: url('/blog/images/grid/done.gif');
|
||||
}
|
||||
.ylayout-collapsed-west{
|
||||
background-image:url(images/myfeeds.gif);
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
}
|
||||
.ylayout-collapsed-east{
|
||||
background-image:url(images/suggested.gif);
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
}
|
||||
#main .ylayout-collapsed-south{
|
||||
background-image:url(images/preview.gif);
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
/** Comment List */
|
||||
.item-date {
|
||||
margin: 0;
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight:normal;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
.item-title{
|
||||
font:bold 11px "sans serif", verdana;
|
||||
color:#444444;
|
||||
}
|
||||
.feed-item {
|
||||
display:block;
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
font-size:11px;
|
||||
border:1px solid white;
|
||||
border-bottom:1px solid #dddddd;
|
||||
color:#222222;
|
||||
cursor:pointer;
|
||||
line-height: 18px;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select:none;
|
||||
}
|
||||
.selected-article{
|
||||
background:#ecf5fe url('images/post-bg.gif') repeat-x;
|
||||
border:1px solid #c3daf9;
|
||||
}
|
||||
37
www/extras/yui-ext/examples/layout/feed-viewer.html
Normal file
37
www/extras/yui-ext/examples/layout/feed-viewer.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>RSS Feed Viewer 2.0</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI utilities file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/yui-ext.css" />
|
||||
<link rel="stylesheet" type="text/css" href="feed-viewer.css"/>
|
||||
<script language="javascript" src="feed-viewer.js"></script>
|
||||
</head>
|
||||
<body scroll="no" id="feedViewer2">
|
||||
<div id="header" class="ylayout-inactive-content">
|
||||
Simple RSS Feed Viewer - 2.0
|
||||
</div>
|
||||
<div id="feeds" class="ylayout-inactive-content">
|
||||
<div id="myfeeds-tb"></div>
|
||||
<div id="myfeeds-body" class="feed-list"></div>
|
||||
</div>
|
||||
<div id="suggested" class="ylayout-inactive-content feed-list"></div>
|
||||
<div id="main" class="ylayout-inactive-content">
|
||||
<div id="feed-grid" class="ylayout-inactive-content"></div>
|
||||
<div id="preview" class="ylayout-inactive-content">
|
||||
<div id="preview-tb"></div>
|
||||
<div id="preview-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="status" class="ylayout-inactive-content"></div>
|
||||
<div id="add-feed" style="visibility:hidden;">
|
||||
<img id="add-feed-close" src="/blog/images/layout/tab-close-on.gif">
|
||||
<p id="add-title" class="active-msg">Please enter the URL for the feed:</p>
|
||||
<p id="invalid-feed"><img src="/blog/images/warning.gif" width="16" height="16" align="absmiddle"> The feed URL specified is not a valid RSS feed.</p>
|
||||
<p id="loading-feed"><img src="/blog/images/wait.gif" width="18" height="18" align="absmiddle"> Loading feed...</p>
|
||||
<input type="text" id="feed-url" name="feed-url" class="input-text"/><input id="add-btn" type="button" value="Add"/><br>
|
||||
<span class="eg">e.g. http://www.jackslocum.com/yui/feed/</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
312
www/extras/yui-ext/examples/layout/feed-viewer.js
vendored
Normal file
312
www/extras/yui-ext/examples/layout/feed-viewer.js
vendored
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
String.prototype.ellipse = function(maxLength){
|
||||
if(this.length > maxLength){
|
||||
return this.substr(0, maxLength-3) + '...';
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
var Viewer = function(){
|
||||
// a bunch of private variables accessible by member function
|
||||
var layout, statusPanel, south, preview, previewBody, feedPanel;
|
||||
var grid, dm, sm;
|
||||
var addFeed, currentItem, tpl;
|
||||
var suggested, feeds;
|
||||
var sfeeds, myfeeds;
|
||||
var seed = 0;
|
||||
|
||||
// feed clicks bubble up to this universal handler
|
||||
var feedClicked = function(e){
|
||||
// find the "a" element that was clicked
|
||||
var a = e.findTarget(null, 'a');
|
||||
if(a){
|
||||
e.preventDefault();
|
||||
Viewer.loadFeed(a.href);
|
||||
Viewer.changeActiveFeed(a.id.substr(5));
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
init : function(){
|
||||
// initialize state manager, we will use cookies
|
||||
YAHOO.ext.state.Manager.setProvider(new YAHOO.ext.state.CookieProvider());
|
||||
|
||||
// initialize the add feed overlay and buttons
|
||||
addFeed = getEl('add-feed');
|
||||
var addBtn = getEl('add-btn');
|
||||
addBtn.on('click', this.validateFeed, this, true);
|
||||
var closeBtn = getEl('add-feed-close');
|
||||
closeBtn.on('click', addFeed.hide, addFeed, true);
|
||||
|
||||
// create Elements for the feed and suggested lists
|
||||
feeds = getEl('feeds'), suggested = getEl('suggested');
|
||||
|
||||
// delegate clicks on the lists
|
||||
feeds.mon('click', feedClicked);
|
||||
suggested.mon('click', feedClicked);
|
||||
|
||||
//create feed template
|
||||
tpl = new YAHOO.ext.DomHelper.Template('<a id="feed-{id}" href="{url}"><span class="body">{name}<br><span class="desc">{desc}</span></span></a>');
|
||||
|
||||
// collection of feeds added by the user
|
||||
myfeeds = {};
|
||||
|
||||
// some default feeds
|
||||
sfeeds = {
|
||||
'jvs':{id:'jvs', name: 'JackSlocum.com', desc: 'Using the Yahoo! UI Library- Beyond the Examples.', url:'http://www.jackslocum.com/yui/feed/'},
|
||||
'ajaxian':{id:'ajaxian', name: 'Ajaxian', desc: 'Cleaning up the web with Ajax.', url:'http://feeds.feedburner.com/ajaxian'},
|
||||
'yui':{id:'yui', name: 'YUI Blog', desc: 'News and Articles about Designing and Developing with Yahoo! Libraries.', url:'http://feeds.yuiblog.com/YahooUserInterfaceBlog'},
|
||||
'sports':{id:'sports', name: 'Yahoo! Sports', desc: 'Latest news and information for the world of sports.', url:'http://sports.yahoo.com/top/rss.xml'}
|
||||
};
|
||||
|
||||
// go through the suggested feeds and add them to the list
|
||||
for(var id in sfeeds) {
|
||||
var f = sfeeds[id];
|
||||
tpl.append(suggested.dom, f);
|
||||
}
|
||||
|
||||
// create the main layout
|
||||
layout = new YAHOO.ext.BorderLayout(document.body, {
|
||||
north: {
|
||||
split:false,
|
||||
initialSize: 25,
|
||||
titlebar: false
|
||||
},
|
||||
west: {
|
||||
split:true,
|
||||
initialSize: 200,
|
||||
minSize: 175,
|
||||
maxSize: 400,
|
||||
titlebar: true,
|
||||
collapsible: true,
|
||||
animate: true,
|
||||
autoScroll:false,
|
||||
useShim:true,
|
||||
cmargins: {top:0,bottom:2,right:2,left:2}
|
||||
},
|
||||
east: {
|
||||
split:true,
|
||||
initialSize: 200,
|
||||
minSize: 175,
|
||||
maxSize: 400,
|
||||
titlebar: true,
|
||||
collapsible: true,
|
||||
animate: true,
|
||||
autoScroll:false,
|
||||
useShim:true,
|
||||
collapsed:true,
|
||||
cmargins: {top:0,bottom:2,right:2,left:2}
|
||||
},
|
||||
south: {
|
||||
split:false,
|
||||
initialSize: 22,
|
||||
titlebar: false,
|
||||
collapsible: false,
|
||||
animate: false
|
||||
},
|
||||
center: {
|
||||
titlebar: false,
|
||||
autoScroll:false,
|
||||
tabPosition: 'top',
|
||||
closeOnTab: true,
|
||||
alwaysShowTabs: true,
|
||||
resizeTabs: true
|
||||
}
|
||||
});
|
||||
// tell the layout not to perform layouts until we're done adding everything
|
||||
layout.beginUpdate();
|
||||
layout.add('north', new YAHOO.ext.ContentPanel('header'));
|
||||
|
||||
// initialize the statusbar
|
||||
statusPanel = new YAHOO.ext.ContentPanel('status');
|
||||
south = layout.getRegion('south');
|
||||
south.add(statusPanel);
|
||||
|
||||
// create the add feed toolbar
|
||||
var feedtb = new YAHOO.ext.Toolbar('myfeeds-tb');
|
||||
feedtb.addButton({id:'add-feed-btn', text: 'Add Feed', className: 'add-feed', click: this.showAddFeed.createDelegate(this)});
|
||||
|
||||
layout.add('west', new YAHOO.ext.ContentPanel('feeds', {title: 'My Feeds', fitToFrame:true, toolbar: feedtb, resizeEl:'myfeeds-body'}));
|
||||
layout.add('east', new YAHOO.ext.ContentPanel('suggested', {title: 'Suggested Feeds', fitToFrame:true}));
|
||||
|
||||
// the inner layout houses the grid panel and the preview panel
|
||||
var innerLayout = new YAHOO.ext.BorderLayout('main', {
|
||||
south: {
|
||||
split:true,
|
||||
initialSize: 250,
|
||||
minSize: 100,
|
||||
maxSize: 400,
|
||||
autoScroll:false,
|
||||
collapsible:true,
|
||||
titlebar: true,
|
||||
animate: true,
|
||||
cmargins: {top:2,bottom:0,right:0,left:0}
|
||||
},
|
||||
center: {
|
||||
autoScroll:false,
|
||||
titlebar:false
|
||||
}
|
||||
});
|
||||
// add the nested layout
|
||||
feedPanel = new YAHOO.ext.NestedLayoutPanel(innerLayout, 'View Feed');
|
||||
layout.add('center', feedPanel);
|
||||
|
||||
innerLayout.beginUpdate();
|
||||
|
||||
var lv = innerLayout.add('center', new YAHOO.ext.ContentPanel('feed-grid', {title: 'Feed Articles', fitToFrame:true}));
|
||||
this.createView(lv.getEl());
|
||||
|
||||
// create the preview panel and toolbar
|
||||
previewBody = getEl('preview-body');
|
||||
var tb = new YAHOO.ext.Toolbar('preview-tb');
|
||||
tb.addButton({text: 'View in New Tab', className: 'view-tab', click: this.showInTab.createDelegate(this)});
|
||||
tb.addSeparator();
|
||||
tb.addButton({text: 'View in New Window', className: 'view-window', click: this.showInWindow.createDelegate(this)});
|
||||
|
||||
preview = new YAHOO.ext.ContentPanel('preview', {title: "Preview", fitToFrame:true, toolbar: tb, resizeEl:'preview-body'});
|
||||
innerLayout.add('south', preview);
|
||||
|
||||
// restore innerLayout state
|
||||
innerLayout.restoreState();
|
||||
innerLayout.endUpdate(true);
|
||||
|
||||
// restore any state information
|
||||
layout.restoreState();
|
||||
layout.endUpdate();
|
||||
|
||||
// load the default feed - setTimeout for FireFox Mac?
|
||||
setTimeout(function(){
|
||||
this.loadFeed('http://www.jackslocum.com/yui/feed/');
|
||||
this.changeActiveFeed('jvs');
|
||||
}.createDelegate(this), 50);
|
||||
},
|
||||
|
||||
createView : function(el){
|
||||
function reformatDate(feedDate){
|
||||
var d = new Date(Date.parse(feedDate));
|
||||
return d ? d.dateFormat('D M j, Y, g:i a') : '';
|
||||
}
|
||||
|
||||
dm = new YAHOO.ext.grid.XMLDataModel({
|
||||
tagName: 'item',
|
||||
id: 'use-index',
|
||||
fields: ['title', 'pubDate', 'link', 'description']
|
||||
});
|
||||
dm.addPreprocessor(1, reformatDate); // add preprocessor to col 1 to parse dates
|
||||
dm.on('load', this.onLoad, this, true);
|
||||
|
||||
var tpl = new YAHOO.ext.DomHelper.Template(
|
||||
'<div class="feed-item">' +
|
||||
'<div class="item-title">{title}</div>' +
|
||||
'<div class="item-date">{date}</div>' +
|
||||
'{desc}</div>'
|
||||
);
|
||||
|
||||
var view = new YAHOO.ext.View(el, tpl, dm, {singleSelect:true, selectedClass:'selected-article'});
|
||||
view.prepareData = function(data){
|
||||
return {
|
||||
title: data[0],
|
||||
date: data[1],
|
||||
desc: data[3].replace(/<\/?[^>]+>/gi, '').ellipse(350)
|
||||
};
|
||||
}
|
||||
view.on('click', this.showPost, this, true);
|
||||
view.on('dblclick', this.showFullPost, this, true);
|
||||
},
|
||||
|
||||
onLoad : function(){
|
||||
if(dm.getRowCount() < 1){
|
||||
preview.setContent('');
|
||||
}
|
||||
statusPanel.getEl().addClass('done');
|
||||
statusPanel.setContent('Done.');
|
||||
},
|
||||
|
||||
loadFeed : function(feed){
|
||||
statusPanel.setContent('Loading feed ' + feed + '...');
|
||||
statusPanel.getEl().removeClass('done');
|
||||
dm.load('feed-proxy.php', {'feed': feed});
|
||||
},
|
||||
|
||||
showPost : function(view, dataIndex){
|
||||
var node = dm.getNode(dataIndex);
|
||||
var link = dm.getNamedValue(node, 'link');
|
||||
var title = dm.getValueAt(dataIndex, 0);
|
||||
var desc = dm.getNamedValue(node, 'description', 'No Description Available.');
|
||||
currentItem = {
|
||||
index: dataIndex, link: link
|
||||
};
|
||||
preview.setTitle(title.ellipse(80));
|
||||
previewBody.update(desc);
|
||||
},
|
||||
|
||||
showFullPost : function(view, rowIndex){
|
||||
var node = dm.getNode(rowIndex);
|
||||
var link = dm.getNamedValue(node, 'link');
|
||||
var title = dm.getValueAt(rowIndex, 0);
|
||||
if(!title){
|
||||
title = 'View Post';
|
||||
}
|
||||
var iframe = YAHOO.ext.DomHelper.append(document.body,
|
||||
{tag: 'iframe', frameBorder: 0, src: link});
|
||||
var panel = new YAHOO.ext.ContentPanel(iframe,
|
||||
{title: title, fitToFrame:true, closable:true});
|
||||
layout.add('center', panel);
|
||||
},
|
||||
|
||||
showInTab : function(){
|
||||
if(currentItem){
|
||||
this.showFullPost(grid, currentItem.index);
|
||||
}
|
||||
},
|
||||
|
||||
showInWindow : function(){
|
||||
if(currentItem){
|
||||
window.open(currentItem.link, 'win');
|
||||
}
|
||||
},
|
||||
|
||||
changeActiveFeed : function(feedId){
|
||||
YAHOO.util.Dom.removeClass(suggested.dom.getElementsByTagName('a'), 'selected');
|
||||
YAHOO.util.Dom.removeClass(feeds.dom.getElementsByTagName('a'), 'selected');
|
||||
YAHOO.util.Dom.addClass('feed-'+feedId, 'selected');
|
||||
var feed = sfeeds[feedId] || myfeeds[feedId];
|
||||
feedPanel.setTitle('View Feed (' + feed.name.ellipse(16) + ')');
|
||||
},
|
||||
|
||||
showAddFeed : function(){
|
||||
getEl('feed-url').dom.value = '';
|
||||
getEl('add-title').radioClass('active-msg');
|
||||
addFeed.alignTo('add-feed-btn', 'tl', [3,3])
|
||||
addFeed.show();
|
||||
},
|
||||
|
||||
validateFeed : function(){
|
||||
var url = getEl('feed-url').dom.value;
|
||||
getEl('loading-feed').radioClass('active-msg');
|
||||
var success = function(o){
|
||||
try{
|
||||
var xml = o.responseXML;
|
||||
var channel = xml.getElementsByTagName('channel')[0];
|
||||
var titleEl = channel.getElementsByTagName('title')[0];
|
||||
var descEl = channel.getElementsByTagName('description')[0];
|
||||
var name = titleEl.firstChild.nodeValue;
|
||||
var desc = (descEl.firstChild ? descEl.firstChild.nodeValue : '');
|
||||
var id = ++seed;
|
||||
myfeeds[id] = {id:id, name:name, desc:desc, url:url};
|
||||
tpl.append('myfeeds-body', myfeeds[id]);
|
||||
this.changeActiveFeed(id);
|
||||
addFeed.hide();
|
||||
dm.loadData(xml);
|
||||
}catch(e){
|
||||
getEl('invalid-feed').radioClass('active-msg');
|
||||
}
|
||||
}.createDelegate(this);
|
||||
var failure = function(o){
|
||||
getEl('invalid-feed').radioClass('active-msg');
|
||||
};
|
||||
YAHOO.util.Connect.asyncRequest('POST', 'feed-proxy.php', {success:success, failure:failure}, 'feed='+encodeURIComponent(url));
|
||||
}
|
||||
};
|
||||
}();
|
||||
//YAHOO.ext.EventManager.onDocumentReady(Viewer.init, Viewer, true);
|
||||
YAHOO.util.Event.on(window, 'load', Viewer.init, Viewer, true);
|
||||
BIN
www/extras/yui-ext/examples/layout/images/Thumbs.db
Normal file
BIN
www/extras/yui-ext/examples/layout/images/Thumbs.db
Normal file
Binary file not shown.
BIN
www/extras/yui-ext/examples/layout/images/add-feed.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/add-feed.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
www/extras/yui-ext/examples/layout/images/article.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/article.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 954 B |
BIN
www/extras/yui-ext/examples/layout/images/bullet.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/bullet.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 835 B |
BIN
www/extras/yui-ext/examples/layout/images/cancel.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/cancel.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
www/extras/yui-ext/examples/layout/images/comment-bg.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/comment-bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 838 B |
BIN
www/extras/yui-ext/examples/layout/images/feed-item.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/feed-item.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 954 B |
BIN
www/extras/yui-ext/examples/layout/images/grid-hrow.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/grid-hrow.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 B |
BIN
www/extras/yui-ext/examples/layout/images/header-bar.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/header-bar.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 927 B |
BIN
www/extras/yui-ext/examples/layout/images/header.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/header.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 834 B |
BIN
www/extras/yui-ext/examples/layout/images/myfeeds.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/myfeeds.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
www/extras/yui-ext/examples/layout/images/new_tab.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/new_tab.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 956 B |
BIN
www/extras/yui-ext/examples/layout/images/new_window.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/new_window.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,019 B |
BIN
www/extras/yui-ext/examples/layout/images/post-bg.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/post-bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 852 B |
BIN
www/extras/yui-ext/examples/layout/images/preview.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/preview.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
www/extras/yui-ext/examples/layout/images/rss.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/rss.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
www/extras/yui-ext/examples/layout/images/signin.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/signin.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
www/extras/yui-ext/examples/layout/images/signout.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/signout.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
www/extras/yui-ext/examples/layout/images/suggested.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/suggested.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
www/extras/yui-ext/examples/layout/images/toolbar.gif
Normal file
BIN
www/extras/yui-ext/examples/layout/images/toolbar.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 859 B |
120
www/extras/yui-ext/examples/layout/nested.html
Normal file
120
www/extras/yui-ext/examples/layout/nested.html
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Complex Layout</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI utilities file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/layout.css"/>
|
||||
<style type="text/css">
|
||||
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
|
||||
#header{
|
||||
background: url(images/header-bar.gif) repeat-x bottom;
|
||||
border-bottom: 1px solid #083772;
|
||||
padding:5px 4px;
|
||||
}
|
||||
#footer{
|
||||
background: url(images/header-bar.gif) repeat-x bottom;
|
||||
border-top: 1px solid #083772;
|
||||
padding:2px 4px;
|
||||
color:white;
|
||||
font:normal 8pt arial,helvetica;
|
||||
}
|
||||
#nav {
|
||||
}
|
||||
#nav, #inner1, #inner2 {
|
||||
padding:10px;
|
||||
}
|
||||
#content p {
|
||||
margin:5px;
|
||||
}
|
||||
#nav li {
|
||||
padding:2px;
|
||||
padding-left:10px;
|
||||
background-image:url(images/bullet.gif);
|
||||
background-position: -3px 6px;
|
||||
background-repeat: no-repeat;
|
||||
font-size:8pt;
|
||||
display: block;
|
||||
}
|
||||
.ylayout-panel-north, .ylayout-panel-south, #content .ylayout-panel-center{
|
||||
border:0px none;
|
||||
}
|
||||
#content .ylayout-panel-south{
|
||||
border-top:1px solid #aca899;
|
||||
}
|
||||
#content .ylayout-panel-center{
|
||||
border-bottom:1px solid #aca899;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
Example = function(){
|
||||
return {
|
||||
init : function(){
|
||||
var layout = new YAHOO.ext.BorderLayout(document.body, {
|
||||
west: {
|
||||
split:true,
|
||||
initialSize: 200,
|
||||
titlebar: true,
|
||||
collapsible: true,
|
||||
minSize: 100,
|
||||
maxSize: 400
|
||||
},
|
||||
center: {
|
||||
autoScroll: false
|
||||
}
|
||||
});
|
||||
layout.beginUpdate();
|
||||
|
||||
layout.add('west', new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
|
||||
var innerLayout = new YAHOO.ext.BorderLayout('content', {
|
||||
south: {
|
||||
split:true,
|
||||
initialSize: 200,
|
||||
minSize: 100,
|
||||
maxSize: 400,
|
||||
autoScroll:true,
|
||||
collapsible:true,
|
||||
titlebar: true
|
||||
},
|
||||
center: {
|
||||
autoScroll:true
|
||||
}
|
||||
});
|
||||
innerLayout.add('south', new YAHOO.ext.ContentPanel('inner1', "More Information"));
|
||||
innerLayout.add('center', new YAHOO.ext.ContentPanel('inner2'));
|
||||
layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
|
||||
layout.endUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
|
||||
</script>
|
||||
</head>
|
||||
<body class="ytheme-gray">
|
||||
<div id ="container">
|
||||
<div id="nav" class="ylayout-inactive-content">
|
||||
<ul>
|
||||
<li><a href="http://developer.yahoo.com/yui/" target="_blank"><img src="/blog/images/icons/yahoo.gif" width="16" height="16" border="0" align="absmiddle"> Yahoo! UI Library</a></li>
|
||||
<li><a href="http://www.ajaxian.com/" target="_blank"><img src="/blog/images/icons/ajaxian.gif" width="16" height="16" border="0" align="absmiddle"> Ajaxian.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" class="ylayout-inactive-content"></div>
|
||||
<div id="inner1" class="ylayout-inactive-content">
|
||||
<p>This layout uses the gray theme. To make a layout use the gray theme, add the class .ytheme-gray to the body or a container element.</p>
|
||||
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
|
||||
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
|
||||
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
|
||||
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
|
||||
</div>
|
||||
<div id="inner2" class="ylayout-inactive-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
|
||||
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
|
||||
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
124
www/extras/yui-ext/examples/layout/simple.html
Normal file
124
www/extras/yui-ext/examples/layout/simple.html
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Simple Layout</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI utilities file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/layout.css"/>
|
||||
<style type="text/css">
|
||||
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
|
||||
#header{
|
||||
background: url(images/header-bar.gif) repeat-x bottom;
|
||||
border-bottom: 1px solid #083772;
|
||||
padding:5px 4px;
|
||||
}
|
||||
#footer{
|
||||
background: url(images/header-bar.gif) repeat-x bottom;
|
||||
border-top: 1px solid #083772;
|
||||
padding:2px 4px;
|
||||
color:white;
|
||||
font:normal 8pt arial,helvetica;
|
||||
}
|
||||
#nav {
|
||||
background-color:#c3daf9;
|
||||
}
|
||||
#nav, #content {
|
||||
padding:10px;
|
||||
}
|
||||
#content p {
|
||||
margin:5px;
|
||||
}
|
||||
#nav li {
|
||||
padding:2px;
|
||||
padding-left:10px;
|
||||
background-image:url(images/bullet.gif);
|
||||
background-position: -3px 6px;
|
||||
background-repeat: no-repeat;
|
||||
font-size:8pt;
|
||||
display: block;
|
||||
}
|
||||
.ylayout-panel{
|
||||
border:0px none;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
Example = function(){
|
||||
return {
|
||||
init : function(){
|
||||
var layout = new YAHOO.ext.BorderLayout(document.body, {
|
||||
north: {
|
||||
split:false,
|
||||
initialSize: 35
|
||||
},
|
||||
south: {
|
||||
split:false,
|
||||
initialSize: 20
|
||||
},
|
||||
west: {
|
||||
split:false,
|
||||
initialSize: 200,
|
||||
collapsible: false
|
||||
},
|
||||
center: {
|
||||
autoScroll: true
|
||||
}
|
||||
});
|
||||
layout.beginUpdate();
|
||||
layout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true}));
|
||||
layout.add('south', new YAHOO.ext.ContentPanel('footer', {fitToFrame:true}));
|
||||
layout.add('west', new YAHOO.ext.ContentPanel('nav', {fitToFrame:true}));
|
||||
layout.add('center', new YAHOO.ext.ContentPanel('content'));
|
||||
layout.endUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id ="container">
|
||||
<div id="header" class="ylayout-inactive-content">
|
||||
<img src="/blog/images/jsblog.gif" width="160" height="27" alt="Jack Slocum's Blog" border="0"/>
|
||||
</div>
|
||||
<div id="nav" class="ylayout-inactive-content">
|
||||
<ul>
|
||||
<li><a href="http://developer.yahoo.com/yui/" target="_blank"><img src="/blog/images/icons/yahoo.gif" width="16" height="16" border="0" align="absmiddle"> Yahoo! UI Library</a></li>
|
||||
<li><a href="http://www.ajaxian.com/" target="_blank"><img src="/blog/images/icons/ajaxian.gif" width="16" height="16" border="0" align="absmiddle"> Ajaxian.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" class="ylayout-inactive-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
|
||||
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
|
||||
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
|
||||
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
|
||||
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
|
||||
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
|
||||
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
|
||||
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
|
||||
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
|
||||
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
|
||||
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
|
||||
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
|
||||
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
|
||||
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
|
||||
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
|
||||
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
|
||||
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
|
||||
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
|
||||
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
|
||||
</div>
|
||||
<div id="footer" class="ylayout-inactive-content">
|
||||
Copyright 2006 Jack Slocum
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
185
www/extras/yui-ext/examples/resizable/basic.html
Normal file
185
www/extras/yui-ext/examples/resizable/basic.html
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Resizable Examples</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/resizable.css" />
|
||||
|
||||
<script language="javascript" src="basic.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
<style type="text/css">
|
||||
#basic, #animated {
|
||||
border:1px solid #c3daf9;
|
||||
color:#1e4e8f;
|
||||
font:bold 14px tahoma,verdana,helvetica;
|
||||
text-align:center;
|
||||
padding-top:20px;
|
||||
}
|
||||
#snap {
|
||||
border:1px solid #c3daf9;
|
||||
overflow:hidden;
|
||||
}
|
||||
#custom {
|
||||
cursor:move;
|
||||
}
|
||||
#custom-rzwrap{
|
||||
z-index: 100;
|
||||
}
|
||||
#custom-rzwrap .yresizable-handle{
|
||||
width:11px;
|
||||
height:11px;
|
||||
background:transparent url(../../resources/images/sizer/square.gif) no-repeat;
|
||||
margin:0px;
|
||||
}
|
||||
#custom-rzwrap .yresizable-handle-east, #custom-rzwrap .yresizable-handle-west{
|
||||
top:45%;
|
||||
}
|
||||
#custom-rzwrap .yresizable-handle-north, #custom-rzwrap .yresizable-handle-south{
|
||||
left:45%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="example-info">
|
||||
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".
|
||||
</div>
|
||||
<h1>Resizable Examples</h1>
|
||||
<p>These examples show how to apply a floating (default) and pinned Resizable component to a standard element.</p>
|
||||
<p>Note that the js is not minified so it is readable. See <a href="basic.js">basic.js</a> for the full source code.</p>
|
||||
|
||||
<p>
|
||||
<b>Basic Example</b><br />
|
||||
This is a basic as you get. To resize the box, position your mouse anywhere near the bottom,
|
||||
right or border right edge of the box. This example uses the default "floating" handles.
|
||||
</p>
|
||||
<div id="basic">Resize Me!</div>
|
||||
<pre class="code"><code>var basic = new YAHOO.ext.Resizable('basic', {
|
||||
width: 200,
|
||||
height: 100,
|
||||
minWidth:100,
|
||||
minHeight:50
|
||||
});</code></pre>
|
||||
<hr>
|
||||
<p>
|
||||
<b>Wrapped Elements</b><br />
|
||||
Some elements such as images and textareas don't allow child elements. In the past, you had
|
||||
to wrap these elements and set up a Resizable with resize child. As of yui-ext .33 RC2, Resizable will
|
||||
wrap the element, calculate adjustments for borders/padding and offset the handles for you. All you have to
|
||||
do is set "wrap:true". The manual way of specifying a "resizeChild" is still supported as well.
|
||||
</p><p>
|
||||
<b>Pinned Handles</b><br />
|
||||
Notice this example has the resize handles "pinned". This is done by setting "pinned:true".
|
||||
</p><p>
|
||||
<b>Dynamic Sizing</b><br />
|
||||
If you don't like the proxy resizing, you can also turn on dynamic sizing. Just set "dynamic:true".
|
||||
</p>
|
||||
<p>
|
||||
Here's a textarea that is wrapped, has pinned handles and has dynamic sizing turned on.
|
||||
</p>
|
||||
<textarea id="dwrapped">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa.
|
||||
Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.
|
||||
</textarea><br /><br />
|
||||
And look how simple the code is, even my grandma could write it.
|
||||
<pre class="code"><code>var dwrapped = new YAHOO.ext.Resizable('dwrapped', {
|
||||
wrap:true,
|
||||
pinned:true,
|
||||
width:450,
|
||||
height:150,
|
||||
minWidth:200,
|
||||
minHeight: 50,
|
||||
dynamic: true
|
||||
});</code></pre>
|
||||
<hr>
|
||||
<p>
|
||||
<b>Preserve Ratio</b><br />
|
||||
For some things like images, you will probably want to preserve the ratio of width to height. Just set preserveRatio:true.
|
||||
</p>
|
||||
<img id="wrapped" src="sara.jpg" width="200" height="250"/>
|
||||
<pre class="code"><code>var wrapped = new YAHOO.ext.Resizable('wrapped', {
|
||||
wrap:true,
|
||||
pinned:true,
|
||||
minWidth:50,
|
||||
minHeight: 50,
|
||||
preserveRatio: true
|
||||
});</code></pre>
|
||||
<hr>
|
||||
<p>
|
||||
<b>Transparent Handles</b><br />
|
||||
If you just want the element to be resizable without any fancy handles, set transparent to true.
|
||||
</p>
|
||||
<img id="transparent" src="zack.jpg" width="100" height="176"/>
|
||||
<pre class="code"><code>var transparent = new YAHOO.ext.Resizable('transparent', {
|
||||
wrap:true,
|
||||
minWidth:50,
|
||||
minHeight: 50,
|
||||
preserveRatio: true,
|
||||
transparent:true
|
||||
});</code></pre>
|
||||
<hr>
|
||||
<p>
|
||||
<b>Customizable Handles</b><br />
|
||||
Resizable elements are resizable 8 ways. 8 way resizing for a static positioned element will cause the element to be positioned relative and taken out of the document flow. For resizing which adjusts the
|
||||
x and y of the element, the element should be positioned absolute. You can also control which handles are displayed by setting the "handles" attribute.
|
||||
The handles are styled using CSS so they can be customized to look however you would like them to.
|
||||
</p>
|
||||
<p>
|
||||
This image has 8 way resizing, custom handles, is draggable and 8 way preserved ratio (that wasn't easy!).<br />
|
||||
<b>Double click anywhere on the image to hide it when you are done.</b>
|
||||
</p>
|
||||
<img id="custom" src="sara_and_zack.jpg" width="200" height="152" style="position:absolute;left:0;top:0;"/>
|
||||
<div style="padding:8px;border:1px solid #c3daf9;background:#d9e8fb;width:150px;text-align:center;"><button id="showMe">Show Me</button></div>
|
||||
<pre class="code"><code>var custom = new YAHOO.ext.Resizable('custom', {
|
||||
wrap:true,
|
||||
pinned:true,
|
||||
minWidth:50,
|
||||
minHeight: 50,
|
||||
preserveRatio: true,
|
||||
dynamic:true,
|
||||
handles: 'all', // shorthand for 'n s e w ne nw se sw'
|
||||
draggable:true
|
||||
});</code></pre>
|
||||
<hr>
|
||||
<p>
|
||||
<b>Snapping</b><br />
|
||||
Resizable also supports basic snapping in increments.
|
||||
</p>
|
||||
<div id="snap"></div>
|
||||
<pre class="code"><code>var snap = new YAHOO.ext.Resizable('snap', {
|
||||
pinned:true,
|
||||
width:250,
|
||||
height:100,
|
||||
handles: 'e',
|
||||
widthIncrement:50,
|
||||
minWidth: 50,
|
||||
dynamic: true
|
||||
});
|
||||
</code></pre>
|
||||
Warning: Snapping and preserveRatio conflict and can not be used together.
|
||||
<hr>
|
||||
<p>
|
||||
<b>Animated Transitions</b><br />
|
||||
Resize operations can also be animated. Animations support configurable easing and duration.
|
||||
Here's a very basic clone of the first element, but with animation turned on. I used a "backIn"
|
||||
easing and made it a little slower than default.
|
||||
</p>
|
||||
<div id="animated">Animate Me!</div>
|
||||
<pre class="code"><code>var animated = new YAHOO.ext.Resizable('animated', {
|
||||
width: 200,
|
||||
height: 100,
|
||||
minWidth:100,
|
||||
minHeight:50,
|
||||
animate:true,
|
||||
easing: YAHOO.util.Easing.backIn,
|
||||
duration:.6
|
||||
});</code></pre>
|
||||
Warning: for obvious reasons animate and dynamic resizing can not be used together.
|
||||
</body>
|
||||
</html>
|
||||
82
www/extras/yui-ext/examples/resizable/basic.js
vendored
Normal file
82
www/extras/yui-ext/examples/resizable/basic.js
vendored
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
var ResizableExample = {
|
||||
init : function(){
|
||||
|
||||
var basic = new YAHOO.ext.Resizable('basic', {
|
||||
width: 200,
|
||||
height: 100,
|
||||
minWidth:100,
|
||||
minHeight:50
|
||||
});
|
||||
|
||||
var animated = new YAHOO.ext.Resizable('animated', {
|
||||
width: 200,
|
||||
pinned: true,
|
||||
height: 100,
|
||||
minWidth:100,
|
||||
minHeight:50,
|
||||
animate:true,
|
||||
easing: YAHOO.util.Easing.backIn,
|
||||
duration:.6
|
||||
});
|
||||
|
||||
var wrapped = new YAHOO.ext.Resizable('wrapped', {
|
||||
wrap:true,
|
||||
pinned:true,
|
||||
minWidth:50,
|
||||
minHeight: 50,
|
||||
preserveRatio: true
|
||||
});
|
||||
|
||||
var transparent = new YAHOO.ext.Resizable('transparent', {
|
||||
wrap:true,
|
||||
minWidth:50,
|
||||
minHeight: 50,
|
||||
preserveRatio: true,
|
||||
transparent:true
|
||||
});
|
||||
|
||||
var custom = new YAHOO.ext.Resizable('custom', {
|
||||
wrap:true,
|
||||
pinned:true,
|
||||
minWidth:50,
|
||||
minHeight: 50,
|
||||
preserveRatio: true,
|
||||
handles: 'all',
|
||||
draggable:true,
|
||||
dynamic:true
|
||||
});
|
||||
var customEl = custom.getEl();
|
||||
|
||||
customEl.on('dblclick', function(){
|
||||
customEl.hide(true);
|
||||
});
|
||||
customEl.hide();
|
||||
|
||||
getEl('showMe').on('click', function(){
|
||||
customEl.center();
|
||||
customEl.show(true);
|
||||
});
|
||||
|
||||
var dwrapped = new YAHOO.ext.Resizable('dwrapped', {
|
||||
wrap:true,
|
||||
pinned:true,
|
||||
width:450,
|
||||
height:150,
|
||||
minWidth:200,
|
||||
minHeight: 50,
|
||||
dynamic: true
|
||||
});
|
||||
|
||||
var snap = new YAHOO.ext.Resizable('snap', {
|
||||
pinned:true,
|
||||
width:250,
|
||||
height:100,
|
||||
handles: 'e',
|
||||
widthIncrement:50,
|
||||
minWidth: 50,
|
||||
dynamic: true
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);
|
||||
BIN
www/extras/yui-ext/examples/resizable/sara.jpg
Normal file
BIN
www/extras/yui-ext/examples/resizable/sara.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
www/extras/yui-ext/examples/resizable/sara_and_zack.jpg
Normal file
BIN
www/extras/yui-ext/examples/resizable/sara_and_zack.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
www/extras/yui-ext/examples/resizable/zack.jpg
Normal file
BIN
www/extras/yui-ext/examples/resizable/zack.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
9
www/extras/yui-ext/examples/tabs/ajax1.htm
Normal file
9
www/extras/yui-ext/examples/tabs/ajax1.htm
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
I'm am content loaded via AJAX. I was set up using the UpdateManager and the onActivate event like this:
|
||||
<div style="padding:10px;background:#f1f1f1;"><pre><code>var tab2 = jtabs.addTab('jtabs-2', "Ajax Tab 1");
|
||||
var updater = tab2.getUpdateManager();
|
||||
updater.setDefaultUrl('ajax1.htm');
|
||||
tab2.onActivate.subscribe(updater.refresh, updater, true);
|
||||
</code></pre></div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
|
||||
7
www/extras/yui-ext/examples/tabs/ajax2.htm
Normal file
7
www/extras/yui-ext/examples/tabs/ajax2.htm
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
I'm am content loaded via AJAX. I was set up using the setUrl() method on my YAHOO.ext.TabPanelItem object:
|
||||
<div style="padding:10px;background:#f1f1f1;"><pre><code>var tab3 = jtabs.addTab('jtabs-3', "Ajax Tab 2");
|
||||
tab3.setUrl('ajax2.htm', null, true);
|
||||
</code></pre></div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
|
||||
26
www/extras/yui-ext/examples/tabs/tabs-example.css
Normal file
26
www/extras/yui-ext/examples/tabs/tabs-example.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.list {list-style:square;width:500px;padding-left:16px;}
|
||||
.list li{padding:2px;font-size:8pt;}
|
||||
|
||||
/* hide the tab content while loading */
|
||||
.tab-content{display:none;}
|
||||
|
||||
pre {
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
#tabs1 {width:400px;}
|
||||
#tabs1 .yui-ext-tabbody {border:1px solid #999;border-top:none;}
|
||||
#tabs1 .yui-ext-tabitembody {display:none;padding:10px;}
|
||||
|
||||
#jtabs {width:600px;}
|
||||
#jtabs .yui-ext-tabbody {border:1px solid #999;border-top:none; height:200px;overflow:auto;}
|
||||
#jtabs .yui-ext-tabitembody {display:none;padding:10px;font-size:11px;}
|
||||
|
||||
/* default loading indicator for ajax calls */
|
||||
.loading-indicator {
|
||||
font-size:8pt;
|
||||
background-image:url('../../resources/images/grid/loading.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
padding-left:20px;
|
||||
}
|
||||
33
www/extras/yui-ext/examples/tabs/tabs-example.js
vendored
Normal file
33
www/extras/yui-ext/examples/tabs/tabs-example.js
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
var TabsExample = {
|
||||
init : function(){
|
||||
// basic tabs 1, built from existing content
|
||||
var tabs = new YAHOO.ext.TabPanel('tabs1');
|
||||
tabs.addTab('script', "View Script");
|
||||
tabs.addTab('markup', "View Markup");
|
||||
tabs.activate('script');
|
||||
|
||||
// second tabs built from JS
|
||||
var jtabs = new YAHOO.ext.TabPanel('jtabs');
|
||||
jtabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction.");
|
||||
|
||||
var tab2 = jtabs.addTab('jtabs-2', "Ajax Tab 1");
|
||||
var updater = tab2.getUpdateManager();
|
||||
updater.setDefaultUrl('ajax1.htm');
|
||||
tab2.onActivate.subscribe(updater.refresh, updater, true);
|
||||
|
||||
var tab3 = jtabs.addTab('jtabs-3', "Ajax Tab 2");
|
||||
tab3.setUrl('ajax2.htm', null, true);
|
||||
|
||||
var tab4 = jtabs.addTab('jtabs-4', "Event Tab");
|
||||
tab4.setContent("I am tab 4's content. My content was set with setContent() after I was created. I also have an event listener attached.");
|
||||
tab4.onActivate.subscribe(function(){
|
||||
alert('Tab 4 was activated.');
|
||||
});
|
||||
|
||||
jtabs.addTab('tabs1-5', "Disabled Tab", "Can't see me cause I'm disabled");
|
||||
jtabs.disableTab('tabs1-5');
|
||||
|
||||
jtabs.activate('jtabs-1');
|
||||
}
|
||||
}
|
||||
YAHOO.ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);
|
||||
79
www/extras/yui-ext/examples/tabs/tabs.html
Normal file
79
www/extras/yui-ext/examples/tabs/tabs.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Tabs Example</title>
|
||||
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
|
||||
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css" />
|
||||
|
||||
<script type="text/javascript" src="../../yui-ext.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
|
||||
<script type="text/javascript" src="tabs-example.js"></script>
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css"/>
|
||||
|
||||
<script language="javascript" src="../grid/PropsGrid.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="example-info">
|
||||
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"->"View Source".
|
||||
</div>
|
||||
<h1>Tab Panel Examples</h1>
|
||||
<p>Note that the js and css is not minified so it is readable. See <a href="tabs-example.js">tabs-example.js</a> for the tab creation code
|
||||
and <a href="tabs-example.css">tabs-example.css</a> for the css.</p>
|
||||
|
||||
<h3>Tabs without fixed height that resize to the content. Built from existing markup.</h3><br>
|
||||
<!-- container for the existing markup tabs -->
|
||||
<div id="tabs1">
|
||||
<div id="script" class="tab-content">
|
||||
<b>Here's my script:</b>
|
||||
|
||||
<!-- pre sections lookup hideous -->
|
||||
<pre>
|
||||
var tabs = new YAHOO.ext.TabPanel('tabs1');
|
||||
tabs.addTab('script', "View Script");
|
||||
tabs.addTab('markup', "View Markup");
|
||||
tabs.activate('script');</pre>
|
||||
<!-- end pre -->
|
||||
|
||||
</div>
|
||||
<div id="markup" class="tab-content">
|
||||
|
||||
<!-- pre sections lookup hideous -->
|
||||
<pre>
|
||||
<div id="tabs1">
|
||||
<div id="script" class="tab-content">
|
||||
(Content goes here)
|
||||
</div>
|
||||
<div id="markup" class="tab-content">
|
||||
(Content goes here)
|
||||
</div>
|
||||
</div></pre>
|
||||
<!-- end pre -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<h3>Tabs with fixed height that scroll the content. Built entirely with javascript.</h3>
|
||||
<ul class="list">
|
||||
<li>Tab 1 is a normal tab with content passed when adding it.</li>
|
||||
<li>Tab 2 is loaded via Ajax. It was set up using the standard UpdateManager functionality. It reloads it's content every time it's activated.</li>
|
||||
<li>Tab 3 is loaded via Ajax too. It was set up using setUrl() a convenience method that will do everything done on tab 2 and also has the ability to set it to load only once.</li>
|
||||
<li>Tab 4 has an event listener attached.</li>
|
||||
<li>Tab 5 is disabled.</li>
|
||||
</ul><br>
|
||||
|
||||
<!-- container for the pure JS tabs -->
|
||||
<div id="jtabs" class="xp">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue