Run BASIC
« Tab Menu Bar »

Welcome Guest. Please Login or Register.
Dec 8, 2009, 6:05pm

[Home] [Help] [Search] [Login] [Register]


Run BASIC
Run BASIC Community Wiki
Easy Web Programming with Run BASIC

Run BASIC :: Run BASIC Programming :: Run BASIC Code :: Tab Menu Bar
   [Search This Thread][Send Topic To Friend] [Print]
AuthorTopic: Tab Menu Bar (Read 272 times)
kokenge
Full Member
***
member is offline





Joined: Jan 2009
Gender: Male
Posts: 153
Karma: 2
Tab Menu Bar
« Thread Started on Mar 23, 2009, 9:05am »
We all read the JavaScript code needed to create a tabbed menu bar to run applications. Usually it's huge, and complex.

It's simple in RB.
No JS needed.

Maybe someone will publish this in the RB Wiki.


' -------------------------------------
' Menu Tab Bar
' -------------------------------------
bf$	= "<SPAN STYLE='font-family:Arial; font-weight:700; font-size:10pt'>"

cssclass "#ta", "td { border-width: medium; border-bottom  : 2px solid black; }"

CSSClass "a.close", "{
Text-Align	: Center;
border-top	: 2px solid black;
border-left	: 2px solid black;
border-right	: 2px solid black;
border-bottom	: 2px solid black;
Font-Size	: 10pt;
Font-Weight	: Bold;
Font-Family	: Arial;
Text-Decoration	: None;}"

CSSClass "a.open", "{
Text-Align	:Center;
background-color: tan;
border-top	: 2px solid black;
border-left	: 2px solid black;
border-right	: 2px solid black;
border-bottom	: 2px solid tan;
Font-Size	: 10pt;
Font-Weight	: Bold;
Font-Family	: Arial;
Text-Decoration	: None;}"

menuNum = 0
[main]
cls
div ta
html bf$;"<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 width=100% ><TR align=center>"
for i = 1 to 10
	html "<TD>"
	link #h, " Menu ";i;" ", [doMenu]
	if menuNum <> i then
		#h CSSClass("close")
	   else
		#h CSSClass("open")
	end if
	html "</TD>"
	#h setkey(str$(i))
next i

html "</TR><TR bgcolor=tan align=center>"
for i = 1 to 10
	html "<TD>"
	if menuNum = i then
		for j = 1 to 5
			prog$	= " Program";i;j
			button #runit, prog$, [runIt]
				#runit setkey(prog$)
		next j
	end if
	html " </TD>"
next i

html "</TR></TABLE>"
end div
wait

[doMenu]
menuNum = val(EventKey$)
goto [main]
wait

' -------------------------------------------
'      Run program
' -------------------------------------------
[runIt]
cls
prog$ = EventKey$ + ".bas"

html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100% bgcolor=wheat><TR><TD align=center>"
button #rtna, "Exit ";prog$ ,[main]
html "</TD></TR></TABLE>"

' commented out actual run commands
'run prog$,#r
'render #r
html bf$;"RUN :";prog$
wait

Link to Post - Back to Top  IP: Logged
StefanPendl
Global Moderator
*****
member is offline

[avatar]

Run for BASIC ...



Joined: Aug 2007
Gender: Male
Posts: 555
Location: Austria
Karma: 4
Re: Tab Menu Bar
« Reply #1 on Mar 24, 2009, 3:15am »

Mar 23, 2009, 9:05am, kokenge wrote:
We all read the JavaScript code needed to create a tabbed menu bar to run applications. Usually it's huge, and complex.

It's simple in RB.
No JS needed.

Maybe someone will publish this in the RB Wiki.

Nice effect ;)

You are welcome to publish your code on the wiki, we use it to enable all members to publish there.
Link to Post - Back to Top  IP: Logged
---
Stefan

Any code I post can be used by others in their own projects, there is no need to ask for permission, just give credit if you like

Run BASIC 1.01, FF3.5 (IE8), Windows Vista Home Premium SP2, AMD Turion X2 RM-70 2GHz, 4GB RAM
rich357
Senior Member
****
member is offline





Joined: Nov 2007
Gender: Male
Posts: 320
Karma: 2
Re: Tab Menu Bar
« Reply #2 on Mar 24, 2009, 10:15pm »
Nice and simple coding.
Try using <ul><li> instead of a table.
Don't move the menu items, just box and highlight them.
Link to Post - Back to Top  IP: Logged
rich357
Senior Member
****
member is offline





