Ir para conteúdo
Fórum Script Brasil
  • 0

Yui Browser History Manager

Nuno Amaral

Perguntado por Nuno Amaral,

 Share

Pergunta

2 respostass a esta questão

Posts Recomendados

  • 0
Halfar

Halfar

Postado
Postado

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">

<html>

<head>

<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>

</head>

<body>

<script>

//------------------------------------------------------------------------

// IMPORTANT NOTE:

// 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" ) {

document.write(

'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,

{

success:successHandler,

failure:failureHandler

}

);

}

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() {

initializeNavigationBar();

} );

// 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 {

YAHOO.util.History.initialize();

} 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.

initializeNavigationBar();

}

</script>

<div id="doc">

<div id="hd">

<div id="nav">

<ul>

<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>

</ul>

</div>

</div>

<div id="bd">

<div id="home">

<h1>Home</h1>

<p>

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.'

</p>

</div>

</div>

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

</div>

<script>

}

</script>

<noscript>

This example requires client-side scripting enabled.

</noscript>

</body>

</html>

<!-- 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>

if(window.yzq_p)yzq_p('P=419nsUJe5GLPdMYlRt_GkusaVfFaMUb74nsABhcD&T=13r7qabee%2fX%3d1190912635%2fE%3d792404161%2fR%3ddev_net%2fK%3d5%2fV%3d1.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d65721903%2fS%3d1%2fJ%3d3BAB49D1');

if(window.yzq_s)yzq_s();

</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 para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...