![]() | ||||||||||
| ||||||||||
The following "10 steps" instruction will guide you step by step through the CodeThatTab configuration process. | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
For free version (STD) download use this link. If you'd like to buy full version (PRO) use this link. Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type. Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.
| ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
Your file may look as following: <HTML> <HEAD> <script language="javascript1.2" src="codethatsdk_std_unreg.js"></script> <script language="javascript1.2" src="../Scripts/codethattabstd.js"></script> </HEAD> <BODY> <p> HELLO WORLD! </BODY> </HTML> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
<script language="javascript"> var ts = new CTabSet("ts"); ts.create(TabDef); </script> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant. To describe new tab create an object with following structure:
var TabDef = { "x": int "y": int "width" : int "height" : int "offset" : int "padding": int "spacing": int "align": String "layout": String "border" : { }, "css" : String, "cssover" : String, "csscurr" : String, "csshint" : String, "tabs" : [] }; Hint - if parameters description isn't clearly understanding please have a look to CodeThatTab User Manual | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
For this purpose you can both create separate stylesheet *.css file or write the css definition construction right to your *.html file. Here we will view second variant. <style> .over{color:#000080; background-color:#ffffcc; font-family:Verdana;font-size:12px;} .def{color:#ff0000; background-color:#ffffff; font-family:Verdana;font-size:12px;} .curr0{color:#000000; background-color:#ffffee; font-family:Verdana;font-size:12px;} .curr1{color:#0000ff; background-color:#eaeaff; font-family:Verdana;font-size:12px;} .curr2{color:#008000; background-color:#FFE6E6; font-family:Verdana;font-size:12px;} .curr3{color:#ff0000; background-color:#DFFFDF; font-family:Verdana;font-size:12px;} </style> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
Add tabs in your tab control. The tabs array consists of tab object with following structure: { "text" : String, "hint" : String, "action" : {}, "width" : int, "height" : int, "border" : {}, "css" : String, "cssover" : String, "csscurr" : String, "csshint" : String } | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
<style> .over{color:#000080; background-color:#ffffcc; font-family:Verdana;font-size:12px;} .def{color:#ff0000; background-color:#ffffff; font-family:Verdana;font-size:12px;} .curr0{color:#000000; background-color:#ffffee; font-family:Verdana;font-size:12px;} .curr1{color:#0000ff; background-color:#eaeaff; font-family:Verdana;font-size:12px;} .curr2{color:#008000; background-color:#FFE6E6; font-family:Verdana;font-size:12px;} .curr3{color:#ff0000; background-color:#DFFFDF; font-family:Verdana;font-size:12px;} </style> <script> var tabDef = { x : 10, y : 50, width : 450, height : 140, offset : 0, spacing : 10, padding : 5, layout: 'top', border: {width:1, color:'#000000'}, cssover: 'over', css : 'def', tabs:[ { text:"CodeThat.com", hint:"is the ultimate source of the high-quality, cutting-edge web technologies. In particular, we offer a JavaScript menu, a JavaScript tree, and other scripts, which can be easily integrated into almost any site providing visitors with a fast, high-quality navigation system. We offer freeware and commercial versions of our scripts so that anybody from students to big corporations can benefit from using our first-class solutions.", csscurr:'curr0', css:'curr0' }, { text:"What's New", hint:'<li>Now you have a possibility to export only that rows where data was changed <li>You can use user-defined functions for auto-filled columns creation <li> You can perform search in grid right from url <li>You can hide cells with rows/columns names ', csscurr:'curr1', css:'curr1' }, { text:"What's Hot", hint:'Visit our <a href="http://www.codethat.com">Hot</a> section for a list of CodeThat.Com scripts that are popular to the visitors.', csscurr:'curr2', css:'curr2' }, { text:"Search", hint:'<form action="http://www.google.com/search" method="get" onSubmit="this.q.value=\'site:www.codethat.com \ '+this.qfront.value"><p>Search CodeThat.Com:<br /><input name="q" type="hidden" /> <input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></form>', csscurr:'curr3', css:'curr3' } ] }; var ts = new CTabSet("ts"); ts.create(tabDef); </script> Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :) | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
To make your life easier we do plan to supply you with on and off line tab builders in the nearest time. Try an Example >> [popup] | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() |