Jump to content
Fórum Script Brasil
  • 0

Yui Browser History Manager

Nuno Amaral


2 answers to this question

Recommended Posts

  • 0

aparentemente dá sim. é só fechar a tag do javascript e deixar como html puro, tem que apagar os apostrofos os sinais de +, enfim tem que adaptar... agora detalhe, tem alguns ifs ali, try, este menu não está encapsulado nas condicoes destes ifs? se estiver vai ter dor de cabeça para ajeitar isto..

olha abaixo seu arquivo modificado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



<title>YUI Browser History Manager - Simple Navigation Bar Example</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"/>

<link rel="stylesheet" type="text/css" href="yui-bhm-navbar-demo.css"/>

<script src="yahoo-dom-event.js"></script>

<script src="connection.js"></script>

<script src="history-beta.js"></script>






// This example is different from the corresponding tutorial and is not

// to be copied as is. The tutorial is the reference. This example was

// "html-ified" so that it does not require PHP or any other server side

// technology that people don't necessarily have installed.


if ( location.protocol.substr( 0, 4 ) == "file" ) {


'This example uses the XmlHttpRequest object and cannot be run locally.'

+ 'You must copy it to a web server and access it using HTTP.'


} else {

// The initial section will be chosen in the following order:


// URL fragment identifier (it will be there if the user previously

// bookmarked the application in a specific state)


// or

// "section" URL parameter (it will be there if the user accessed

// the site from a search engine result, or did not have scripting

// enabled when the application was bookmarked in a specific state)


// or


// "home" (default)

var bookmarkedSection = YAHOO.util.History.getBookmarkedState( "app" );

var querySection = YAHOO.util.History.getQueryStringParameter( "section" );

var initSection = bookmarkedSection || querySection || "home";

// Register our only module. Module registration MUST take

// place before calling YAHOO.util.History.initialize.

YAHOO.util.History.register( "app", initSection, function( state ) {

// This is called after calling YAHOO.util.History.navigate, or after the user

// has trigerred the back/forward button. We cannot discrminate between

// these two situations.

loadSection( state );

} );

// This function does an XHR call to load and

// display the specified section in the page.

function loadSection( section ) {

var url = "assets/" + section + ".html";

function successHandler( obj ) {

// Use the response...

YAHOO.util.Dom.get( "bd" ).innerHTML = obj.responseText;


function failureHandler( obj ) {

// Fallback...

location.href = "?section=" + section;


YAHOO.util.Connect.asyncRequest( "GET", url,







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;

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 window's onload handler is called 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( "bd" ).innerHTML = "";

loadSection( currentSection );



// Subscribe to this event before calling YAHOO.util.History.initialize,

// or it may never get fired! Note that this is guaranteed to be fired

// after the window's onload event.

YAHOO.util.History.onLoadEvent.subscribe( function() {


} );

// The call to YAHOO.util.History.initialize should ALWAYS be from within

// a script block located RIGHT AFTER the opening body tag (this seems to prevent

// an edge case bug on IE - IE seems to sometimes forget the history when

// coming back to a page, and the back - or forward button depending on the

// situation - is disabled...)

try {


} catch ( e ) {

// The only exception that gets thrown here is when the browser is not A-grade.

// Since scripting is enabled, we still try to provide the user with a better

// experience using AJAX. The only caveat is that the browser history will not work.




<div id="doc">

<div id="hd">

<div id="nav">


<li class="first"><a href="">Home</a></li>

<li><a href="">Overview</a></li>

<li><a href="">Products</a></li>

<li><a href="">About Us</a></li>

<li><a href="">Contact Us</a></li>

<li class="last"><a href="">News</a></li>




<div id="bd">

<div id="home">



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod'

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim'

veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea'

commodo consequat. Duis aute irure dolor in reprehenderit in voluptate'

velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat'

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id'

est laborum.'




<div id="ft">YUI Browser History Manager - Simple Navigation Bar Example</div>






This example requires client-side scripting enabled.




<!-- spaceId: 792404161 -->

<!-- VER-305 -->

<script language=javascript>

if(window.yzq_p==null)document.write("<scr"+"ipt language=javascript src=http://l.yimg.com/us.js.yimg.com/lib/bc/bc_2.0.4.js></scr"+"ipt>");

</script><script language=javascript>



</script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=419nsUJe5GLPdMYlRt_GkusaVfFaMUb74nsABhcD&T=142msa641%2fX%3d1190912635%2fE%3d792404161%2fR%3ddev_net%2fK%3d5%2fV%3d3.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d2797410466%2fQ%3d-1%2fS%3d1%2fJ%3d3BAB49D1"></noscript>

<!-- com2.devnet.scd.yahoo.com compressed/chunked Thu Sep 27 10:03:55 PDT 2007 -->

só que executei o script e não aparece como no modo original, precisa ver os estilos, como não tenho o seu arquivo de estilos talvez isto tenha contribuido para não ter saido exatamente como o original.

tenta ai...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Forum Statistics

    • Total Topics
    • Total Posts
  • Create New...