Working with jQuery from Visual foxpro
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on the web pages.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
Tip: In addition, jQuery has plugins for almost any task out there
the compiled file zlibrary.fxp (100 ko) shipped embeds 36 functions relative to jquery demos.
it must be on the source folder with the form to make the codes working.
its a good tutoriel for whose want to work with jQuery from visual foxpro through the IE browser as olecontrol.
i dont shipped the prg because its editable and contains jquery scripts( as some old developpers shipped flls from C or C++).it can be decompiled but this is not important!
all is not lost because each code is retrieved separatly by clicking on the bottom button on the form as txt file.
All demos are from this jQuery site:http://jqueryui.com/demos/
can download for free the jQuery UI library and all the samples.
I used web urls to link to all the libraries (js,css) that why internet must be connected (its tested in code).
all the used libraries are on the web servers.
click on any title on the left grid to play the web page sample on the right browser.
Some automations can interact between vfp and the web page as thisform.olecontrol1.getElementbyId,... and then can trap the values from the jQuery results...
SUBJECTS aborded are various as:
DATEPICKER
EASING_DEMOS
EFFECTS ON ELEMENTS
IMAGESCYCLER
MAPS
TOOLBAR
MENUS
MODAL DIALOGS
TOOLTIPS
PHOTOS_MANAGER
PROGRESSBARS
ACCORDIONS
....
can appreciate how jQuery is indeed a lightweight library.Note that javascript is the first soft used in the world wide actually.
The jQuery runs on all navigators and its cross-browser library.
Note: can run all these codes as local files but modify the url from http:// to local files in the script tags of each code.
in the download builder page choose a theme (CSS-24 themes) and you have all components themed.in this demo its a basic theme only .
*Download the zip below,unzip and run the yjQUery.prg.
*Important:These codes are tested on Win10 pro+ie11 emulation and vfp9sp2
*errata: correct this line as:[Create Cursor ycurs (num i,Title c(25))] in zip yjQuery.prg code.
*added on Friday 04 decmeber 2015 8 themed jQuery datePickers adapted from Github.
Click on code to select [then copy] -click outside to deselect
*1*
*save this code as yjQuery.prg work with zlibrary.fxp and internet connected.
Publi yform
yform=Newobject("yjQuery")
yform.Show
Read Events
Retu
*
Define Class yjQuery As Form
Height = 611
Width = 898
ShowWindow = 2
AutoCenter = .T.
Caption = "Form1"
yscript = .F.
Name = "Form1"
Add Object grid1 As Grid With ;
Anchor = 768, ;
Height = 576, ;
Left = 0, ;
ReadOnly = .T., ;
Top = 0, ;
Width = 235, ;
Name = "Grid1"
Add Object olecontrol1 As OleControl With ;
oleclass="shell.explorer.2", ;
Top = 0, ;
Left = 246, ;
Height = 577, ;
Width = 649, ;
Anchor = 15, ;
Name = "Olecontrol1"
Add Object command1 As CommandButton With ;
Top = 585, ;
Left = 492, ;
Height = 25, ;
Width = 145, ;
FontBold = .T., ;
FontSize = 12, ;
Anchor = 768, ;
Caption = "Script code", ;
MousePointer = 15, ;
ForeColor = Rgb(255,0,0), ;
Name = "Command1"
Add Object label1 As Label With ;
AutoSize = .T.,;
FontBold = .T.,;
FontSize = 16,;
Anchor = 768,;
BackStyle = 0,;
Caption = "?",;
Height = 27,;
Left = 648,;
MousePointer = 15,;
Top = 585,;
Width = 15,;
ForeColor = Rgb(0,255,0),;
Name = "Label1"
Procedure label1.Click
local m.xtitle,m.myvar
m.xtitle='<center style="color:white;background-color:navy;"><h2>Summary help</h2></center><br<'
m.myvar=m.xtitle+'<p style="color:maroon;padding:10px;">'+Strtran(Filetostr(m.yrep+"yreadme.txt"),Chr(13),"<br>")+"</p>"
Thisform.yscript=m.myvar
Local m.lcdest
m.lcdest=m.yrep+"test.html"
Strtofile(m.myvar,m.lcdest)
With Thisform.olecontrol1
.Navigate(m.lcdest)
Endwith
Endproc
Procedure my
Lparameters nButton, nShift, nXCoord, nYCoord
Sele ycurs
Local m.x
m.x=Recno()
Try
m.myvar=Eval("y"+Trans(m.x)+"()")
Thisform.yscript=m.myvar
Local m.lcdest
m.lcdest=m.yrep+"test.html"
Set Safe Off
Strtofile(m.myvar,m.lcdest)
With Thisform.olecontrol1
.Navigate(m.lcdest)
Endwith
Catch
Messagebox("function y"+Trans(m.x)+"() dont exist!",16+4096)
Endtry
Endproc
Procedure Init
*check if internet connected
Declare Integer InternetCheckConnection In wininet;
STRING lpszUrl, Integer dwFlags, Integer dwReserved
#Define FLAG_ICC_FORCE_CONNECTION 1
lcURL="http://www.microsoft.com"
lResult = (InternetCheckConnection(lcURL, FLAG_ICC_FORCE_CONNECTION, 0)=1)
If !lResult=.T.
Messagebox("There is no internet connexion ! this must be established mandatory to run the program.",0+16,"internet Connection")
Return .F.
Endi
***************
Set Safe Off
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep)
Thisform.yscript=""
******************
If !File(m.yrep+"zlibrary.fxp")
Messagebox("library [zlibrary.fxp] must be in source folder.....cancelling!",16+4096,"Error",2000)
Return .F.
Endi
*****************
Create Cursor ycurs (num i,Title c(25))
Local m.xx
TEXT to m.xx noshow
ADD_CLASS_DEMO
DATEPICKER
DATEPICKER0
DATEPICKER2
DATEPICKER3
DATEPICKER4
DATEPICKER5
DATEPICKER6
DATEPICKER_INLINE
DATEPICKER_LOCALIZED
EASING_DEMOS
EFFECTS_ON_ELEMENTS
IMAGES_CYCLER
MAP_SPINNER
MEDIAPLAYER_TOOLBAR
MENU_ICONS
MENU_SELECT
MODAL_DIALOG_ANIMATION
MODAL_DIALOG_CONFIRM
MODAL_DIALOG_MESSAGE
MODAL_MOUSE_TRACK
MODAL_TOOLTIP_CUSTOM
PHOTOS_MANAGER
PROGRESSBAR_CUSTOM
PROGRESSBAR_DOWNLOAD
RESIZABLE
SLDER_SCROLLBAR
SLIDER_COLORPICKER
SLIDER_VERTICAL
TABS_COLLAPSE
TABS_MOUSEOVER
TABS_SORTABLE
YJQUERY_ACCORDEON
YJQUERY_ACCORDEON1
YJQUERY_ACCORDEON2
YJQUERY_ACCORDEON3
ENDTEXT
For i=1 To Memlines(m.xx)
Insert Into ycurs Values (i,Allt(Mline(m.xx,i)))
Endfor
Thisform.Caption=Trans(Reccount())+" jQuery samples"
Locate
With Thisform.grid1
.RecordSource="ycurs"
.FontSize=8
.GridLines=0
.DeleteMark=.F.
.SetAll("DynamicBackColor", "IIF(MOD(RECNO( ), 2)=0, RGB(205,215,207) , RGB(0,255,0))", "Column")
.AutoFit
Bindevent(.Columns(2).text1,"mousedown",Thisform,"my")
Endwith
Set Defa To (yrep)
Set Proc To (m.yrep+"zlibrary") AddI
Endproc
Procedure Destroy
Release Proc (m.yrep+"zlibrary")
Erase m.yrep+"test.html"
Erase Addbs(Sys(2023))+"ytemp.txt"
Clea Events
Endproc
Procedure command1.Click
Local m.oo
m.oo=Addbs(Sys(2023))+"ytemp.txt"
Strtofile(Thisform.yscript,m.oo)
Run/N notepad &oo
Endproc
Enddefine
*
*-- EndDefine: yjQuery
Click on code to select [then copy] -click outside to deselect
*2*
*jQuery calculators ( a basic and scientific calculators).
*from http://keith-wood.name/calculator.html
*can see and free download more at https://github.com/kbwood/calculator
*i link to web libraries.in github download all are in local files.
Local m.myvar
TEXT to m.myvar noshow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Calculator</title>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.calculator.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.calculator.js"></script>
<script>
$(function () {
$.calculator.setDefaults({showOn: 'both', buttonImageOnly: true, buttonImage: 'http://keith-wood.name/img/calculator.png'});
$('#basicCalculator').calculator();
$('#sciCalculator').calculator({layout: $.calculator.scientificLayout});
});
</script>
</head>
<body bgcolor=bisque oncontextmenu="return false;">
<center><h1 style="color:red;background-color:navy;">jQuery Calculator Basics (from http://keith-wood.name/calculator.html)</h1></center>
<p><input type="text" id="basicCalculator"></p>
<p>- </p>
<p>- </p>
<p>- </p>
<p>- </p>
<p>- </p>
<p><input type="text" id="sciCalculator"></p>
</body>
</html>
ENDTEXT
Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")
With apie
.silent=.t.
.Navigate(m.lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
.Resizable=0
.Width=600
.Height=600
.Top=50
.Left=(Sysmetric(1)-.Width)/2
BringWindowToTop(.HWnd)
.Visible=.T.
Endwith
Click on code to select [then copy] -click outside to deselect
*3*
*jQuery calculators
*from http://keith-wood.name/calculator.html
*the same code but for a styled calculator midnight colors (css+juery script change)
Local m.myvar
TEXT to m.myvar noshow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Calculator</title>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.calculator.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.calculator.js"></script>
<style>
.calculator-popup.midnight { background: #10085a; }
.midnight .calculator-space { width: 38px; }
.midnight .calculator-result { background-color: #1a0d91;
color: #fff; font-size: 1.5em; }
.midnight .calculator-row .calculator-undo,
.midnight .calculator-row .calculator-clear-error,
.midnight .calculator-row .calculator-clear {
font-size: 1em; padding-left: 3px; }
.midnight .calculator-row button { width: 38px; height: 38px; padding: 5px;
background: url(http://keith-wood.name/img/midnight.gif) no-repeat; border: none;
color: #fff; font-size: 1.5em; font-weight: bold; }
.midnight .calculator-row .calculator-key-down { padding: 7px 3px 3px 7px;
background: url(http://keith-wood.name/img/midnight.gif) no-repeat -38px 0px; }
.midnight .calculator-keystroke { width: 30px; height: 20px; color: #fff;
background-color: #10085a; font-weight: normal; font-size: 0.8em; }
</style>
<script>
$(function () {
$('#midnightCalc').calculator({calculatorClass: 'midnight',closeText: 'X', useText: 'Y', eraseText: 'N', showOn: 'both', buttonImageOnly: true, buttonImage: 'http://keith-wood.name/img/calculator.png'});
});
</script>
</head>
<body bgcolor=bisque oncontextmenu="return false;">
<center><h1 style="color:red;background-color:navy;">jQuery Calculator Basics (from http://keith-wood.name/calculator.html)</h1></center>
<p> <input type="text" id="midnightCalc"></p>
</body>
</html>
ENDTEXT
Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")
With apie
.silent=.t.
.Navigate(m.lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
.Resizable=0
.Width=600
.Height=600
.Top=50
.Left=(Sysmetric(1)-.Width)/2
BringWindowToTop(.HWnd)
.Visible=.T.
Endwith
Click on code to select [then copy] -click outside to deselect
![]()
*4* *8 themed jQuery datePickers attached to a texbox. *can download complet jQuery project at: https://github.com/rtsinani/jquery-datepicker-skins *these 8 datePickers are adapted from this site(free use) Local m.xstyle m.xstyle=Int(Val(Inputbox("style datePicker 1-8","","3"))) If Empty(m.xstyle) Return .F. Endi If ! Between(m.xstyle,1,8) m.xstyle=1 Endi Local mystyle Do Case Case m.xstyle=1 m.ystyle="santiago" Case m.xstyle=2 m.ystyle="latoja" Case m.xstyle=3 m.ystyle="lugo" Case m.xstyle=4 m.ystyle="cangas" Case m.xstyle=5 m.ystyle="vigo" Case m.xstyle=6 m.ystyle="nigran" Case m.xstyle=7 m.ystyle="melon" Case m.xstyle=8 m.ystyle="siena" Endcase Local m.myvar TEXT to m.myvar textmerge noshow <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="CSS3 skins for jQuery UI datapicker" /> <meta name="keywords" content="jquery datepicker themes, jquery datepicker skins, jquery ui datepicker themes, jquery ui datepicker skins, CSS3 jquery datepicker, CSS3 datepicker, CSS3 calendar, javascript datepicker, javascript calendar" /> <meta property="twitter:card" content="summary"/> <meta property="twitter:site" content="@GitHub"> <meta property="twitter:title" content="rtsinani/jquery-datepicker-skins"/> <title>jquery-datepicker-skins :: CSS3 skins for jQuery UI datepicker</title> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/jquery-ui-1.10.1.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/jquery-ui-1.10.1.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/santiago.datepicker.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/latoja.datepicker.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/lugo.datepicker.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/cangas.datepicker.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/vigo.datepicker.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/nigran.datepicker.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/melon.datepicker.css" rel="stylesheet"> <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/siena.datepicker.css" rel="stylesheet"> <style> body { font: 100% "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; margin: 0; background:fff; } h1 { width:600px; margin: .5em auto 0; padding: 10px 0 0; background: url('') left center no-repeat; height: 43px; line-height: 30px; padding-left: 50px; color: #ed7474; font-size: 1.6em; } h2 { width:600px; margin: .5em auto 0; } article { display: block; width: 620px; margin: 1em auto; margin-left:20px; } input { font-size: 1em; } </style> </head> <body> <h1>jQuery datepicker skins:<<m.ystyle>></h1> <p style="color:maroon;font-size:12px;<width:200px;margin-left:20px;">Click on textbox to fire the attached datePicker</p> <article> <div> <input type="text" id="date-picker-input-1" /> </center> </article> <script src="http://rtsinani.github.io/jquery-datepicker-skins/js/jquery-1.9.1.js"></script> <script src="http://rtsinani.github.io/jquery-datepicker-skins/js/jquery-ui-1.10.1.min.js"></script> <script> $(function() { $( "#date-picker-input-1" ).datepicker({ inline: true, showOtherMonths: true }) .datepicker('widget').wrap('<div class="ll-skin-<<m.ystyle>>"/>'); }); </script> </body> </html> ENDTEXT Set Safe Off Local m.lcdest m.lcdest=Addbs(Sys(2023))+"test.html" Strtofile(m.myvar,m.lcdest) Declare Integer BringWindowToTop In user32 Integer Local apie apie=Newobject("internetexplorer.application") With apie .silent=.t. .Navigate(m.lcdest) .menubar=0 .Toolbar=0 .StatusBar=0 .Resizable=0 .Width=700 .Height=500 .Top=50 .Left=(Sysmetric(1)-.Width)/2 BringWindowToTop(.HWnd) .Visible=.T. Endwith
Click on code to select [then copy] -click outside to deselect
*5* added on 08 december 2015
*a basic jquery looping diaporama (images limited to 20 max picked on local disc)
*can adjust the width,height in tag img as wanted
*libraries (js+css) are in the author site server.(internet connected)
*this seems fast.if download librairies (css+js files) can adjust the delay (actual=3 sec --> 6sec).
local m.yrep,gnbre
m.yrep=Getdir()
If Empty(m.yrep)
Return .F.
Endi
m.yrep=Addbs(m.yrep)
gnbre=Adir(gabase,m.yrep+"*.jpg")
If gnbre=0
Return .F.
Endi
If gnbre>20 &&limit to 20
gnbre=20
Endi
Local m.x
m.x=""
For i=1 To gnbre
m.x=m.x+[<li><img src="file:///]+Strtran(m.yrep+gabase(i,1),"\","/")+[" alt="" title="]+Juststem(gabase(i,1))+[" width="800" height="550" /></li>]+Chr(13)
Endfor
*_cliptext=m.x
Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Diaporama Simple JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Cascading Style Sheets -->
<link href="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/page.css" rel="stylesheet" type="text/css" />
<link href="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/style.css" rel="stylesheet" type="text/css" />
<!-- Javascript -->
<script type="text/javascript" src="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/js/jquery.jDiaporama.js"></script>
<script type="text/javascript" src="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/js/script.js"></script>
</head>
<body oncontextmenu="return false;" topmargin=0 leftmargin=0 scroll="no">
<center><table><tr>
<td width=95%><h1>Diaporama Simple</h1></td>
<td ><input type="button", value="X" style="color:red;float:right;cursor:pointer;" onclick="window.open('','_self');window.close();"></td></tr>
</table></center>
<center><ul class="diaporama1">
<<m.x>>
</ul></center>
<br />
</body>
</html>
ENDTEXT
Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")
With apie
.silent=.t.
.fullscreen=1
.Navigate(m.lcdest)
BringWindowToTop(.HWnd)
.Visible=.T.
Endwith
the yjQuery.zip is relative to the first code (*1*) only.