A web css3 TABS drived from VFP

Published on by Yousfi Benameur

this is a custom web TABS , a best modern replacement of vfp pageframe at least for web applications. this contains text+png icon +any html tag in each page as web can provide. the number of labels tabs is limited by the screen and the font used only (can fire the horizontal scrollbar if too large). -can navigate on tabs by clicking on ( or by keyboard TAB) -TAb page contents are stored in a physical table(memo fields).if initially the table dont exists, its created with some fields in the form with random contents loaded by the code. of course these initial random contents can be modified to reflect the real ones wanted by the user. the current settings are saved to a settings.txt file and restored when restart the tabs.must click the green save shape button to keep actual values installed and can restore them nextly. -each page can be modified in a separated modal form with an editbox.the modifications are reflected simultaneously on the web page.Simply click on the tab to select in optionGroup and modify tab contents(html knowledge recquired). Also remember only that a break line (crlf) is represented by <br>. the png icons here also can be also modified in the tag img.i used web urls png for this demo(warning can be broken!). Note that the tabs labels background is a linear gradient with 2 colors to set.Its the same thing for the page of each tab.for having a monocolor simply enter the same color in dialog. with the tools on top of the form can control the tabs online. The edition form have a context menu for select,cut,copy,paste.... Adding a tab can be done in the html element < li>...< /li> in the method ybuild(). For Writing html tag , must have of course at least some beginer HTML knowledge. Also can embed any web control on the page of this tab (image,video,iframe,....) Of course to achieve this demo needs internet connected. Note : the begining of this post was from :http://codepen.io/wallaceerick/pen/ojtal

Click on code to select [then copy] -click outside to deselect



*1*
publi m.yrep
m.yrep= addbs(justpath(sys(16,1)))
set defa to (yrep)

publi yform
yform=newObject("ytabs")
yform.show
read events
*

DEFINE CLASS ytabs AS form
Height = 665
Width = 1000
ShowWindow = 2
ShowTips = .T.
AutoCenter = .T.
Caption = "Web CSS3 TABS"
ytab = 1
ycount = 0
ybackground = 0
yforecolor = rgb(255,255,255)
ytab_backcolor = "#8e44ad"
ypage_backcolor = 0
ytab_background = 0
ytab_forecolor = "fff"
ygradcolor1 = "yellow"
ygradcolor2 = "black"
zgradcolor1 = rgb(0,0,255)
zgradcolor2 = rgb(0,0,200)
Name = "Form1"

ADD OBJECT olecontrol1 AS olecontrol WITH ;
Oleclass="shell.explorer.2",;
Top = 48, ;
Left = 0, ;
Height = 624, ;
Width = 984, ;
Anchor = 15, ;
Name = "Olecontrol1"

ADD OBJECT optiongroup1 AS optiongroup WITH ;
AutoSize = .T., ;
ButtonCount = 6, ;
BackStyle = 0, ;
BorderStyle = 0, ;
Value = 1, ;
Height = 27, ;
Left = 44, ;
Top = 7, ;
Width = 337, ;
Name = "Optiongroup1", ;
Option1.Caption = "Option1", ;
Option1.Value = 1, ;
Option1.Height = 17, ;
Option1.Left = 5, ;
Option1.Style = 0, ;
Option1.Top = 5, ;
Option1.Width = 50, ;
Option1.AutoSize = .F., ;
Option1.Name = "Option1", ;
Option2.Caption = "Option2", ;
Option2.Height = 17, ;
Option2.Left = 62, ;
Option2.Style = 0, ;
Option2.Top = 5, ;
Option2.Width = 50, ;
Option2.AutoSize = .F., ;
Option2.Name = "Option2", ;
Option3.Caption = "Option3", ;
Option3.Height = 17, ;
Option3.Left = 118, ;
Option3.Style = 0, ;
Option3.Top = 5, ;
Option3.Width = 61, ;
Option3.AutoSize = .F., ;
Option3.Name = "Option3", ;
Option4.Caption = "Option4", ;
Option4.Height = 17, ;
Option4.Left = 170, ;
Option4.Style = 0, ;
Option4.Top = 5, ;
Option4.Width = 61, ;
Option4.AutoSize = .F., ;
Option4.Name = "Option4", ;
Option5.Caption = "Option5", ;
Option5.Height = 17, ;
Option5.Left = 222, ;
Option5.Style = 0, ;
Option5.Top = 5, ;
Option5.Width = 61, ;
Option5.AutoSize = .F., ;
Option5.Name = "Option5", ;
Option6.Caption = "Option6", ;
Option6.Height = 17, ;
Option6.Left = 271, ;
Option6.Style = 0, ;
Option6.Top = 5, ;
Option6.Width = 61, ;
Option6.AutoSize = .F., ;
Option6.Name = "Option6"

