Sharing Ideas And Solutions Our Newsletter Downloadable Solutions PHP Classes For Small & Medium Enterprise Free For Non-Profit Organization Customer Feedback Contact Us Featured Web Template View More Templates MasRizal In Numbers * 25 years in business. * 6856 corporations in 67 countries have chosen our products and service. * 73.20% are using more than one solutions from us. - MasRizal & Partners -Enhancing Business With Trust CF_Tab Custom Tag: CF_Tab Version: 1.0(c) 2005, MasRizal rizal.firmansyah@masrizal.com & indra.gunawan@masrizal.com CF_Tab is a custom tag to create tabbed page or tabbed menu instantly without JavaScript knowledge. Features Requirements Usage Application Example
Easy to use, no Javascript knowledge required Cross-browser compatible.
[h1] Tested on Internet Explorer 6, Firefox and Netscape 8.[/h1][h1] Tab content can be any HTML objects including images and Flash object.[/h1][h1] Supports direct content written in the code, or grab from other URL, or even redirect the whole page when tab is being clicked.[/h1][h1] Supports more than one tabs on one page.[/h1][h1] You can even nest those tabs.[/h1][h1] Highly customizable.[/h1][h1] Use text as tabs, text with icons, or even images.[/h1][h1] Can be use as a tabbed page to organize page content.[/h1][h1] Or used as a menu/navigation system.[/h1][h1] [/h1]Supported ColdFusion Server: ColdFusion 5 ColdFusion MX ColdFusion 7 ColdFusion 8 on all platforms Supported browsers: all browsers supporting DOM Tested browsers: Microsoft Internet Explorer 6 Mozilla Firefox 1 Netscape Navigator 8 <cf_tab name="Required. Name for tab container. Must be unique within one page " width="Width of tab in pixels or percent " height="Height of tab in pixels - optional. If omitted cf_tab will be expanded to the max height of each tab content " padding="Optional. Space between the left border to the first tab in pixel" spacing="Optional. Space between each tab in pixel." bgcolor="Tab's background color" border="size of tab's border in pixel" bordercolor="Border's color" tabcolor="Color of tab header. Used when your tab is built using text" tabcolor_over="Color of tab header when mouse is over it. Used when your tab is built using text" fontcolor="Color of text shown in tab header. Used when your tab is built using text" fontface="Font typeface for tab header. Used when your tab is built using text" fontstyle="bold/italic. Used when your tab is built using text" fontsize="font size for tab header" fontcolor_over="font color when mouse over" fontcolor_selected="font color when tab is being selected" fontstyle_selected="bold/italic. Font style when tab is being selected" heightadj_ie="height adjustment in pixels for IE browsers. Use this value to remove unwanted images below each tab header. This number depends on fontface/size/style and icon that is being used in your tab" heightadj_ff="height adjustment in pixels for FF based browsers. Use this value to remove unwanted images below each tab header. This number depends on fontface/size/style and icon that is being used in your tab" LiftActiveTab="0/1. 1 means the selected tab will be lifted up 1 pixel" <cf_tabitem name="Mandatory. Name of tab header (item). Must be unique through out the page. " active="0/1. 1 means this tab can be clicked by the user " label="text to put in tab header. Fill this attribute if you want your tab to be text-base" icon="image to put on the left of label. You may use this if you use text-base tab, and want to add some icon next to it" TabImg="Full path to image file. Use this attribute if you want your tab to be created using image, instead of text-base" TabImg_Over="Full path to image file will be shown when user's mouse is over current tabitem. If this fields is empty, TabImg will be used" TabImg_Selected="Full path to image file will be shown when user's select current tabitem. If this fields is empty, TabImg_over will be used" ContentURL="URL to grab when current tab is being selected. Leave this attribute blank if you want to get the content from 'generated content - text content' below" ClickURL="Redirect to this URL when current tab is being clicked. Leave this blank if you don't need it. Analogue to <a href>" ClickTarget="Target window name to be used when ClickURL is being activated. Analogue to <a target> selected (Add this 'selected' attribute to set current tab as the default tab> Text content. This text will appear within current tab if ContentURL is blank.If ContentURL is being set, this text will be replaced by content from given URL. </cf_tabitem> </cf_tab> This tag is very useful to organize information within your webpages. Using tabbed page like one found in many desktop applications, you can give your user a better understanding on how your site content is organized. Not sure how it can help your user? Take a look at this page.You see 5 tabs: "Features", "Requirements", "Usage", "Application" and "Examples".Easy to understand, right?Imagine if we put all those information into one long list... Below is list of applications where this tag will be useful: CF website that shows a lot of information in one page, such as e-commerce sites, user's directory sites, backend applications. CF website that needs simple and easy-to-use navigation. Almost every major websites such as: Yahoo! Mail, Amazon, Download.com and many others are using tabbed menu for easy navigation on top of their pages. Websites that allows user to enter many information at the same time, such as user's personal info. By using tabbed page, you can group these information into more readable and understandable to the user. We have created 3 types of demo: Text-based tabs Image-based tabs Tabs used as a menu for the whole page. (Open in new window) (Tabbed page powered by CF_Tab) Price License Purchase $50.00 1 Single developer $500.00 1 Site license $750.00 1 Corporate license Licensing Information Goods and services provided by MasRizal Sold by 2CheckOut.com Inc. (Ohio, USA). 2Checkout & MasRizal accepts customer orders via online checks, Visa, MasterCard, Discover, American Express, Dinners, JCB and debit cards with the Visa and MasterCard logo. PayPal and purchasing using your existing bank account are limited to US currency. CF_Tab is available for immediate download. After you complete the order, you will receive a confirmation email with your download link. Please ensure your email address is entered correctly during the order process. Customers Who Purchased CF_Tab Usually Purchased These Products Too 1. CFX_Excel 2. CF_Query2FixWidth 3. CF_FixWidth2Query 4. Query2CSV MX 5. Related Select 6. CF_FlashMultiUpload 7. CF_ZIP 8. Slidebar Menu 9. Watermark Image 10. CSV2Query Why Customers Choose Us Find out why our valued customers choose MasRizal & Partners solutions. Click here to see their reasons Featured Customers More than 6850 companies rely on MasRizal & Partners solutions. Click here to see our featured customers Free For Non-Profit Organization MasRizal Charity program allows eligible nonprofit organizations to get MasRizal's products at no cost. Click here for program detail Testimonials Take the word of our clients Top Selling Products See our top selling products Let Us Help You Can't find solution you need? Click here to get solution from MasRizal.
Cross-browser compatible. Tested on Internet Explorer 6, Firefox and Netscape 8.
Tab content can be any HTML objects including images and Flash object..
Supports direct content written in the code, or grab from other URL, or even redirect the whole page when tab is being clicked.
Supports more than one tabs on one page. You can even nest those tabs.
Highly customizable. Use text as tabs, text with icons, or even images.
Can be use as a tabbed page to organize page content. Or used as a menu/navigation system.
Supported ColdFusion Server:
ColdFusion 5
ColdFusion MX
ColdFusion 7
ColdFusion 8
on all platforms
Supported browsers:
all browsers supporting DOM
Tested browsers:
Microsoft Internet Explorer 6
Mozilla Firefox 1
Netscape Navigator 8
<cf_tab
name="Required. Name for tab container. Must be unique within one page "
width="Width of tab in pixels or percent "
height="Height of tab in pixels - optional. If omitted cf_tab will be expanded to the max height of each tab content "
padding="Optional. Space between the left border to the first tab in pixel"
spacing="Optional. Space between each tab in pixel."
bgcolor="Tab's background color"
border="size of tab's border in pixel"
bordercolor="Border's color"
tabcolor="Color of tab header. Used when your tab is built using text"
tabcolor_over="Color of tab header when mouse is over it. Used when your tab is built using text"
fontcolor="Color of text shown in tab header. Used when your tab is built using text"
fontface="Font typeface for tab header. Used when your tab is built using text"
fontstyle="bold/italic. Used when your tab is built using text"
fontsize="font size for tab header"
fontcolor_over="font color when mouse over"
fontcolor_selected="font color when tab is being selected"
fontstyle_selected="bold/italic. Font style when tab is being selected"
heightadj_ie="height adjustment in pixels for IE browsers. Use this value to remove unwanted images below each tab header. This number depends on fontface/size/style and icon that is being used in your tab"
heightadj_ff="height adjustment in pixels for FF based browsers. Use this value to remove unwanted images below each tab header. This number depends on fontface/size/style and icon that is being used in your tab"
LiftActiveTab="0/1. 1 means the selected tab will be lifted up 1 pixel"
<cf_tabitem
name="Mandatory. Name of tab header (item). Must be unique through out the page. "
active="0/1. 1 means this tab can be clicked by the user "
label="text to put in tab header. Fill this attribute if you want your tab to be text-base"
icon="image to put on the left of label. You may use this if you use text-base tab, and want to add some icon next to it"
TabImg="Full path to image file. Use this attribute if you want your tab to be created using image, instead of text-base"
TabImg_Over="Full path to image file will be shown when user's mouse is over current tabitem. If this fields is empty, TabImg will be used"
TabImg_Selected="Full path to image file will be shown when user's select current tabitem. If this fields is empty, TabImg_over will be used"
ContentURL="URL to grab when current tab is being selected. Leave this attribute blank if you want to get the content from 'generated content - text content' below"
ClickURL="Redirect to this URL when current tab is being clicked. Leave this blank if you don't need it. Analogue to <a href>"
ClickTarget="Target window name to be used when ClickURL is being activated. Analogue to <a target>
selected (Add this 'selected' attribute to set current tab as the default tab>
Text content. This text will appear within current tab if ContentURL is blank. If ContentURL is being set, this text will be replaced by content from given URL.
</cf_tabitem>
</cf_tab>
This tag is very useful to organize information within your webpages. Using tabbed page like one found in many desktop applications, you can give your user a better understanding on how your site content is organized.
Not sure how it can help your user? Take a look at this page. You see 5 tabs: "Features", "Requirements", "Usage", "Application" and "Examples". Easy to understand, right? Imagine if we put all those information into one long list...
Below is list of applications where this tag will be useful:
CF website that shows a lot of information in one page, such as e-commerce sites, user's directory sites, backend applications.
CF website that needs simple and easy-to-use navigation. Almost every major websites such as: Yahoo! Mail, Amazon, Download.com and many others are using tabbed menu for easy navigation on top of their pages.
Websites that allows user to enter many information at the same time, such as user's personal info. By using tabbed page, you can group these information into more readable and understandable to the user.
Goods and services provided by MasRizal
Sold by 2CheckOut.com Inc. (Ohio, USA).
2Checkout & MasRizal accepts customer orders via online checks, Visa, MasterCard, Discover, American Express, Dinners, JCB and debit cards with the Visa and MasterCard logo.
PayPal and purchasing using your existing bank account are limited to US currency.
CF_Tab is available for immediate download.
After you complete the order, you will receive a confirmation email with your download link.
Please ensure your email address is entered correctly during the order process.
Customers Who Purchased CF_Tab Usually Purchased These Products Too
Free For Non-Profit Organization
MasRizal Charity program allows eligible nonprofit organizations to get MasRizal's products at no cost. Click here for program detail