Tweet
Hallo,
habe jetzt mal den Versuch gestartet, mich der YUI zu widmen. Browser History Manager, ausreichend Widgets, und ne Mailingliste haben die bestimmt auch.
Die Mailing-Liste gibt es schon, nur ist die nicht sonderlich kommunikativ. Und die Dokumentation läßt auch zu wünschen übrig.
Also hab ich mich mal dran gestetzt, und den BHM eingebunden.
http://developer.yahoo.com/yui/examp...ry-navbar.html
Nur leider wird bei den Plagegeistern aus dem hause Microsoft die ganze Seite reloaded.
Evt. kann jemand ein Wenig Licht ins Dunkle bringen
Grüße
derTrallala
habe jetzt mal den Versuch gestartet, mich der YUI zu widmen. Browser History Manager, ausreichend Widgets, und ne Mailingliste haben die bestimmt auch.
Die Mailing-Liste gibt es schon, nur ist die nicht sonderlich kommunikativ. Und die Dokumentation läßt auch zu wünschen übrig.
Also hab ich mich mal dran gestetzt, und den BHM eingebunden.
http://developer.yahoo.com/yui/examp...ry-navbar.html
Nur leider wird bei den Plagegeistern aus dem hause Microsoft die ganze Seite reloaded.
PHP-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Browser History Manager - Simple Navigation Bar Example</title>
<html>
<link rel = "stylesheet" type = "text/css" href = "css/reset-fonts-grids.css">
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<script src = "build/yahoo/yahoo.js">
</script>
<script src = "build/dom/dom.js">
</script>
<script src = "build/event/event.js">
</script>
<script src = "build/connection/connection.js">
</script>
<script src = "build/history/history-beta.js">
</script>
<body>
<script>
function loadSection( section )
{
var url = section + ".php";
function successHandler( obj )
{
// Use the response...
YAHOO.util.Dom.get("col3").innerHTML = obj.responseText;
}
function failureHandler( obj )
{
// Fallback...
location.href = "?section=" + section;
}
YAHOO.util.Connect.asyncRequest("GET", url,
{
success: successHandler,
failure: failureHandler
});
}
var bookmarkedSection = YAHOO.util.History.getBookmarkedState("navbar");
var querySection = YAHOO.util.History.getQueryStringParameter("section");
var initialSection = bookmarkedSection || querySection || "home";
YAHOO.util.History.register("navbar", initialSection, function(state)
{
// Load the appropriate section:
loadSection(state);
});
function initializeNavigationBar()
{
// Process links
var anchors = YAHOO.util.Dom.get("nav").getElementsByTagName("a");
for (var i = 0, len = anchors.length; i < len; i++)
{
var anchor = anchors[i];
YAHOO.util.Event.addListener(anchor, "click", function(evt)
{
var href = this.getAttribute("href");
var section = YAHOO.util.History.getQueryStringParameter("section", href) || "home";
// If the Browser History Manager was not successfuly initialized,
// the following call to YAHOO.util.History.navigate will throw an
// exception. We need to catch it and update the UI. The only
// problem is that this new state will not be added to the browser
// history.
//
// Another solution is to make sure this is an A-grade browser.
// In that case, under normal circumstances, no exception should
// be thrown here.
try
{
YAHOO.util.History.navigate("app", section);
}
catch (e)
{
loadSection(section);
}
YAHOO.util.Event.preventDefault(evt);
});
}
// This is the tricky part... The onLoad event is fired when the user
// comes back to your page using the back button. In this case, the
// actual section that needs to be loaded corresponds to the last section
// visited before leaving the page, and not the initial section. This can
// be retrieved using getCurrentState:
var currentSection = YAHOO.util.History.getCurrentState("app");
if (location.hash.substr(1).length > 0)
{
// If the section requested in the URL fragment is different from
// the section loaded in index.php, we have an unpleasant refresh
// effect because we do an asynchronous XHR call. Instead of doing
// a synchronous XHR call, we can fix this by erasing the initial
// content of bd:
if (currentSection != querySection)
YAHOO.util.Dom.get("col3").innerHTML = "";
loadSection(currentSection);
}
}
YAHOO.util.History.onLoadEvent.subscribe(function()
{
initializeNavigationBar();
});
try
{
YAHOO.util.History.initialize();
}
catch (e)
{
initializeNavigationBar();
}
</script>
<div id = "doc" style="border:1px red dashed;width: 100%;height: 300px;">
<div id = "hd">
<img src = "http://ggop.net/yui/examples/history/assets/yui.gif" alt = "YUI Logo" id = "logo" />
<div id = "nav">
<ul>
<li><a href = "?section=home">Home</a></li>
<li><a href = "?section=overview">Overview</a></li>
<li><a href = "?section=products">Products</a></li>
<li><a href = "?section=contactus">Contact Us</a></li>
</ul>
</div>
</div>
<div id = "col3">
<?php
$section="home";
if (isset($_GET["section"]))
$section=$_GET["section"];
include("./inc/".$section . ".php");
?>
</div>
</div>
</body>
</html>
Grüße
derTrallala
Kommentar