|
You can find the download which goes with this
article in the downloads
section of this site. I will be skipping
any design information I provided in the previous
DHTML articles.
I have taken the previous demos of the menu
system and tabbed tables and merged them together.
You will see from the new combined database
how easy it is to merge these demos into your
own designs.
You will note that I spent less than a second
on choosing colour schemes etc - I hope you
can do better than me. If you come up with half
decent colour combinations, send me screenshots
and css files and I will put them up on this
site - If I had any exclusive ProjectDX.org
mugs I would send them to you! Likewise if you
have been successfull in merging these demos
into your applications - send me the screenshots.
Pages
I have renamed the api javascript to 'myapi.js'
as this now contains both the tabbed tables
and menu code. Likewise the style information
has been merged into the global.css file. This
now puts us in a position to keep adding features
in future articles.
Forms
 |
Again both the forms (web and notes versions)
have been merged together.
For Instructions on how to use, refer
to the previous articles in the series.
You will note I have added a menu item
'print' to the menu system and assigned
the javascript call doPrint(). This new
function has been added to myapi.js.
|
Below you will see the two components working
together with the new 'Print' option in the
menu.
So onto the additional bit - the DoPrint()
function. The principles behind this are to
go through the tabbed tables being used by looping
through the 'DXtabs' object 'tabs' array. Basically
this means that in the DXtabs object there is
an array entitled tabs and you refer to each
tab using the syntax DXtabs.tabs[x].
To find out how many tabs there are in your
tabbed table you can use: DXtabs.tabs.length
You then get a 'handle' to the physical table
within your browser that is used for each tabs
content using the javascript eval()
statement. ie eval("D.DATA"+(x+1)).
Where D comes from our global declaration (var
D=document.all) and DATAx refers to the
ID of the html table.
I have to confess that the eval() method is
not the most efficient javascript call there
is, but as a lot of my older code uses it I
have retained it for now - methods such as getElementById()
are a much better way. I will provide an update
document at some point very soon.
Once we have a handle to each table, we can
use the property 'outerHTML' to retrieve the
html from it. So we loop though all the tables,
and using the variable 'out' we add a title
to each using DXtabs.tabs[x].title (this is
the same title that appears on the tab) and
also add the html contents.
We then open a new browser window using window.open()
and write the contents of our 'out' variable
to that windows .document. We also then loop
through the tables in our new document and set
the font to 'normal 8pt Arial' to make the appearance
more suitable for printing.
When we are done we call the window.print()
method and then the window.close() method to
close it.
function doPrint(){
var out="";var tmp
out+="<span style='visibility:visible'>"
for(var x=0;x<DXtabs.tabs.length;x++){
tmp=eval("D.DATA"+(x+1))
out+="<u><b>"+DXtabs.tabs[x].title+"</b></u><br>"
out+=tmp.outerHTML
out+="<br>"
}
out+="</span>"
var gd=window.open('','','menubar,scrollbars,width=750px,height=500px,left='
+ screen.availWidth + '; top=' + screen.availHeight)
var m=gd.document
m.write(out)
m.close()
for(var x=0; x<DXtabs.tabs.length; x++){
tmp=eval("m.all.DATA"+(x+1))
tmp.style.visibility='visible'
tmp.style.font='normal 8pt Arial'
}
gd.print()
gd.close()
}
Questions? -
steve.castledine@projectdx.org
|
