demarca ao .js que partir daqui, o código é de conteúdo a ser usado na navegação Ajax
usando como exemplo o segundo link da pagina, que é o chamado Ajax
vamo entender como trabalha este link.
browser_info_scroll.js
(//browser_bigger.css%22%20/><link%20rel=%22icon%22%20type=%22image/x-icon%22%20href=%22http://browser.garage.maemo.org/favicon.ico%22%20/><script%20src=%22browser_info_scroll.js%22%20type=%22text/javascript%22></script><style%20type=%22text/css%22><!--body%20%7Bbackground-color:%20#FFFFFF;%7D.style1%20%7Bfont-family:%20Verdana,%20Arial,%20Helvetica,%20sans-serif;font-weight:%20bold;%7D--></style></head><body><div%20id=%22whole%22>%20<!--%20this%20to%20center%20all%20--><div%20id=%22left%22> %20 %20<!--%20contains%20the%20logo%20and%20the%20nav%20buttons%20--><div%20class=%22style1%22%20id=%22logo%22>By%20Reeves</div><ul%20id=%22toolbar%22><li%20id=%22mozilla-tab%22%20class=%22active%22><a%20href=%22#mozilla-pane%22%20onclick=%22blur(this);%20scrollTo('mozilla-pane');%20if%20(!operan800)%20return%20false;%22title=%22Mozilla%22>Mizzilla</a></li><li%20id=%22ajax-tab%22%20class=%22inactive%22><a%20href=%22#ajax-pane%22%20onclick=%22blur(this);%20scrollTo('ajax-pane'); %20if%20(!operan800)%20return%20false;%22title=%22ajax%22>Ajax</a></li><li%20id=%22rss-tab%22%20class=%22inactive%22><a%20href=%22#rss-pane%22%20onclick=%22blur(this);%20scrollTo('rss-pane'); %20if%20(!operan800)%20return%20false;%22title=%22RSS%20Preview%22>RSS</a></li><li%20id=%22addons-tab%22%20class=%22inactive%22><a%20href=%22#addons-pane%22%20onclick=%22blur(this);%20scrollTo('addons-pane'); %20if%20(!operan800)%20return%20false;%22title=%22addons%22>ADDONS</a></li><li%20id=%22certificate-tab%22%20class=%22inactive%22%20style=%22margin-bottom:%2015px;%22><a%20href=%22#certificate-pane%22%20onclick=%22blur(this);%20scrollTo('certificate-pane');%20if%20(!operan800)%20return%20false;%22title=%22Certificate%20details%22>Certificado</a></li><li%20id=%22install-tab%22%20class=%22inactive%22><a%20href=%22#install-pane%22%20onclick=%22blur(this);%20scrollTo('install-pane');%20if%20(!operan800)%20return%20false;%22title=%22Install%22>Install%20How-To</a></li><li%20id=%22docs-tab%22%20class=%22inactive%22><a%20href=%22#docs-pane%22 %20onclick=%22blur(this);%20scrollTo('docs-pane');%20if%20(!operan800)%20return%20false;%22title=%22Documentation%22>Docs</a></li></ul><!--%20End%20of%20the%20toolbar!--><div%20id=%22newfeatures%22>NewFeature</div> %20 %20<div%20id=%22gotonews%22></div></div><!--%20end%20of%20left%20--><div%20id=%22right%22><!--%20the%20whole%20lighter%20area%20with%20content%20--><div%20id=%22scroller%22><!--%20The%20scrollable%20area%20that%20contains%20the%20content%20--><div%20id=%22content%22><!--%20Holds%20the%20sections%20with%20the%20information%20--><!--%20Start%20the%20sections!--><div%20class=%22section%22%20id=%22mozilla-pane%22><h2>Mozilla%20Engine</h2><p>The%20Mozilla%20based%20browser%20for%20maemo%20is%20under%20development%20and%20is%20provided%20here%20for%20maemo%20developers.%20It%20provides%20support%20for%20the%20latest%20web%20standards%20and%20is%20flexible%20and%20extensible,%20and%20is%20based%20onmozilla.org's%20current%20Gecko%20layout%20engine%20which%20will%20be%20version%201.9%20when%20it%20is%20released%20with%20Firefox%203.0.</p><!--%20the%20tables%20here%20are%20a%20just%20to%20get%20these%20centered...--><p>See%20<a%20href=%22#install-pane%22%20onclick=%22blur(this);%20scrollTo('install-pane');%20%22>installation%20instructions</a>%20below.</p></div><div%20class=%22section%22%20id=%22ajax-pane%22><h2>Full%20AJAX</h2><p>Many%20modern%20web%20sites%20are%20designed%20using%20AJAX%20technology.More%20sites%20will%20work%20with%20the%20new%20browser.</p><p%20class=%22hilight%22>Try%20brand%20new%20feature%20from%20Google%20maps%20-%20street%20view.Access%20your%20documents%20in%20Google%20docs%20or%20chat%20with%20Meebo.</p><p%20class=%22hilight%22>Smart%20panning%20control%20feature%20provides%20rich%20web%20experienceenabling%20AJAX%20mouse%20interactions.</p><!--%20the%20tables%20here%20are%20a%20just%20to%20get%20these%20centered...--><table%20class=%22thumbs%22><tr><td%20class=%22screenshot%22><div%20class=%22caption%22><a%20href=%22http://demo.script.aculo.us/shop%22>Drag%20and%20drop%20with%20AJAX</a></div></td></tr></table></div><div%20class=%22section%22%20id=%22rss-pane%22><h2>RSS%20preview</h2><p>Mozilla%20based%20browser%20for%20maemo%20takes%20advantage%20of%20native%20support%20for%20XML%20torender%20RSS%20feeds.</p><p%20class=%22hilight%22>View%20all%20the%20RSS%20feeds%20in%20the%20browser%20window%20with%20the%20RSSfeed%20preview%20feature.</p><table%20class=%22thumbs%22><tr><td%20class=%22screenshot%22><div%20class=%22caption%22>RSS%20preview</div></td></tr></table></div><!--%20end%20div.section#rss-pane%20--><div%20class=%22section%22%20id=%22addons-pane%22><h2>Add-ons</h2><p>Built-in%20support%20for%20a%20number%20of%20Firefox%20and%20Mozilla%20add-onsallows%20you%20to%20enhance%20and%20personalize%20yourbrowsing%20experience.<br%20/><b>Caveat:</b>%20Firefox%20add-ons%20must%20be%20repackaged%20in%20.deb%20packages.XUL%20files,%20such%20as%20those%20for%20Firefox%20UI%20elements,%20are%20not%20supported.</p><p%20class=%22hilight%22>A%20built%20in%20WML%20plug-in%20for%20displaying%20content%20specificallydesigned%20for%20mobile%20devices.</p><table%20class=%22thumbs%22><tr><td%20class=%22screenshot%22><div%20class=%22caption%22>Support%20for%20several%20plug-ins</div></td><td%20class=%22screenshot%22><div%20class=%22caption%22>WML%20add-on</div></td></tr></table></div><div%20class=%22section%22%20id=%22certificate-pane%22><h2>Certificate%20details</h2><p%20class=%22hilight%22>View%20certificate%20details%20for%20secure%20connections%20by%20pressing%20the%20lock%20button.</p><table%20class=%22thumbs%22><tr><td%20class=%22screenshot%22><div%20class=%22caption%22>Button%20to%20display%20the%20certificate%20details%20on%20toolbaron%20every%20secure%20page</div></td><td%20class=%22screenshot%22><div%20class=%22caption%22>Certificate%20details</div></td></tr></table></div><div%20class=%22section%22%20id=%22install-pane%22><h2%20style=%22margin-bottom:%200px;%22>How%20to%20install</h2><ul%20class=%22small_list%22><li%20style=%22list-style-image:url(pics/1.png);%20margin-bottom:%200px;%22>Mozilla%20based%20browser%20for%20maemo%20requires%20the%20latest%20version%20of%20InternetTablet%20OS%202007%20for%20Nokia%20N800.%20Download%20it%20from(<a%20href=%22http://tablets-dev.nokia.com/nokia_N800.php%22>here</a>).</li><li%20style=%22list-style-image:url(pics/2.png);%20margin-bottom:%200px;%22>Use%20your%20N800's%20browser%20to%20load%20<ahref=%22http://repository.maemo.org/extras/dists/3.2/install/microb-browser.install%22>this%20url</a>%20to%20start%20installation.</li><li%20style=%22list-style-image:url(pics/3.png);%20margin-bottom:%200px;%22>Select%20%22Open%22%20from%20the%20%22File%20download%22%20dialog.</li><li%20style=%22list-style-image:url(pics/4.png);%20margin-bottom:%200px;%22>This%20will%20add%20a%20repository%20to%20Application%20manager%20and%20install%20theMozilla%20based%20browser%20for%20maemo.<li%20style=%22font-style:%20italic;%20list-style-type:%20square:%22>If%20your%20list%20of%20repositories%20is%20broken,%20you%20will%20see%20a%20message%20%22Unable%20to%20refresh%20list...%22<br%20/> %20 %20 %20 %20 %20 %20 %20 %20 %20 %20 %20 %20Then%20open%20%22Browse%20installable%20applications%22%20->%20%22web%22%20and%20install%20<b>microb-browser</b>%20package)</li></li><li%20style=%22list-style-image:url(pics/5.png);%20margin-bottom:%200px;%22>Quit%20the%20browser%20and%20launch%20it%20again.</li><li%20style=%22list-style-image:url(pics/6.png);%20margin-bottom:%200px;%22>The%20browser%20will%20switch%20to%20the%20Mozilla%20based%20browser%20for%20maemo.</li></ul><h2%20style=%22margin-top:%2012px;%20margin-bottom:%200px;%22>How%20to%20upgrade</h2><ul%20class=%22small_list%22><li%20style=%22list-style-image:url(pics/1.png)%22>In%20order%20to%20upgrade%20your%20Mozilla%20based%20browser%20for%20maemo,%20all%20you%20need%20to%20do%20isupgrade%20the%20<b>microb-browser</b>%20package%20from%20your%20Application%20manager.</li></ul></div><div%20class=%22section%22%20id=%22docs-pane%22><h2%20style=%22margin-top:%2012px;%20margin-bottom:%200px;%22>Documentation</h2><ul%20class=%22small_list%22><li%20style=%22list-style-image:url(pics/1.png)%22%20>Mozilla%20based%20browser%20for%20maemo%20<a%20href=%22docs/browser_paper.html%22>white%20paper</a></li><li%20style=%22list-style-image:url(pics/2.png)%22%20>How%20to%20create%20your%20own%20<a%20href=%22docs/dummy.html%22>dummy%20eal</a></li><li%20style=%22list-style-image:url(pics/3.png)%22%20>How%20to%20create%20an%20<a%20href=%22docs/extension.html%22>extension%20package</a></li><li%20style=%22list-style-image:url(pics/4.png)%22%20>How%20to%20Build%20<a%20href=%22docs/build_howto.html%22>MicroB%20Engine</a></li><li%20style=%22list-style-image:url(pics/5.png)%22%20>GUADEC%202007%20Talk:%20Embedded%20Browsing%20and%20Open%20Source%20-<a%20href=%22docs/guadec2007/mozilla_browser.odp%22>[ODP]</a>,<a%20href=%22docs/guadec2007/mozilla_browser.ppt%22>[PPT]</a>.</li><li%20style=%22list-style-image:url(pics/6.png)%22%20>List%20of%20<a%20href=%22docs/patches.html%22>patches</a></li></li><li%20style=%22list-style-image:url(pics/7.png)%22%20>Browser-eal%20<a%20target=%22_blank%22%20href=%22docs/eal/index.html%22>Document</a></li></ul><h2%20style=%22margin-top:%2012px;%20margin-bottom:%200px;%22>Links</h2><ul%20class=%22small_list%22><li%20style=%22list-style-image:url(pics/1.png)%22%20>Browser%20page%20in%20<a%20target=%22_blank%22%20href=%22https://garage.maemo.org/projects/browser%22>garage.maemo.org</a></li><li%20style=%22list-style-image:url(pics/2.png)%22%20>Browser%20<a%20target=%22_blank%22%20href=%22https://garage.maemo.org/svn/browser/%22>source%20codes</a></ul></div></div><!--%20end%20of%20content%20--></div><!--%20end%20of%20scroller%20--></div><!--%20end%20of%20right%20--></div><!--%20end%20of%20whole--></body></html>%5B/code)
Code Select
var operan800 = false;
if (navigator.appName == "Microsoft Internet Explorer" && window.innerHeight < 500) { //n800 opera
operan800 = true;
document.write ("<link rel='stylesheet' type='text/css' href='browser_operan800.css' />");
}
else if (window.innerHeight < 500) { // n800 maemo
document.write ("<link rel='stylesheet' type='text/css' href='browser.css' />");
}
else { //desktop
document.write ("<link rel='stylesheet' type='text/css' href='browser_bigger.css' />");
}
var currentSection = "mozilla-pane";
var scroll = { timeScrolled:0,
startPosition:0,
amount:0.0,
duration:0.0,
element:null,
timer:null};
function scrollTo(destination) {
if (currentSection == destination) {
return;
}
var offset = "mozilla-pane";
var position = getElementY(document.getElementById(destination));
var offsetPos = getElementY(document.getElementById(offset));
position = position - offsetPos;
var scroller = document.getElementById("scroller");
scroll.timeScrolled = 0;
scroll.startPosition = scroller.scrollTop;
scroll.amount = position - scroller.scrollTop;
scroll.duration = 25;
scroll.element = scroller;
scroll.timer = setInterval("scrollABit();", 7);
var lastSection = currentSection;
currentSection = destination;
document.getElementById(currentSection.split("-")[0]+"-tab").className = "active";
if (lastSection) {
document.getElementById(lastSection.split("-")[0]+"-tab").className = "inactive";
}
}
function scrollABit() {
if (scroll.timeScrolled > scroll.duration) {
clearInterval(scroll.timer);
scroll.timer = null;
}
else {
scroll.element.scrollTop = ease(scroll.timeScrolled, scroll.startPosition, scroll.amount, scroll.duration);
scroll.timeScrolled++;
}
}
function ease(time, start, change , duration) {
return -change/2 * (Math.cos(Math.PI*time/duration) - 1) + start;
}
function getElementY(element){
var y = 0;
do {
y += element.offsetTop;
} while ( element = element.offsetParent )
return y;
}
browser.css
Code Select
/* N800 normal browser view 650x360*/
* { margin: 0px; padding: 0px; }
body
{
background: url(pics/yellow_gradient.png);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #000000;
font-family: verdana, trebuchet, arial, sans-serif;
font-size: 13px;
color: #000000;
overflow: hidden;
}
h2
{
margin: 10px 15px 10px 0px;
text-align: center;
}
#whole
{
overflow: hidden;
width: 650px;
margin-left: auto;
margin-right: auto;
/* height: 450px; */
}
#left
{
width: 205px;
margin-right: 0px;
float: left;
height: 360px;
background: url(pics/shadowleft.png);
background-repeat: repeat-y;
background-position: 192px 0;
}
#right {
width: 443px;
height: 359px;
float: left;
background: url(pics/yellow_gradient_light.png);
background-repeat: repeat-x;
border-left: thin solid black;
border-right: thin solid black;
overflow: hidden;
/* height: 360px; */
}
#logo
{
width: 164px;
margin: 0px 25px 0px auto;
}
#newfeatures
{
float: right;
margin-left: auto;
margin-right: -5px;
margin-top: -5px;
}
#newfeatures img
{
height: 160px;
}
#gotonews
{
float: right;
margin: 0px 10px 0px 10px;
text-align: center;
}
#gotonews a
{
color: #DAC449;
font-weight: bold;
}
/* The toolbar for the content box */
ul#toolbar {
text-align: right;
list-style: none;
width: 150px;
float: right;
margin-top: 0px;
}
#toolbar li {
font-size: 12px;
height: 29px;
margin-top: 1px;
}
#toolbar li img
{
margin: 1px 7px 0px 0px;
}
#toolbar li.active img
{
margin: 1px 7px 0px -20px;
}
#toolbar li a {
text-decoration: none;
color: black;
border: none;
}
#toolbar li.active {
background: url(pics/tab_down.png);
margin-left: 12px;
border: none;
}
#toolbar li.inactive {
background: url(pics/tab_up.png);
}
#toolbar li a:hover {
}
#toolbar br
{
line-height: 12px;
}
#scroller, #content, .section
{
height: 340px;
}
#scroller {
margin: 0px;
padding: 10px 10px 10px 10px;
overflow: hidden;
}
#content
{
width: 100%;
}
.section
{
margin-bottom: 40px;
}
em
{
color: #eeeeee;
font-size: 12px;
}
img
{
border:none;
margin: 0;
padding: 0;
}
a{ color: #bb4444; border:0 }
a:active{}
a:visited{}
a:hover{color: #FF0000;}
.thumbs
{
margin-top: 15px;
width: 95%;
}
.thumbs td
{
vertical-align: top;
text-align: center;
margin: 0 auto;
}
.screenshot
{
}
.screenshot img
{
width: 120px;
padding: 2px 7px 8px 3px;
background: url(pics/screenshotshadow.png);
}
.caption
{
margin: 0 auto;
text-align: center;
font-size: 11px;
width: 138px;
}
p.hilight
{
background: url(pics/quotes.png);
background-repeat: no-repeat;
margin-top: 15px;
margin-left: 20px;
padding-top: 5px;
padding-left: 25px;
min-height: 20px;
}
.small_list
{
margin-left: 45px;
margin-top: 0px;
font-size: 10px;
}
.small_list li
{
margin-bottom: 0px;
}
.small_list browser_operan800.css
Code Select
/* N800 normal browser view 650x360*/
* { margin: 0px; padding: 0px; }
body
{
background: url(pics/yellow_gradient.png);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #000000;
font-family: verdana, trebuchet, arial, sans-serif;
font-size: 13px;
color: #000000;
}
h2
{
margin: 10px 15px 20px 0px;
text-align: center;
}
#whole
{
width: 650px;
margin-left: auto;
margin-right: auto;
/* height: 450px; */
}
#left
{
width: 205px;
margin-right: 0px;
float: left;
height: 360px;
background: url(pics/shadowleft.png);
background-repeat: repeat-y;
background-position: 192px 0;
position: fixed;
}
#right {
width: 443px;
height: 2860px;
position: absolute;
left: 205px;
background: url(pics/yellow_gradient_light.png);
background-repeat: repeat-x;
background-attachment: fixed;
border-left: thin solid black;
border-right: thin solid black;
margin: 0px;
padding: 0px;
}
#logo
{
width: 164px;
margin: 0px 25px 0px auto;
}
#newfeatures
{
float: right;
margin-left: auto;
margin-right: -5px;
margin-top: 0px;
}
/* The toolbar for the content box */
ul#toolbar {
text-align: right;
list-style: none;
width: 150px;
float: right;
margin-top: 0px;
}
#toolbar li {
font-size: 12px;
height: 33px;
margin-top: 3px;
}
#toolbar li img
{
margin: 1px 7px 0px 0px;
}
#toolbar li.active img
{
margin: 1px 7px 0px -20px;
}
#toolbar li a {
text-decoration: none;
color: black;
border: none;
}
#toolbar li.active {
background: url(pics/tab_up.png);
}
#toolbar li.inactive {
background: url(pics/tab_up.png);
}
#toolbar li a:hover {
}
#toolbar br
{
line-height: 12px;
}
#scroller, #content, .section
{
height: 340px;
}
#scroller {
margin: 0px;
padding: 10px 10px 10px 10px;
}
#content
{
width: 100%;
}
.section
{
margin-bottom:40px;
}
em
{
color: #eeeeee;
font-size: 12px;
}
img
{
border:none;
margin: 0;
padding: 0;
}
a{ color: #bb4444; border:0 }
a:active{}
a:visited{}
a:hover{color: #FF0000;}
.thumbs
{
margin-top: 15px;
width: 95%;
}
.thumbs td
{
vertical-align: top;
text-align: center;
margin: 0 auto;
}
.screenshot
{
}
.screenshot img
{
width: 120px;
padding: 2px 7px 8px 3px;
background: url(pics/screenshotshadow.png);
}
.caption
{
margin: 0 auto;
text-align: center;
font-size: 11px;
width: 138px;
}
p.hilight
{
background: url(pics/quotes.png);
background-repeat: no-repeat;
margin-top: 15px;
margin-left: 20px;
padding-top: 5px;
padding-left: 25px;
min-height: 20px;
}
.small_list
{
margin-left: 45px;
margin-top: 15px;
}
.small_list li
{
margin-bottom: 8px;
}
browser_bigger.css
Code Select
/* N800 normal browser view 672x360*/
* { margin: 0px; padding: 0px; }
body
{
background: url(pics/yellow_gradient.png);
background-repeat: repeat-x;
/* background-attachment: fixed; */
background-color: #000000;
font-family: helvetica, verdana, trebuchet, arial, sans-serif;
font-size: 13px;
color: #000000;
overflow: hidden;
}
h2
{
margin: 0px 15px 30px 0px;
text-align: center;
}
/*#wrong-os h3 {
padding-top: 80px;
background: url(./img/wrong-os-h3.gif) no-repeat top;
}
*/
#whole
{
overflow: hidden;
width: 100%;
max-width: 1000px;
margin: 50px auto;
}
#left
{
width: 250px;
margin-right: 0px;
float: left;
/*height: 80%;*/
}
#right {
width: 620px;
float: left;
background: url(pics/bgbig.png);
/* border: thin solid black; */
overflow: hidden;
height: 530px;
margin-left: -6px;
padding: 20px 40px 20px 40px;
}
#logo
{
width: 164px;
margin: 35px 15px 0px auto;
}
#newfeatures
{
float: right;
margin-left: auto;
margin-top: 25px;
}
#gotonews
{
float: right;
margin: 15px 10px 0px 0px;
text-align: center;
}
#gotonews a
{
color: #DAC449;
font-weight: bold;
}
/* The toolbar for the content box */
ul#toolbar {
text-align: right;
list-style: none;
width: 150px;
float: right;
margin-top: 25px;
}
#toolbar li {
font-size: 12px;
height: 33px;
margin-top: 3px;
}
#toolbar li img
{
margin: 1px 7px 0px 0px;
}
#toolbar li.active img
{
margin: 1px 7px 0px -20px;
}
#toolbar li a {
text-decoration: none;
color: black;
border: none;
}
#toolbar li.active {
background: url(pics/tab_down.png);
margin-left: 12px;
border: none;
}
#toolbar li.inactive {
background: url(pics/tab_up.png);
}
#toolbar li a:hover {
}
#toolbar br
{
line-height: 12px;
}
#scroller, #content, .section
{
margin-top: 40px;
height: 440px;
}
#scroller {
margin: 0px;
/* padding: 20px; */
overflow: hidden;
}
#content
{
width: 100%;
}
.section
{
}
em
{
color: #eeeeee;
font-size: 12px;
}
img
{
border:none;
margin: 0;
padding: 0;
}
a{ color: #991111; border:0 }
a:active{}
a:visited{}
a:hover{color: #FF0000;}
.thumbs
{
margin: 25px auto;
width: 85%;
}
.thumbs td
{
vertical-align: top;
text-align: center;
margin: 0 auto;
}
.screenshot
{
width: 180px;
}
.screenshot img
{
width: 160px;
padding: 5px 8px 9px 9px;
background: url(pics/screenshotshadow_big.png);
}
.caption
{
margin: 0 auto;
text-align: center;
font-size: 11px;
width: 138px;
}
p.hilight
{
background: url(pics/quotes.png);
background-repeat: no-repeat;
margin-top: 15px;
margin-left: 20px;
padding-top: 5px;
padding-left: 25px;
min-height: 20px;
}
.small_list
{
margin-left: 45px;
margin-top: 20px;
}
.small_list li
{
margin-bottom: 10px;
}
Download dos arquivos em um zip:
Não é tão simples meu caro colega, as técnicas em Ajax, são para criar "dinamismo" na visualização e navegação pelo conteúdo da pagina web, quando necessário a exibição de um resultado que uma busca feita no db, o javascript deveria acionar a função que faz isso por baixo dos panos com linguagem base por tras da pagina Ajax, exemplo: PHP, ASP, JSP, etc...
que são linguagens base para utilizar em suas conexões a banco de dados e outros processos mais "restritos a visualização de terceiros"..
uhahuauhuHAhuAUAHuAUAuhaaa...
acho que isso explica...
Ufa terminei!
Gratz Reeves
