<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><base href=”http://www.ajaxdaddy.com/ajax/ajax-tabs/“>Â Â Â Â Â <style type=”text/css”>Â Â Â Â Â Â Â body {color: white;background: #52616F;}Â Â Â Â Â Â Â Â a {Â color: white; }Â Â Â Â Â </style><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /><title>Ajax Workshop 2: Building Tabbed Content</title><script type=”text/javascript” src=”javascript/prototype.js”></script><style type=”text/css”>body {Â font-family:Arial, Helvetica, sans-serif;Â font-size:12px;}#container {Â width:450px;Â background-color: #52616F;Â color: white;}.tabs {Â width:50px;Â margin-right:10px;Â padding:4px;Â text-align:center;Â float:left;Â cursor:pointer;Â border:1px solid #ccc;Â border-bottom:0;}#content {Â height:350px;Â clear:both;Â border:1px solid #ccc;}#load {Â position:absolute;Â left:0;Â top:0;Â width:100px;Â height:20px;Â background-color:red;Â color:white;Â display:none;}</style></head><body ><center><div id=”load”>Loading…</div>Â <div id=”container”>Â <div class=”tabs” id=”tab1″>Tab 1</div>Â <div class=”tabs” id=”tab2″>Tab 2</div>Â <div class=”tabs” id=”tab3″>Tab 3</div>Â <div class=”tabs” id=”tab4″>Tab 4</div>Â <div id=”content”></div></div></center><script type=”text/javascript”>function init () {var tabs = document.getElementsByClassName(’tabs’);Â for (var i = 0; i < tabs.length; i++) {Â Â $(tabs[i].id).onclick = function () {Â Â Â getTabData(this.id);Â Â }Â }}function getTabData(id) {Â var url = ‘demos/ajax-tabs/process.php’;Â var rand = Math.random(9999);Â var pars = ‘id=’ + id + ‘&rand=’ + rand;Â var myAjax = new Ajax.Request( url, {method: ‘get’, parameters: pars, onLoading: showLoad, onComplete: showResponse} );}function showLoad () {Â $(’load’).style.display = ‘block’;}function showResponse (originalRequest) {Â var newData = originalRequest.responseText;Â $(’load’).style.display = ‘none’;Â $(’content’).innerHTML = newData;}init();</script></body></html>Â Â Â Â Â
Demo
Loading ...
Yorum Yapilmamis
Uzgunum bu yaziya sadece kayitli kullanicilar yorum yapabilir!