Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Web Experience Factory wiki
  • All Wikis
  • All Forums
  • ANNOUNCEMENT: Wiki changed to read-only. READ MORE...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > Samples and techniques > Page Tabs With Close Buttons
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileMartin T Romano
Contribution Summary:
  • Articles authored: 4
  • Articles edited: 6
  • Comments Posted: 1

Recent articles by this author

Expand/Collapse Without Collapsible Section or Category View

h3 Overviewh3 The Collapsible Section and Category View builders perform some nice automation for you, but sometimes you want more control andor the ability to work around limitations in these builders. It turns out that building a collapseexpand UI using base Portlet Factory builders is ...

Accessing Variables From JavaScript

There are a number of techniques that can be used to access the values of serverresident variables or methods from clientside JavaScript code. These techniques fall into two main categories: embedding variable values in script code as the page is being rendered using an Ajaxlike call to fetch ...

Page Tabs With Close Buttons

h2 Overview h2 br This sample shows a techique for modifying the output of the Page Tabs builder to add a button to each tab that can "close" that tab, along with a way to restore all closed tabs. Here's a picture of the model in action: br {{pic1.gif Screenshot of the Output of ...

Techniques for building a controller model using Model Container and events

h2 Background information h2 br This sample demonstrates a number of techniques that can be helpful when building a model that uses multiple child models using the Model Container builder. br Sample description br The attached package includes a master modelportlet ...
Community articlePage Tabs With Close Buttons
Added by Martin T Romano | Edited by IBM contributorRob Flynn on January 4, 2010 | Version 3
expanded Abstract
collapsed Abstract
No abstract provided.
Tags: Code samples

Overview


This sample shows a techique for modifying the output of the Page Tabs builder to add a button to each tab that can "close" that tab, along with a way to restore all closed tabs. Here's a picture of the model in action:



This model uses a Visibility Setter to control whether each tab is shown, and tracks the visibility state of the tabs using a Java map as a Linked Java Object. The close button is inserted into the tab using an Image Button using a modified page location. Some wrapper HTML - used to make the button and tab text appear on one line - is also added using non-default page locations.


Download


Download sample model and images.

expanded Attachments (0)
collapsed Attachments (0)
expanded Versions (7)
collapsed Versions (7)
Version Comparison     
VersionDateChanged by              Summary of changes
7Aug 2, 2010, 10:31:24 AMKeshi Dai  
6Aug 2, 2010, 10:31:10 AMKeshi Dai  
5Aug 2, 2010, 10:30:20 AMKeshi Dai  
4Jan 15, 2010, 5:25:29 PMRob Flynn  IBM contributor
This version (3)Jan 4, 2010, 8:55:14 AMRob Flynn  IBM contributor
2Oct 27, 2008, 2:36:42 PMDeAnna Steiner  IBM contributor
1Oct 6, 2008, 3:06:42 PMMartin T Romano  IBM contributor
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • BlogsIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • Wiki design feedback
  • Content feedback
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use