View Full Version : How to open tab from a simple link?

10 Nov 2006, 8:41 AM
Hello All!

I use the Feed Viewer 2.0 example to build my app layout, but how to open a page in a new tab from a text link or button?



10 Nov 2006, 9:08 AM
Attach a hander to the link or button that will open it using an iframe. For an example of creating the iframe, the feed viewer does it. To rewrite all the links in the panel to call a function to open an iframe instead of opening the default link:

There's the quick way:
(This is using the newest RC1 code + cssQuery (6kb) included before yui-ext)
// you could also filter by specific class or attributes

panel.getEl().select('a', true).mon('click', function(e){

And the long way would be using panel.getEl().dom.getElementsByTagName('a'), looping through all of them and doing the same thing.

You could also (and this would net the best performance for startup, but is less flexible and always listening for clicks) attach a listener to the main element:

panel.getEl().mon('click', function(e){
var a = e.findTarget(null, 'a');
if(a){ // if it was a link they clicked on

10 Nov 2006, 11:03 AM
Hello Jack,

How to attach a hander to a link (<a href= ...)?
cssQuery is included in YUI-EXT?

I have an vertical menu links in the "west" and I need to open the content in the tabs in "center". (similar to new Yahoo! webmail)

Is possible to create a vertical toolbar using YAHOO.ext.Toolbar ?



10 Nov 2006, 8:06 PM
As for the vertical toolbar, not currently. It could probably be added very easily though. The toolbar class is very simple.

Take a look at the blog post that says "Zebra Stripes" at the end. It has a link to cssQuery that has a free download and also has a reference of all the different CSS3 selectors that are supported.

13 Nov 2006, 9:35 AM
Hello Jack,

I have a simple menu list:
option 1 (#)
option 2 (#)
How to open an tab to each menu option?
In your feed reader example all links are captured, I need only the menu links.

14 Nov 2006, 7:32 AM
I do it this way.. taking your example:


<ul id="myulid">
<a id="option1">option 1</a>
<a id="option2">option 2</a>


var Page = function() {
var layout;

return {
init : function() {
// border layout stuff
layout = new YAHOO.ext.BorderLayout(.....);

// monitor click events on the ul
var ullist = getEl('myulid');
ullist.mon('click', this.myulclick);

myulclick : function(e) {
var target = e.findTarget(null, 'a');
if( target ) {
// check to see if the panel is already open
if( !layout.findPanel(somePanelId) ) {
// target.id would be 'option1' if that was clicked
var someLink = '/somepage.php?pageid=' + target.id;

// create new tab in center frame
var iframe = YAHOO.extDomHelper.append(document.body, {id:somePanelId, tag: 'iframe', src: someLink});
layout.add('center', new YAHOO.extContentPanel(iframe, {title: something});
} else {
// bring panel to front focus

YAHOO.ext.EventManager.onDocumentReady(Page.init, Page, true);

24 Nov 2006, 8:28 PM
can't you give me some sample zip file because i don't understand