jQueryモバイルが正しく表示されない

A bottom navbar in jQuery mobile looking like iPhone navbar, possible?で説明されているようにjquery mobileを使用しようとしています。正しく表示されていないjQueryモバイルが正しく表示されない

<html> 
<head> 

    <style type="text/css"> 
.nav-glyphish-example .ui-btn .ui-btn-inner { 
    padding-top: 40px !important; 
} 

.nav-glyphish-example .ui-btn .ui-icon { 
    width: 45px!important; 
    height: 35px!important; 
    margin-left: -24px !important; 
    box-shadow: none!important; 
    -moz-box-shadow: none!important; 
    -webkit-box-shadow: none!important; 
    -webkit-border-radius: none !important; 
    border-radius: none !important; 
} 

#favorite .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -345px -112px; 
    background-repeat: no-repeat; 
} 

#recent .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -61px; 
    background-repeat: no-repeat; 
} 

#contacts .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -540px; 
    background-repeat: no-repeat; 
} 

#keypad .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -783px; 
    background-repeat: no-repeat; 
} 

#voicemail .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -394px -733px; 
    background-repeat: no-repeat; 
} 
    </style> 


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> 

</head> 

<body> 

<div data-role="page"> 
    <div data-role="content"> 
     <div data-role="footer" class="nav-glyphish-example"> 
      <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
      <ul> 
       <li><a href="#" id="favorite" data-icon="custom">Favorite</a></li> 
       <li><a href="#" id="recent" data-icon="custom">Recent</a></li> 
       <li><a href="#" id="contacts" data-icon="custom">Contacts</a></li> 
       <li><a href="#" id="keypad" data-icon="custom">Keypad</a></li> 
       <li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 
</div>  

</body> 
</html>

しかし出力：

enter image description here

出典

2012-03-08 blue-sky

あなたはおそらく含まれている必要があります

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

はHERESに私のコードは、私は1つのファイルにすべてのコードを追加してみました

出典

2012-03-08 22:32:59 r0m4n

これが答えです。私はローカルでテストし、CSSを組み込むことによって適切に動作します。 –

jQueryモバイルが正しく表示されない

答えて

関連する問題