Joined: Nov 2007
Gender: Male
Posts: 320
Karma: 2
Re: Tab Menu Bar
« Reply #3 on Mar 25, 2009, 12:32am »
Well try out this version then. Basically the same effect but the second level menu appears directly under where you clicked on the top level menu.


8-)
Code:

global doit

cssclass "input.year","{width:6em; }"
cssclass "input.pick","{width:6em; }"
[start]


for n=60 to 69
a$="19"+str$(n)
button #yr,a$,[level2]
#yr setkey(a$)
#yr cssclass("year")

next n




wait


[level2]
cls
b$=right$((EventKey$),2)
doit=val(b$)

html "<table>"
html "<tr>"

for n=60 to 69
html "<td valign='top'>"
a$="19"+str$(n)
button #yr,a$,[level2]
#yr setkey(a$)
#yr cssclass("year")

if n=doit then
print
button #one, "Songs",[level2]
#one cssclass("pick")
print
button #one, "Artists",[level2]
#one cssclass("pick")
print
button #one, "Top 100",[level2]
#one cssclass("pick")
print

end if
html "</td>"
next n

html "</tr>"
html "</table>"

wait







[subroutines]

Link to Post - Back to Top  IP: Logged
kokenge
Full Member
***
member is offline





Joined: Jan 2009
Gender: Male
Posts: 153
Karma: 2
Re: Tab Menu Bar
« Reply #4 on Mar 25, 2009, 4:51am »
I guess the idea was to make a menu bar with tabs.
It is directly under the tab. You can make it vertical under the tab if you like.
Link to Post - Back to Top  IP: Logged
stormforce5
New Member
*
member is offline





Joined: Aug 2009
Gender: Male
Posts: 8
Karma: 0
Re: Tab Menu Bar
« Reply #5 on Aug 17, 2009, 4:26pm »
I was playing around with using some of the code from the calculator program to make a tab menu.... this might be of use to someone???



'tab menu

call setCSS

[display]

cls
tab.sel=0
gosub [displaytabs]
wait

[displaytabs]
div tab.menu
link #item1, "Laptops", [item1]
link #item2, "PC's", [item2]
link #item3, "Printers", [item3]
link #item4, "Network", [item4]

if tab.sel=1 then
#item1 cssclass("calcButtonsel")
else
#item1 cssclass("calcButton")
end if

if tab.sel=2 then
#item2 cssclass("calcButtonsel")
else
#item2 cssclass("calcButton")
end if

if tab.sel=3 then
#item3 cssclass("calcButtonsel")
else
#item3 cssclass("calcButton")
end if

if tab.sel=4 then
#item4 cssclass("calcButtonsel")
else
#item4 cssclass("calcButton")
end if

end div
return



[item1]
cls
'html "<body bgcolor="+sm$+"Silver"+sm$+">"
tab.sel=1
gosub [displaytabs]

'your code from here......

print:print:print:print
print "laptops"
input "test input";a$
wait

[item2]
cls
tab.sel=2
gosub [displaytabs]

'your code from here......

print:print:print:print
print "PC's"
input "test input";a$
wait

[item3]
cls
tab.sel=3
gosub [displaytabs]

'your code from here......

print:print:print:print
print "Printers"
input "test input";a$
wait


[item4]
cls
tab.sel=4
gosub [displaytabs]

'your code from here......

print:print:print:print
print "Networks"
input "test input";a$
wait



sub setCSS

cssid #calc, "{ background: #CCF; width: 590px; padding: 16px }"

cssclass "a.calcButton", "{ color:black; text-decoration: none; font-size: 14pt; width: 100px; height: 22px; display: block; float: left; background: #EEF; margin-right: 7px; text-align: center }"

cssclass "a.calcButtonsel", "{ color:blue; text-decoration: none; font-size: 14pt; width: 100px; height: 22px; display: block; float: left; background: #FFF; margin-right: 7px; text-align: center }"

'cssclass "a.calcButton:hover", "{ background: #FFF }"
cssclass "a.calcButton:hover", "{ background: #3396FF }"

end sub


Link to Post - Back to Top  IP: Logged
   [Search This Thread][Send Topic To Friend] [Print]

Google
Webrunbasic.proboards.com
Click Here To Make This Board Ad-Free


This Board Hosted For FREE By ProBoards
Get Your Own Free Message Boards & Free Forums!