JQueryMobile按钮不起作用

时间:2013-05-30 13:26:56

标签: html5 jquery-mobile html button

我正在构建一个移动应用程序,主菜单上总共有4个按钮。前2个工作正常但另外2个没有。我把它链接到divs,我已经检查了div名称,它很好,代码是前一个按钮的复制粘贴。

工作一:

<a href="#informacao_geral"
data-transistion="flip"
data-role="button"
data-icon="arrow-r">Informação Geral</a>

不工作:

<a href="#evento"
data-transistion="flip"
data-role="button"
data-icon="arrow-r">Eventos</a>

分工:

<div id="informacao_geral" data-role="page" data-title="Informação Geral">

Div不工作:

<div id="evento" data-role="page" data-title="Eventos">

这是一个奇怪的错误,但我无法弄明白。

1 个答案:

答案 0 :(得分:2)

现在应该可以使用,我已经修复了页面中的一些错误:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <!-- Página Principal -->
        <div id="home" data-role="page" data-title="Ponte de Lima | HOME">
            <!-- Header -->
            <h1>Ponte de Lima - HOME</h1>
            <!--Grupo de botoes do menu principal -->     
            <div data-role="controlgroup">
                <a href="#circuito_turistico"
                data-transistion="flip"
                data-role="button"
                data-icon="arrow-r">Circuíto Turístico</a>
                <a href="#informacao_geral"
                data-transistion="flip"
                data-role="button"
                data-icon="arrow-r">Informaçao Geral</a>
                <a href="#pertodemim"
                data-transistion="flip"
                data-role="button"
                data-icon="arrow-r">Perto de mim</a>
                <a href="#evento"
                data-transistion="flip"
                data-role="button"
                data-icon="arrow-r">Eventos</a>
                <a href="#monumentos"
                data-transistion="flip"
                data-role="button"
                data-icon="arrow-r">Monumentos</a>
                <a href="#galeria"
                data-transistion="flip"
                data-role="button"
                data-icon="arrow-r">Galeria</a>
                <a href="#servicos"
                data-transistion="flip"
                data-role="button"
                data-icon="arrow-r">Serviços</a>
                <a href="#contactos"
                data-transition="flip"
                data-role="button"
                data-icon="arrow-r">Contactos</a>
            </div>
            <div data-role="footer" data-position="fixed">            
                <center>
                    <span style="font-size:12px;">Desenvolvido por whatAdev</span>
                </center>
            </div>
        </div>
        <!--Fim da pág. Home -->

        <!-- Icon no canto superior direito com a nossa info -->
        <div data-role="page" id="info">
            <div data-role="header">
                <h1>Sobre os criadores</h1>
            </div>
            <div data-role="content">
                <p>Esta aplicaçao foi desenvolvida por Joao Pereira e Carlos Barros. Visite whatAdev.com para mais informaçoes sobre os criadores.</p>
                <a href="#"
                data-role="button"
                data-inline="true"
                data-rel="back"
                >Voltar</a>
                <a href="#home"
                data-role="button"
                data-inline="true"
                >Ínicio</a>
            </div>
        </div>
        <!-- Fim do pág. Info -->

        <!-- Inicio da página Circuito Turistico -->
        <div id="circuito_turistico" data-role="page" data-title="Ponte de Lima - Circuíto Turístico">
            <div data-role="header" data-position="fixed"data-id="ptl_header">
                <h1>Circuíto Turístico</h1>
                <a href="#home" data-icon="home" data-transition="pop" data-iconpos="notext"></a>
                <a href="#info"
                data-icon="info"
                data-iconpos="notext"
                data-rel="dialog"
                class="ui-btn-right"
                data-transition="pop"
                >Info</a>
            </div>
            <div data-role="content">
                Inserir Conteudo posteriormente
            </div><!-- content -->
            <div data-role="footer" data-position="fixed" data-id="ptl_footer">            
                <div data-role="navbar">    
                    <ul>
                        <li><a href="#"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Circuíto Turístico</a></li>
                        <li><a href="#informacao_geral"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Informaçao Geral</a></li>
                        <li><a href="#pertodemim"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Perto de mim</a></li>
                        <li><a href="#evento"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Eventos</a></li>
                        <li><a href="#monumentos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Monumentos</a></li>
                        <li><a href="#galeria"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Galeria</a></li>
                        <li><a href="#servicos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Serviços</a></li>
                        <li><a href="#contactos"
                            data-transition="flip"
                            data-role="button"
                            data-icon="arrow-r">Contactos</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Fim da pág. Circuito Turistico -->

        <!-- Inicio da página Informaçao Geral -->
        <div id="informacao_geral" data-role="page" data-title="Ponte de Lima - Informaçao Geral">
            <div data-role="header" data-position="fixed"data-id="ptl_header">
                <h1>Informaçao Geral</h1>
                <a href="#home" data-icon="home" data-transition="pop" data-iconpos="notext"></a>
                <a href="#info"
                data-icon="info"
                data-iconpos="notext"
                data-rel="dialog"
                class="ui-btn-right"
                data-transition="pop"
                >Info</a>
            </div>
            <div data-role="content">
                <div data-role="collapsible-set">
                    <div data-role="collapsible"
                    data-collapsed="false">
                        <h3>Sobre a vila</h3>
                        <p>Ponte de Lima é a vila mais antiga de Portugal e é reconhecida como um património universal, um território sem fronteiras mediador de um movimento que entende o nosso planeta como um lugar sagrado.</p></div>
                    <div data-role="collapsible">
                        <h3>Turismo em Ponte de Lima</h3>
                        <p>Ponte de Lima é berço do Turismo de Habitaçao, da casta Loureiro que distingue o Vinho Verde e do Arroz de Sarrabulho apreciado nos mais recônditos lugares do mundo. É a Vila mais florida e mais antiga de Portugal.</p></div>
                    <div data-role="collapsible">
                        <h3>Atracçoes turísticas</h3>
                        <p>Dignos de registo é a Área de Paisagem Protegida, o Festival Internacional de Jardins, a Feira do Cavalo ou mesmo o Caminho Portugues de Santiago, como pólos de atracçao turística cada vez mais internacional.</p>
                    </div>            
                </div>                          
            </div><!-- content -->
            <div data-role="footer" data-position="fixed" data-id="ptl_footer">            
                <div data-role="navbar">    
                    <ul>
                        <li><a href="#circuito_turistico"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Circuíto Turístico</a></li>
                        <li><a href="#"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Informaçao Geral</a></li>
                        <li><a href="#pertodemim"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Perto de mim</a></li>

                        <li><a href="#evento"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Eventos</a></li>

                        <li><a href="#monumentos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Monumentos</a></li>

                        <li><a href="#galeria"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Galeria</a></li>
                        <li><a href="#servicos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Serviços</a></li>
                        <li><a href="#contactos"
                            data-transition="flip"
                            data-role="button"
                            data-icon="arrow-r">Contactos</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Fim da pag. informacao geral -->

        <!-- Inicio da página Perto de mim -->
        <div id="pertodemim" data-role="page" data-title="Ponte de Lima - Perto de Mim">
            <div data-role="header" data-position="fixed"data-id="ptl_header">
                <h1>Perto de Mim</h1>
                <a href="#home" data-icon="home" data-transition="pop" data-iconpos="notext"></a>
                <a href="#info"
                data-icon="info"
                data-iconpos="notext"
                data-rel="dialog"
                class="ui-btn-right"
                data-transition="pop"
                >Info</a>
            </div>
            <div data-role="content">
                Conteudo a aplicar posteriormente com mapas.          
            </div><!-- content -->
            <div data-role="footer" data-position="fixed" data-id="ptl_footer">            
                <div data-role="navbar">    
                    <ul>
                        <li><a href="#circuito_turistico"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Circuíto Turístico</a></li>
                        <li><a href="#informacao_geral"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Informaçao Geral</a></li>
                        <li><a href="#"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Perto de mim</a></li>

                        <li><a href="#evento"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">evento</a></li>

                        <li><a href="#monumentos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Monumentos</a></li>

                        <li><a href="#galeria"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Galeria</a></li>
                        <li><a href="#servicos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Serviços</a></li>
                        <li><a href="#contactos"
                            data-transition="flip"
                            data-role="button"
                            data-icon="arrow-r">Contactos</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Fim da pag. perto de mim -->

        <!-- Inicio da página evento -->
        <div id="evento" data-role="page" data-title="Ponte de Lima - Eventos">
            <div data-role="header" data-position="fixed"data-id="ptl_header">
                <h1>Eventos</h1>
                <a href="#home" data-icon="home" data-transition="pop" data-iconpos="notext"></a>
                <a href="#info"
                data-icon="info"
                data-iconpos="notext"
                data-rel="dialog"
                class="ui-btn-right"
                data-transition="pop"
                >Info</a>
            </div>
            <div data-role="content">
                <div data-role="collapsible-set">
                    <div data-role="collapsible">
                        <h3>
                            Feiras Novas
                        </h3>
                        <p>
                            No segundo fim-de-semana de Setembro, realizam-se as festas do concelho que se denominam de Feiras Novas. <br/>
                            As Feiras Novas oferecem aos limianos e aos milhares de forasteiros, tres dias e outras tantas noites de cor, alegria, folia e ritmo. Para além da música, folclore e fogo de artifício, há ainda espaço para concursos pecuários, corridas de garranos, cortejos etnográfico e histórico, bandas de música, gigantones e cabeçudos, grupos de bombos e para a procissao que encerra o ciclo das romarias do Alto Minho.<br/>
                            Mas é o povo com a sua alegria e espontaneidade, a sua forma de fazer e estar na festa, as rusgas e os cantares ao desafio, o folclore em qualquer canto da vila que transforma as Feiras Novas num momento único e na romaria que é considerada o "maior congresso ao vivo da cultura popular em Portugal".
                        </p>
                    </div>
                    <div data-role="collapsible">
                        <h3>
                            Vaca das Cordas
                        </h3>
                        <p>
                            Podemos chamar-lhe a tradiçao mais tradicional de Ponte de Lima, pois perde-se no pó dos tempos a origem de tao peculiar manifestaçao. Ao final da tarde, milhares de pessoas aguardam impacientes que a Vaca das Cordas (actualmente um touro bravo) saia para as ruas e cumpra a tradiçao.<br/>
                            Até ao pôr do sol, no areal junto ao rio, as correrias, os trambolhoes e as quedas sucedem-se, numa cadencia de espectáculo e de emoçao que só acontece na Vaca das Cordas.
                        </p>
                    </div>

                    <div data-role="collapsible">
                        <h3>Festival Expolima</h3>
                        <p>No extraordinário ambiente da Expolima, junto a suavidade das águas do Rio Lima, realiza-se o Festival Expolima.<br/>
                            Aliar a esta diversidade musical a gastronomia limiana, a beleza do Festival Internacional de Jardins, o santuário do ambiente das Lagoas, a ruralidade da Quinta Pedagógica de Pentieiros, a magnificencia do Museu dos Terceiros e toda a medievalidade que se respira em Ponte de Lima, completam todos os motivos para uma estadia nesta terra nobre rodeada pela mais bonita regiao de Portugal.</p>
                    </div>

                    <div data-role="collapsible">
                        <h3>Festival Internacional de Jardins</h3>
                        <p>Ponte de Lima orgulha-se de ser a capital portuguesa dos jardins. Desde 2005 realiza anualmente o Festival Internacional de Jardins, iniciativa inédita em Portugal e que vem de encontro as políticas ambientais e paisagistas.<br/>
                            Todos os anos, de Maio a finais de Outubro, dezenas de milhar de visitantes descobrem doze jardins diferentes, submetidos, ou nao, a uma temática definida, que pretendem realçar as diferentes ópticas e formas de estar perante esta arte que é a construçao de jardins efémeros.<br/>
                            Juntamente com o Festival de Chaumont, em França e o Festival der Gärten, na regiao de Kamptal na Áustria, o Festival Internacional de Jardins forma a Rede Europeia de Festivais de Jardins. <br/>
                            Os jardins continuam a ser uma tradiçao em Ponte de Lima, que já venceu o Concurso Nacional de Vilas e Cidades Floridas por tres vezes, para além de ter ganho as medalhas de prata e de bronze no Concurso de Vilas e Cidades Mais Floridas da Europa.</p>
                    </div>

                    <div data-role="collapsible">
                        <h3>Feira de Caça, Pesca e Lazer de Ponte de Lima</h3>
                        <p>A Feira de Caça, Pesca e Lazer de Ponte de Lima, pretende ser o motor de divulgaçao das alternativas a tradicional oferta turística. O evento visa divulgar todos os ramos, serviços e actividades ligadas ao sector da caça, da pesca e lazer, colmatando uma lacuna importante, numa regiao cheia de tradiçoes e potencial turístico.</p>
                    </div>

                    <div data-role="collapsible">
                        <h3>Feira de Caça, Pesca e Lazer de Ponte de Lima</h3>
                        <p>A Feira de Caça, Pesca e Lazer de Ponte de Lima, pretende ser o motor de divulgaçao das alternativas a tradicional oferta turística. O evento visa divulgar todos os ramos, serviços e actividades ligadas ao sector da caça, da pesca e lazer, colmatando uma lacuna importante, numa regiao cheia de tradiçoes e potencial turístico.</p>
                    </div>

                    <div data-role="collapsible">
                        <h3>Feira do Cavalo</h3>
                        <p>
                            A tradiçao equestre no concelho obrigam a uma atençao muito especial, pelo que a Feira do Cavalo é o maior certame do género realizado no norte de Portugal. Cavalos de raça, oriundos de várias regioes e cavaleiros de nomeada, dao o brilho a esta manifestaçao que transforma a zona da Expolima, em Ponte de Lima, num picadeiro gigantesco, tendo como pano de fundo o Rio Lima.
                        </p>
                    </div>

                    <div data-role="collapsible">
                        <h3>Feira Quinzenal</h3>
                        <p>
                            D. Teresa, mae de D. Afonso Henriques, primeiro Rei de Portugal, na carta de foral outorgada a Ponte de Lima em 4 de Março de 1125, refere já a sua existencia, facto que a torna a primeira feira documentada em Portugal.<br/>
                            O tempo nao acabou com esta tradiçao e quinzenalmente, as segundas-feiras (o povo chama as outras solteiras), na margem esquerda do rio, a feira mais antiga de Portugal, obrigatoriamente, continua a cumprir-se.

                            Vir mercar nas ruas artificiais criadas entre as tendas do areal é uma experiencia única para quem quiser viver um pouco do que resta dos velhos hábitos medievais, pelo que nao pode nem deve deixar de o fazer.
                        </p>
                    </div>
                </div>
            </div><!-- content -->



            <div data-role="footer" data-position="fixed" data-id="ptl_footer">            
                <div data-role="navbar">    
                    <ul>
                        <li><a href="#circuito_turistico"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Circuíto Turístico</a></li>
                        <li><a href="#informacao_geral"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Informaçao Geral</a></li>
                        <li><a href="#pertodemim"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Perto de mim</a></li>

                        <li><a href="#"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">evento</a></li>

                        <li><a href="#monumentos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Monumentos</a></li>

                        <li><a href="#galeria"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Galeria</a></li>
                        <li><a href="#servicos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Serviços</a></li>
                        <li><a href="#contactos"
                            data-transition="flip"
                            data-role="button"
                            data-icon="arrow-r">Contactos</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Fim da pag. evento -->

        <!-- Inicio da página Monumentos -->
        <div id="monumentos" data-role="page" data-title="Ponte de Lima - Monumentos">
            <div data-role="header" data-position="fixed"data-id="ptl_header">
                <h1>Monumentos</h1>
                <a href="#home" data-icon="home" data-transition="pop" data-iconpos="notext"></a>
                <a href="#info"
                data-icon="info"
                data-iconpos="notext"
                data-rel="dialog"
                class="ui-btn-right"
                data-transition="pop"
                >Info</a>
            </div>
            <div data-role="content">

            </div><!-- content -->
            <div data-role="footer" data-position="fixed" data-id="ptl_footer">            
                <div data-role="navbar">    
                    <ul>
                        <li><a href="#circuito_turistico"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Circuíto Turístico</a></li>
                        <li><a href="#informacao_geral"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Informaçao Geral</a></li>
                        <li><a href="#pertodemim"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Perto de mim</a></li>

                        <li><a href="#evento"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Eventos</a></li>

                        <li><a href="#"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Monumentos</a></li>

                        <li><a href="#galeria"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Galeria</a></li>
                        <li><a href="#servicos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Serviços</a></li>
                        <li><a href="#contactos"
                            data-transition="flip"
                            data-role="button"
                            data-icon="arrow-r">Contactos</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Fim da pag. monumentos -->

        <!-- Inicio da página Circuito Turistico -->
        <div id="galeria" data-role="page" data-title="Ponte de Lima - Galeria">
            <div data-role="header" data-position="fixed"data-id="ptl_header">
                <h1>Galeria</h1>
                <a href="#home" data-icon="home" data-transition="pop" data-iconpos="notext"></a>
                <a href="#info"
                data-icon="info"
                data-iconpos="notext"
                data-rel="dialog"
                class="ui-btn-right"
                data-transition="pop"
                >Info</a>
            </div>
            <div data-role="content">
                Inserir Conteudo posteriormente
            </div><!-- content -->
            <div data-role="footer" data-position="fixed" data-id="ptl_footer">            
                <div data-role="navbar">    
                    <ul>
                        <li><a href="#circuito_turistico"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Circuíto Turístico</a></li>
                        <li><a href="#informacao_geral"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Informaçao Geral</a></li>
                        <li><a href="#pertodemim"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Perto de mim</a></li>
                        <li><a href="#evento"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Eventos</a></li>
                        <li><a href="#monumentos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Monumentos</a></li>
                        <li><a href="#"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Galeria</a></li>
                        <li><a href="#servicos"
                            data-transistion="flip"
                            data-role="button"
                            data-icon="arrow-r">Serviços</a></li>
                        <li><a href="#contactos"
                            data-transition="flip"
                            data-role="button"
                            data-icon="arrow-r">Contactos</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Fim da pág. Galeria -->
    </body>
</html>