Who to get the tab Index of the right clicked tab that fires the Tab context-menu. Tab is NOT the active tab (not the selectedIndex)?
As an example. "Close Tabs to the Right" in Tab context menu works regardless of which tab (active/not-active) tab is right-clicked. How does it get the correct tab index?
Listen for for the popupshown event of the tabContextMenu element.
Since this a restartless addon I assume that you already have a reference to the ChromeWindow.
var tabContextMenu = chromewin.document.getElementById("tabContextMenu");
tabContextMenu.addEventListener("popupshown", function(){
var rightclickedtab = chromewin.TabContextMenu.contextTab;
// now proceed as you wish
}, false);
You can also add your own menu item and listen for its command event.
In any case, remember to cleanup when your extension gets unloaded.
What about on click take the event.target, which is the tab element, then loop through the parentNode of that tab element which has childNoedes of the tabs. then find your event.target in there?
So lick add on click listeners and do this:
var foundAtIndex = -1;
var tab = event.target;
var tabContainer = tab.parentNode;
var tabs = tabContainer.childNodes;
for (var i=0; i<tabs.length; i++) {
if (tabs[i] == tab) {
foundAtIndex = i;
break;
}
}
if (foundAtIndex !== -1) {
console.error('very weird, tab not found');
} else {
console.info('tab found at index:', foundAtIndex);
}
Related
I have created a Vaadin (7.4.3) accordion with a number of captions/tabs.
I need to be able to select a tab and check the contents within that tab.
However in the code below, even though the tab is found, the click() function
does not expand the tab and the contents of the tab remain unobtainable.
How can I check the contents of the tabs in an accordion?
Thank you...
List<WebElement> tabList = findElements(By.className("v-accordion-item"));
WebElement selectedTab = null;
for (WebElement tab : tabList) {
List<WebElement> captionElements = tab.findElements(By
.className("v-captiontext");
if (captionElements.size() > 0) {
if (captionElements.get(0).getText().equals("Caption_of_tab_to_be_checked")) {
// this is run
selectedTab = tab;
break;
}
}
}
selectedTab.click(); // the accordion does not open this tab and contents are still hidden???
TabSheetElement
tabSheetElement=$(TabSheetElement.class).id(TAB_AUTOMATIC_EMAIL);
tabSheetElement.openTab(2);
the Same you can check for multiple Tabs by adding click(); at last for example
tabSheetElement.openTab(2).click();
In a Firefox AddOn, is there a way to get a window object from a tab object? Or vice versa? For instance, if I get a TabClose event, is there a way to get the associated window object?
Yes in TabClose the event argument holds a lot of useful stuff:
function tabclosee(e) {
console.error('TabClose, e:', e);
}
gBrowser.tabContainer.addEventListener("TabAttrModified", tabclosee, false);
So in this image we see that e.view is the DOMWindow (xul window/chrome window). The target is the tab element, in the close situation the HTMLWindow was destoryed so e.target.linkedBrowser will be null, but in TabSelect it won't be null and you can access the html window like e.target.linkedBrowser.contentWindow
If you want window from tab object you can do this too: e.target.ownerDocument.defaultView, this is the same as doing e.view above.
From window you can access all tabs like this:
if (aDOMWindow.gBrowser && aDOMWindow.gBrowser.tabContainer) {
var tabs = aDOMWindow.gBrowser.tabContainer.childNodes;
for (var t=0; t<tabs.length; t++) {
var tab = tabs[t];
var tab_linkedBrowser = tab.linkedBrowser;
var tab_htmlWin = tab.linkedBrowser.contentWindow;
}
}
I'm using jquery tab and following js method, how and what can i modify it to maintain state of tab between postbacks? (This resets tabs to first tab after page_load)
$(document).ready(function() { //When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content return false; });
I ran across this problem when I first started using jQuery. My solution was to use an <asp:HiddenField /> to store the active tab index on tabselect.
ASP.Net allows client-side code to modify an <asp:HiddenField /> so it will retain its value across postbacks.
On document.ready, simply restore the active tab by setting the selected tab during intialization:
Example:
$('div#divMyTabs').tabs({
selected: function () {
var tabFromPostback = $('input#<%=hfActiveTab.ClientID %>').val();
return tabFromPostback === '' ? 0 : tabFromPostback; //Default to first.
},
select: function (e, ui) {
$('input#<%=hfActiveTab.ClientID %>').val(ui.index);
}
});
I am using the Application Layout control and have tabs in the TitleBar. I want to change the style of the tab if it is selected. I am currently doing it by comparing the value of the tab to a sessionScope variable I am setting when the tab is clicked.
I saw something (though I can't find it now) about using the Selected property of the Basic Node I am using for the tab. How would I access that in SSJS so that I can do something like this?
if(thisnode.selected) {
return "lotusTabs liActive";
} else {
return "lotusTabs li";
}
Thanks.
You can also access the tabs programmatically:
var layout = getComponent("layoutId");
var selectedTab = null;
var tabs = layout.getConfiguration().getTitleBarTabs();
for (var tab in tabs) {
if (tab.getSelected()) {
selectedTab = tab;
}
}
The following CSS rule will target the selected title tab:
div.lotusTitleBar ul.lotusTabs li.lotusSelected {
// your code here
}
This post talks about the problem that jQuery tabs is still having with the back button. What the customer needs is fairly simple - when they press back, they want to go back to what they were just looking at. But jQuery tabs loads the first tab, not the one that was selected when the user left the page.
I've read the accompanying link and it says "It is planned and Klaus is working on it whenever he finds the time."
Has anyone solved the back button problem with jQuery UI tabs?
Using the solution to the history problem easement posted, a dirty fix for the back button problem would be to periodically check the location.hash to see if it has changed, and if it has, fire the click event of the appropriate link.
For example, using the zachstronaut.com updated jQuery Tabs Demo, you could add this to the $(document).ready callback, and it would effectively enable the back button to switch tabs, with no more than a 500ms delay:
j_last_known_hash = location.hash;
window.setInterval(function() {
if(j_last_known_hash != location.hash) {
$('#tabs ul li a[href="'+ location.hash +'"]').click();
j_last_known_hash = location.hash;
}
}, 500);
Have you tired updating the browsers location as you switch tabs?
http://www.zachstronaut.com/posts/2009/06/08/jquery-ui-tabs-fix.html
if you had a class on your tab container that was tabContainer, to update the url when user clicks a tab, you could do this:
$(".tabContainer").tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
then, instead of firing click, you could use the tabs select method if you have some getIndexForHash method that can return the right tab number for the selected hash value:
var j_last_known_hash = location.hash;
window.setInterval(function() {
var newHash = location.hash;
if(j_last_known_hash != newHash) {
var index = getIndexForHash(newHash);
$('.tabContainer').tabs("select",index);
j_last_known_hash = newHash;
}
}, 100);
window.onhashchange = function () {
const $index = $('a[href="' + location.hash + '"]').parent().index();
$('.tabContainer').tabs('option', 'active', $index);
}