ADD OBJECT label1 AS label WITH ;
AutoSize = .T., ;
FontBold = .T., ;
FontSize = 12, ;
Anchor = 768, ;
WordWrap = .T., ;
BackStyle = 0, ;
Caption = "TAB Edition", ;
Height = 40, ;
Left = 7, ;
Top = 10, ;
Width = 56, ;
ForeColor = RGB(255,0,0), ;
Name = "Label1"

ADD OBJECT commandgroup1 AS commandgroup WITH ;
AutoSize = .T., ;
ButtonCount = 6, ;
Anchor = 768, ;
BackStyle = 0, ;
Value = 1, ;
Height = 35, ;
Left = 362, ;
Top = 3, ;
Width = 567, ;
Name = "Commandgroup1", ;
Command1.AutoSize = .T., ;
Command1.Top = 5, ;
Command1.Left = 5, ;
Command1.Height = 25, ;
Command1.Width = 78, ;
Command1.FontBold = .T., ;
Command1.FontSize = 8, ;
Command1.Caption = "Body color", ;
Command1.Name = "Command1", ;		
Command2.AutoSize = .T., ;
Command2.Top = 5, ;
Command2.Left = 78, ;
Command2.Height = 25, ;
Command2.Width = 64, ;
Command2.FontSize = 8, ;
Command2.Caption = "Text color", ;
Command2.Name = "Command2", ;		
Command3.AutoSize = .T., ;
Command3.Top = 5, ;
Command3.Left = 140, ;
Command3.Height = 25, ;
Command3.Width = 112, ;
Command3.FontSize = 8, ;
Command3.Caption = "Tab  gradient colors", ;
Command3.Name = "Command3", ;		
Command4.AutoSize = .T., ;
Command4.Top = 5, ;
Command4.Left = 408, ;
Command4.Height = 25, ;
Command4.Width = 66, ;
Command4.FontSize = 8, ;
Command4.Caption = "Tab Hover", ;
Command4.Name = "Command4", ;		
Command5.AutoSize = .T., ;
Command5.Top = 5, ;
Command5.Left = 481, ;
Command5.Height = 25, ;
Command5.Width = 81, ;
Command5.FontSize = 8, ;
Command5.Caption = "Tab forecolor", ;
Command5.Name = "Command5", ;
Command6.AutoSize = .T., ;
Command6.Top = 5, ;
Command6.Left = 264, ;
Command6.Height = 25, ;
Command6.Width = 133, ;
Command6.FontSize = 8, ;
Command6.Caption = "Page gradient Backcolor", ;
Command6.Name = "Command6"

ADD OBJECT shape1 AS shape WITH ;
Top = 8, ;
Left = 981, ;
Height = 17, ;
Width = 17, ;
Anchor = 768, ;
BackStyle = 1, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Save settings", ;
BackColor = RGB(0,255,0), ;
Name = "Shape1"

PROCEDURE ybuild
sele ycurs
scan
content=strtran(content,chr(13),"<BR>")
endscan
**brow
sele ycurs
locate
dimension xcontent(6)
scan
xcontent(recno())=content
endscan
**************
*linear gradient colors (2 colors)
local m.xgrad1,m.xgrad2
m.xgrad1=thisform.ygradcolor1
m.xgrad2=thisform.ygradcolor2
local m.zgrad1,m.zgrad2
m.zgrad1=thisform.zgradcolor1
m.zgrad2=thisform.zgradcolor2
***************
local m.yvar
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Pure CSS Tabs</title>

