Hi,
I search a example with bootstrapp and spider basic.
Sincerely
Eric
LoadScript() and bootstrap
Re: LoadScript() and bootstrap
Small example:
Code: Select all
Procedure FloatingWin(id.s, x, y, width, height, backgroundColor.s="#ffffff", content.s="")
Protected s.s = "<div id='"+id+"' style='position: absolute; left: "+x+"px; top:"+y+"px; width:"+width+"px; height:"+height+"px; background-color:"+backgroundColor+";'>"+content+"</div>"
!$("body").append(v_s);
EndProcedure
Procedure BootstrapMain(URL$, Success)
If Success
; https://getbootstrap.com/docs/4.4/components/alerts/
FloatingWin("alert1",10,10,800,50,"#ffff00",
"<div class='alert alert-danger' role='alert'>"+
"A simple danger alert With <a href='#' class='alert-link'>an example link</a>. Give it a click If you like.</div>")
; https://getbootstrap.com/docs/4.4/components/navs/
FloatingWin("popup1",50,90,710,50,"#000000",
"<nav class='nav'>"+
"<a class='nav-link active' href='#'>Active</a>"+
"<a href='https://www.spiderbasic.com' class='nav-link' href='#'>SpiderBasic</a>"+
"<a href='http://forums.spiderbasic.com/' class='nav-link' href='#'>SB Forum</a>"+
"<a href='https://www.purebasic.com' class='nav-link' href='#'>PureBasic</a>"+
"<a href='https://www.purebasic.fr/english/index.php' class='nav-link' href='#'>PB Forum</a>"+
"<a class='nav-link' href='#'>Link</a>"+
"<a class='nav-link disabled' href='#' tabindex='-1' aria-disabled='true'>Disabled</a>"+
"</nav>")
Else
Debug "Error while loading: "+URL$
EndIf
EndProcedure
Procedure LoadBootstrapCSS(URL$, Success)
If Success
LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js", @BootstrapMain())
Else
Debug "Error while loading: "+URL$
EndIf
EndProcedure
LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", @LoadBootstrapCSS(),#PB_Script_CSS)
cya,
...Danilo
...Danilo
Re: LoadScript() and bootstrap
hi
Thank you very much, it's work fine.
eric
Thank you very much, it's work fine.
eric
Re: LoadScript() and bootstrap
Another example:
Code: Select all
;
; SB template for:
;
; 'JavaScript DOM Crash Course' by Traversy Media (https://www.traversymedia.com)
;
; YouTube: https://www.youtube.com/playlist?list=PLillGF-RfqbYE6Ik_EuXA2iZFcE082B3s
;
Procedure AppendBody(content.s)
!$("body").append(v_content);
EndProcedure
Procedure Main()
AppendBody( ""+
"<header id='main-header' class='bg-success text-white p-4 mb-3'>"+
" <div class='container'>"+
" <h1 id='header-title'>Item Lister <span style='display:none'>123</span></h1>"+
" </div>"+
"</header>"+
"<div class='container'>"+
" <div id='main' class='card card-body'>"+
" <h4 class='title'>Add Items</h4>"+
" <form class='form-inline mb-3'>"+
" <input type='text' class='form-control mr-2'>"+
" <input type='submit' class='btn btn-dark' value='Submit'>"+
" </form>"+
" <h4 class='title'>Items</h4>"+
" <ul id='items' class='List-group'>"+
" <li class='list-group-item'>Item 1</li>"+
" <li class='list-group-item'>Item 2</li>"+
" <li class='list-group-item'>Item 3</li>"+
" <li class='list-group-item'>Item 4</li>"+
" </ul>"+
" </div>"+
"</div>")
! console.dir(document);
! console.log(document.domain);
! console.log(document.URL);
!
! var odd = document.querySelectorAll('li:nth-child(odd)');
! var even= document.querySelectorAll('li:nth-child(even)');
!
! for(var i = 0; i < odd.length; i++){
! odd[i].style.backgroundColor = '#f4f4f4';
! even[i].style.backgroundColor = '#ccc';
! }
EndProcedure
Procedure BootstrapMain(URL$, Success)
If Success : Main() : Else : Debug "Error while loading: "+URL$ : EndIf
EndProcedure
Procedure LoadBootstrapCSS(URL$, Success)
If Success
LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js", @BootstrapMain())
Else
Debug "Error while loading: "+URL$
EndIf
EndProcedure
LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", @LoadBootstrapCSS(),#PB_Script_CSS)
cya,
...Danilo
...Danilo
Re: LoadScript() and bootstrap
HI,
Thank you for another example but I search to watch html page in same windows that menu not in another windows, could you help me to make this ?
Thank by advance
Eric
Thank you for another example but I search to watch html page in same windows that menu not in another windows, could you help me to make this ?
Thank by advance
Eric
Re: LoadScript() and bootstrap
HI,
WHy on this example, when you click en menu1 we have nothing ?
Thank by advance
Eric
WHy on this example, when you click en menu1 we have nothing ?
Thank by advance
Eric
Code: Select all
Procedure FloatingWin(id.s, x, y, width, height, backgroundColor.s="#ffffff", content.s="")
Protected s.s = "<div id='"+id+"' style='position: absolute; left: "+x+"px; top:"+y+"px; width:"+width+"px; height:"+height+"px; background-color:"+backgroundColor+";'>"+content+"</div>"
!$("body").append(v_s);
EndProcedure
Procedure BootstrapMain(URL$, Success)
If Success
; https://getbootstrap.com/docs/4.4/components/navs/
FloatingWin("popup1",50,90,710,50,"#000000",
"<div class='container'>"+
"<ul class='nav nav-pills' role='tablist'>"+
" <li class='nav-item'>"+
"<a class='nav-link active' Data-toggle='pill' href='#home'>Home</a>"+
"</li><li class='nav-item'>"+
"<a class='nav-link' Data-toggle='pill' href='#menu1'>Menu 1</a></li>"+
"<li class='nav-item'>"+
" <a class='nav-link' Data-toggle='pill' href='#menu2'>Menu 2</a>"+
" </li></ul>"+
"<div class='tab-content'>"+
"<div id='home' class='container tab-pane active'><br><h3>Info</h3>"+
"<p>Test menu info eric.</p></div>"+
" <div id='menu1' class='container tab-pane fade'><br>"+
" <h3>Menu 1</h3><p>menu 1.</p></div></div>")
Else
Debug "Error while loading: "+URL$
EndIf
EndProcedure
Procedure LoadBootstrapCSS(URL$, Success)
If Success
LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js", @BootstrapMain())
Else
Debug "Error while loading: "+URL$
EndIf
EndProcedure
LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", @LoadBootstrapCSS(),#PB_Script_CSS)