<style>
@import url("http://fonts.googleapis.com/css?family=Lato");
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
padding:20px;
text-align: left;
font-family: Lato;
color: <<thisform.yforecolor>> ;  /* text color */
background-color:<<thisform.ybackground>> ; /*body backcolor*/
}

h1 {
font-weight: normal;
font-size: 40px;
font-weight: normal;
text-transform: uppercase;
float: left;
margin: 20px 0 100px 10px;
align:center;

}
h1 span {
font-size: 13px;
display: block;
padding-left: 4px;		

}

.tabs {
width: <<thisform.width-15>>px ;  /*scrollbars V */
float: none;
list-style: none;
position: relative;
margin: 80px 0 0 10px;
text-align: left;
}
.tabs li {
float: left;
display: block;
}
.tabs input[type="radio"] {
position: absolute;
top: 0;
left: -9999px;
}
.tabs label {
display: block;
padding: 14px 16px;
border-radius: 8px 8px 0 0;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
//tabs labels gradients
background: #ffffff;
background: -webkit-linear-gradient(bottom,<<m.xgrad1>>, <<m.xgrad2>>); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top,<<m.xgrad2>>, <<m.xgrad1>>); /* For Firefox 3.6 to 15 */
background: -o-linear-gradient(<<m.xgrad2>>, <<m.xgrad1>>); /* For Opera 11.1 to 12.0 */
background: linear-gradient(top,<<m.xgrad1>>, <<m.xgrad2>>); /* Standard syntax */
background: linear-gradient(to bottom, <<m.xgrad2>>, <<m.xgrad1>>); /* IE ? */
background: -ms-linear-gradient(top, <<m.xgrad2>>, <<m.xgrad1>>); /* IE 11 */ //the vfp browser emulated is here
//
//  background:<<thisform.ytab_backcolor>> ;  

color:<<thisform.ytab_forecolor>> ;  

cursor: pointer;
position: relative;
top: 4px;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #703688;
}
.tabs .tab-content {
z-index: 2;
display: none;
overflow: hidden;
width: 96%;
font-size: 17px;
line-height:18px;
position: absolute;
top: 53px;
left: 0;
padding:15px;
/* background: <<thisform.ypage_backcolor>> ;  */
background: #ffffff;
background: -webkit-linear-gradient(bottom,<<m.zgrad1>>, <<m.zgrad2>>); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top,<<m.zgrad2>>, <<m.zgrad1>>); /* For Firefox 3.6 to 15 */
background: -o-linear-gradient(<<m.zgrad2>>, <<m.zgrad1>>); /* For Opera 11.1 to 12.0 */
background: linear-gradient(top,<<m.zgrad1>>, <<m.zgrad2>>); /* Standard syntax */
background: linear-gradient(to bottom, <<m.zgrad2>>, <<m.zgrad1>>); /* IE ? */
background: -ms-linear-gradient(top, <<m.zgrad2>>, <<m.zgrad1>>); /* IE 11 */ //the vfp browser emulated is here

}
.tabs [id^="tab"]:checked + label {
top: 0;
padding-top: 17px;
background: <<thisform.ytab_background>> ;    
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}

p.link {
clear: both;
margin: 380px 0 0 15px;
}
p.link a {
text-transform: uppercase;
text-decoration: none;
display: inline-block;
color: #fff;
padding: 5px 10px;
margin: 0 5px;
background-color:#612e76;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
p.link a:hover {
background-color: #522764;
}
</style>
</head>
<body>
<h1>my CSS3 Tabs <span>B.Yousfi</span></h1>

<ul class="tabs" role="tablist">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1"
   role="tab"
   aria-selected="true"
   aria-controls="panel1"
   tabindex="0">TAB1 </label>
<div id="tab-content1"
 class="tab-content"
 role="tabpanel"
 aria-labelledby="TAB1"
 aria-hidden="false">

<p>  <<xcontent(1)>> </p>
</div>
</li>

<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2"
   role="tab"
   aria-selected="false"
   aria-controls="panel2"
   tabindex="0">TAB2</label>
<div id="tab-content2"
 class="tab-content"
 role="tabpanel"
 aria-labelledby="TAB2"
 aria-hidden="true">		
<p> <<xcontent(2)>>	 </p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3"
   role="tab"
   aria-selected="false"
   aria-controls="panel3"
   tabindex="0">TAB3</label>
<div id="tab-content3"
 class="tab-content"
 role="tabpanel"
 aria-labelledby="TAB3"
 aria-hidden="true">		
<p> <<xcontent(3)>></p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab4" />
<label for="tab4"
   role="tab"
   aria-selected="false"
   aria-controls="panel5"
   tabindex="0">TAB4</label>
<div id="tab-content4"
 class="tab-content"
 role="tabpanel"
 aria-labelledby="TAB4"
 aria-hidden="true">
<p>  <<xcontent(4)>> </p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab5" />
<label for="tab5"
   role="tab"
   aria-selected="false"
   aria-controls="panel5"
   tabindex="0">TAB5</label>
<div id="tab-content5"
 class="tab-content"
 role="tabpanel"
 aria-labelledby="TAB5"
 aria-hidden="true">		
<p> <<xcontent(5)>></p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab6" />
<label for="tab6"
   role="tab"
   aria-selected="false"
   aria-controls="panel6"
   tabindex="0">Help</label>
<div id="tab-content6"
 class="tab-content"
 role="tabpanel"
 aria-labelledby="tab6"
 aria-hidden="true">
<p><<xcontent(6)>></p>
</div>
</li>
</ul>

<br style="clear: both;" />	
</body>
</html>
endtext
local m.lcdest
m.lcdest=m.yrep+"ytemp.html"
strtofile(m.myvar,m.lcdest)
thisform.olecontrol1.navigate(m.lcdest)  &&now this fails sometimes in f:\...f://file..font found ????(win10 pro)

if thisform.ycount=0
thisform.ycount=1
else
messagebox("the tab"+thisform.ytab+ " updated.",0+32+4096,"",1000)  &&to permit object document created
endi

try
thisform.olecontrol1.document.getElementById("tab"+thisform.ytab).click(.t.)  &&activate the tab selected
catch
endtry
ENDPROC

PROCEDURE my
LPARAMETERS nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
Aevents( myArray, 0)
*--- reference the calling object
loObject = myArray[1]
*messagebox(loObject.name+"  "+loObject.parent.name+"  "+trans(int(val(substr(loObject.name,7))))+"    "+trans(loObject.parent.value))
sele ycurs
go  int(val(substr(loObject.name,7)))
m.x=content

thisform.ytab=trans(recno())
try
thisform.olecontrol1.document.getElementById("tab"+thisform.ytab).click(.t.)  &&activate the tab selected
catch
endtry

*for visual form : do form yedit_tab with recno(), m.x    &&modal
sele ycurs
local oform
oform=newObject("yedit","","",recno(),m.x)
oform.show(1)  &&modal
thisform.ybuild()
ENDPROC

PROCEDURE yrgb
lparameters xcol
Local RGBChr
m.RGBChr=left(BINTOC(xcol,'R'),3)
R=asc(substr(m.RGBChr,1,1)) && RED
G=asc(substr(m.RGBChr,2,1)) && GREEN
B=asc(substr(m.RGBChr,3,1)) && BLUE
return "rgb("+trans(r,"999")+","+trans(g,"999")+","+trans(b,"999")+")"
ENDPROC

PROCEDURE my1
LPARAMETERS nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
Aevents( myArray, 0)
*--- reference the calling object
loObject = myArray[1]		
loObject.backcolor=255
ENDPROC

PROCEDURE my2
LPARAMETERS nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
Aevents( myArray, 0)
*--- reference the calling object
loObject = myArray[1]
loObject.backcolor=rgb(0,255,0)
ENDPROC


PROCEDURE Load
declare integer Sleep in kernel32 integer
_screen.windowstate=1
close data all
set safe off

*if storage table dobt exist then start for zero otherwise use contents in the table
*can execute ( erase ycurs.dbf+erase ycurs.fpt) to start from zero.
if !file("ycurs.dbf")
create table ycurs (tab i,content m)
messagebox("table created",0+32+4096,'',1000)

set memowidth to 8192
local m.myvar
*tab1
text to m.myvar noshow
<img src="https://cdn0.iconfinder.com/data/icons/medical-icons/128/books.png" width=128",height="128" style="float:right;">
1.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<a href="#">Lorem ipsum dolor sit amet, </a>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<br><br>
<center>
<audio controls>
<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</center><br>
endtext
insert into ycurs values (1,m.myvar)

*tab2
text to m.myvar noshow
<img src="https://cdn2.iconfinder.com/data/icons/oxygen/128x128/apps/staroffice.png" style="float:right;">
2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<br><br><br>
<center><img src="https://lh4.googleusercontent.com/EZF57ZTKl-kzW_dOaUXumtbCIsc2Ud6wSpmGD332j7FplJDp7X4DLuALPzovfQFUU7_FdNJv7R2p=w556-h450" style="border:solid 10px;border-radius:50%;border-color:white;"></center>
endtext
insert into ycurs values (2,m.myvar)

*tab3
text to m.myvar noshow
<img src="https://cdn1.iconfinder.com/data/icons/africa-1/100/Algeria-128.png" style="float:right;">
3.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
endtext
insert into ycurs values (3,m.myvar)

*tab4
text to m.myvar noshow
<img src="
https://cdn4.iconfinder.com/data/icons/fliraneo/128/photo.png" style="float:right;">
4.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<br>
endtext
insert into ycurs values (4,m.myvar)

*tab5
text to m.myvar noshow
<img src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/gnome-fish.png" style="float:right;">
5.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<br>
<center>
<video width="640" height="480" controls="controls" >
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video></center><br>
endtext
insert into ycurs values (5,m.myvar)

*tab6
text to m.myvar noshow
<img src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Help_Circle_Blue.png" style="float:right;">
this is a custom web TABS , a best modern replacement of vfp pageframe.<br>
this contains text+png icon in each page.<br>
the number of labels tabs is limited by the screen and the font used only (or fires the horizontal scrollbar if too large).<br>
can navigate on tabs by clicking on (or by key TAB)<br><br>
TAb page contents are stored in a physical table(memo fields).if initially the table dont exists,its created with
some fields in the form.load.of course these initial random contents can be modified to reflect the real ones.<br>
the current  settings are saved to a txt file and restored when restart the tabs.
must click the save shape button to keep actual values installed and can restore them nextly.
each page can be modified in a separated modal form with an editbox.the modifications<br>
are printed simultaneously on the web page.  Click on the tab to select in optionGroup and modify.<br>
remember only that a break line (crlf) is represented by <br>.
the png icons here also can be also  modified  in the tag img.	<br>
Note that the  tabs labels background is a linear gradient with 2 colors to set.<br>
with the tools on top of the form can control the tabs online.<br>
The edition form have a context menu for cut,copy,paste....<br>
<i style="color: cyan;">
Adding a tab can be done in the html element < li>...< /li>. in the method ybuild.<br>
For Writing html tag , must have of course at least some beginer HTML knowledge.can embed any web control<br>
on the page of this tab (image,video,iframe,....)<br>
Of course to achieve this demo needs internet connected.<br>
<br> </i>
<b style="color:red;"> Yousfi benameur  01 december 2016</b><br><br>
<center><img src="https://lh3.googleusercontent.com/PJkO6w9Omb4XHASJvrKoOhVqmcMJhCBofHB1w9HrzwWsmUtm6pNtLjA5Ds7V9XXKoYgvPtQ=s630-fcrop64=1,1bb2244cf61aeafb" width="640" height="480"><br>
endtext
insert into ycurs values (6,m.myvar)
else
messagebox("ycurs already exists!",0+32+4096,'',1000)
endi
use ycurs alias ycurs
sele ycurs
locate
*brow
ENDPROC

PROCEDURE Init
thisform.yforecolor=thisform.yrgb(thisform.yforecolor)
thisform.ybackground=thisform.yrgb(thisform.backcolor)
with thisform.optiongroup1
for i=1 to .buttoncount
bindevent(.buttons(i),'mousedown',thisform,"my")
endfor
endwith

with thisform.commandgroup1
for i=1 to .buttoncount
bindevent(.buttons(i),'mouseEnter',thisform,"my1")
bindevent(.buttons(i),'mouseLeave',thisform,"my2")
endfor
endwith

with thisform
.ytab="1"
.ycount=0
endwith

if file(m.yrep+"settings.txt")
local m.ystr
m.ystr=filetostr(m.yrep+"settings.txt")

with thisform
.ybackground=allt(mline(m.ystr,1))
.yforecolor=allt(mline(m.ystr,2))
.ytab_backcolor=allt(mline(m.ystr,3))
.ytab_background=allt(mline(m.ystr,4))
.ypage_backcolor=allt(mline(m.ystr,5))
.ytab_forecolor=allt(mline(m.ystr,6))
.ygradcolor1=allt(mline(m.ystr,7))
.ygradcolor2=allt(mline(m.ystr,8))
.zgradcolor1=allt(mline(m.ystr,9))
.zgradcolor2=allt(mline(m.ystr,10))
.backcolor=int(val(mline(m.ystr,11)))
endwith

else

with thisform
.ybackground="rgb(0,0,0)"
.yforecolor="rgb(255,255,255)"
.ytab_backcolor="#8e44ad"
.ypage_backcolor="#612e76"
.ytab_background="#612e76"
.ytab_forecolor="fff"
.ygradcolor1="yellow"
.ygradcolor2="black"
.zgradcolor1="rgb(0,0,255)"
.zgradcolor2="rgb(0,0,200)"
.backcolor=rgb(0,0,0)
endwith
endi
thisform.ybuild()
ENDPROC

PROCEDURE Destroy
use in select("ycurs")
close data all
clea events
ENDPROC


PROCEDURE olecontrol1.Init
this.silent=.t.
ENDPROC

PROCEDURE optiongroup1.Init
with this
.autosize=.t.
.backstyle=0
.anchor=768
for i=1 to .buttoncount
.buttons(i).caption="TAB"+trans(i)
.buttons(i).autosize=.t.
.buttons(i).backstyle=0
.buttons(i).forecolor=rgb(255,255,255)
.buttons(i).fontsize=8
endfor
endwith
ENDPROC


PROCEDURE commandgroup1.Init
with this
.setall("backcolor",rgb(0,255,0),"commandbutton")
.setall("mousepointer",15,"commandbutton")
.setall("fontsize",8,"commandbutton")
.setall("top",1,"commandbutton")
.setall("autosize",.t.,"commandbutton")
.setall("fontbold",.t.,"commandbutton")

for i=1 to .buttoncount
if i=1
.buttons(i).left=0
else
.buttons(i).left=.buttons(i-1).left+.buttons(i-1).width   &&+1
endi
endfor
.autosize=.t.
endwith
ENDPROC

PROCEDURE commandgroup1.Command1.Click
local m.xcolor
m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
thisform.ybackground=thisform.yrgb(m.xcolor)
thisform.backcolor=m.xcolor
thisform.ybuild()
ENDPROC

PROCEDURE commandgroup1.Command2.Click
local m.xcolor
m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
thisform.yforecolor=thisform.yrgb(m.xcolor)
thisform.ybuild()
ENDPROC

PROCEDURE commandgroup1.Command3.Click
local m.xcolor
m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
thisform.ygradcolor1=thisform.yrgb(m.xcolor)

m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
thisform.ygradcolor2=thisform.yrgb(m.xcolor)

thisform.ybuild()
ENDPROC


PROCEDURE commandgroup1.Command4.Click
local m.xcolor
m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
thisform.ytab_background=thisform.yrgb(m.xcolor)
thisform.ybuild()
ENDPROC

PROCEDURE commandgroup1.Command5.Click
local m.xcolor
m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
thisform.ytab_forecolor=thisform.yrgb(m.xcolor)
thisform.ybuild()
ENDPROC

PROCEDURE commandgroup1.Command6.Click
local m.xcolor
m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
thisform.zgradcolor1=thisform.yrgb(m.xcolor)

m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
thisform.zgradcolor2=thisform.yrgb(m.xcolor)
thisform.ybuild()
ENDPROC

PROCEDURE shape1.Click
local m.myvar
text to m.myvar textmerge noshow
<<thisform.ybackground>>
<<thisform.yforecolor>>
<<thisform.ytab_backcolor>>
<<thisform.ytab_background>>
<<thisform.ypage_backcolor>>
<<thisform.ytab_forecolor>>
<<thisform.ygradcolor1>>
<<thisform.ygradcolor2>>
<<thisform.zgradcolor1>>
<<thisform.zgradcolor2>>
<<thisform.backcolor>>
endtext
strtofile(m.myvar,m.yrep+"settings.txt",0)
messagebox("Settings saved !",0+32+4096,'',1000)
*run/n notepad settings.txt
ENDPROC
ENDDEFINE
*
*-- EndDefine: ytabs
DEFINE CLASS yedit AS form
Height = 405
Width = 766
ShowWindow = 1
AutoCenter = .T.
Caption = ""
FontBold = .T.
FontSize = 12
WindowType = 1  &&modal
ForeColor = RGB(0,0,255)
BackColor = RGB(0,0,0)
Name = "Form1"

ADD OBJECT edit1 AS editbox WITH ;
FontBold = .T., ;
FontSize = 10, ;
Anchor = 15, ;
Height = 373, ;
Left = 7, ;
Top = 18, ;
Width = 745, ;
ForeColor = RGB(0,0,255), ;
ControlSource = "ycurs.content", ;
Name = "Edit1"

PROCEDURE Init
lparameters xnum, xval
if !empty(xval)
this.edit1.value=xval
thisform.caption= "Tab"+trans(int(xnum))+  " Edition. Rightclick to fire the menu edition."
else
return .f.
endi
ENDPROC

PROCEDURE edit1.RightClick
Define Popup raccourci SHORTCUT Relative From Mrow(),Mcol()
Define Bar _Med_paste Of raccourci Prompt "C\<oller" ;
KEY CTRL+V, "Ctrl+V"  PICTRES _Med_paste ;
MESSAGE "Place le contenu du Presse-papiers au point d'insertion"
Define Bar _Med_copy Of raccourci Prompt "Co\<pier" ;
KEY CTRL+C, "Ctrl+C" PICTRES _Med_copy ;
MESSAGE "Copie la sélection et la place dans le Presse-papiers"
Define Bar _Med_cut Of raccourci Prompt "\<Couper" ;
KEY CTRL+x, "Ctrl+X"  PICTRES _Med_cut  ;
MESSAGE "Enlève la sélection et la place dans le Presse-papiers"
DEFINE BAR _med_slcta OF raccourci PROMPT "Sélectionner tout" ;
KEY CTRL+A, "Ctrl+A"  PICTRES _med_slcta ;
MESSAGE "Sélectionne tout le texte ou tous les éléments de la fenêtre active"
Define Bar _Med_redo Of raccourci Prompt "\<Rétablir" ;
KEY CTRL+R, "Ctrl+R" PICTRES _Med_redo;
MESSAGE "Rétablit la dernière opération annulée"
Define Bar _Med_undo Of raccourci Prompt "\<Annuler" ;
KEY CTRL+Z, "Ctrl+Z" PICTRES _Med_undo ;
MESSAGE "Annule la dernière modification"

Activate Popup raccourci
ENDPROC

ENDDEFINE
*
*-- EndDefine:yedit


if want to start from zero :{erase ycurs.dbf , erase ycurs.fpt , erase settings.txt}
if want to start from zero :{erase ycurs.dbf , erase ycurs.fpt , erase settings.txt}
if want to start from zero :{erase ycurs.dbf , erase ycurs.fpt , erase settings.txt}
if want to start from zero :{erase ycurs.dbf , erase ycurs.fpt , erase settings.txt}
if want to start from zero :{erase ycurs.dbf , erase ycurs.fpt , erase settings.txt}

if want to start from zero :{erase ycurs.dbf , erase ycurs.fpt , erase settings.txt}

A web css3 TABS drived from VFP

Important:All Codes above are tested on VFP9SP2 & windows 10 pro and IE11 emulation.

Published on Visual foxpro, css3, Tabs, pageframe

To be informed of the latest articles, subscribe:
Comment on this post