jQuery Mobile 的导航栏(navbar)在我的浏览器无法正常显示!

fujet 发布于 2011/10/23 20:30
阅读 7K+
收藏 0

这是在jQueryMobile a4中文手册关于导航栏,为什么我的浏览器无法正常显示?

 

 

====================================================

我的浏览器的显示效果

 

 

 

 

<div data-role="page">
        <div data-role="header" data-position="inline">
            <a href="jQueryTest.htm" data-icon="delete">Cancel</a>
            <h1>
                Edit Contact</h1>
            <a href="jQueryTest.htm" data-icon="check">Save</a>
        </div>

        <div data-role="content" data-theme="a">
            <div data-role="navbar">
                <ul>
                <li><a href="a.html" class="ui-btn-active">One</a></li>
                <li><a href="b.html">Two</a></li>
               </ul>
            </div>
        </div>

        <div data-role="footer">
            <h5>this is footer</h5>
        </div>
    </div>

各们大牛帮看下是什么回事?
加载中
0
小编辑
小编辑

我测试了你的代码在我本地也不行,但我找到原因,你文件中的那些空格有问题,你试着把navbar中所有节点间的空格都删除,然后重新编排。

Midnight
Midnight
小编辑威武!
0
小编辑
小编辑
navbar 元素应该放在 header 里头,可以有两个 header
0
fujet
fujet

引用来自“小编辑”的答案

navbar 元素应该放在 header 里头,可以有两个 header

可是还是不行的啊 我无语了

0
小编辑
小编辑
<div data-role='header'><h1>,.....</h1></div>

<div data-role='header'><div data-role='navbar'><ul><li>....</li></ul></div></div>

应该这样放

0
fujet
fujet

引用来自“小编辑”的答案

<div data-role='header'><h1>,.....</h1></div>

<div data-role='header'><div data-role='navbar'><ul><li>....</li></ul></div></div>

应该这样放

还是不行的

 

0
fujet
fujet

引用来自“小编辑”的答案

<div data-role='header'><h1>,.....</h1></div>

<div data-role='header'><div data-role='navbar'><ul><li>....</li></ul></div></div>

应该这样放

我以为是我的游览问题,为此我下载了最新的chrome,可是还是不行
0
小编辑
小编辑

你看看oschina的移动首页吧 http://m.oschina.net/

html代码已经没问题了,是不是引入的css之类的有问题呢

0
fujet
fujet

引用来自“小编辑”的答案

你看看oschina的移动首页吧 http://m.oschina.net/

html代码已经没问题了,是不是引入的css之类的有问题呢

我的js 和css 都是在官方下载的

这应该不会有什么问题吧

 

fujet
fujet
@红薯 : 我快疯了:引用官方也是不行的啊
红薯
红薯
没问题的,你也可以直接引用官方的js和css文件,无需下载到本地
0
fujet
fujet
<!DOCTYPE html> 
<html> 
<head> 
 <title>Page Title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head> 
<body> 
<div data-role="page">
    <div data-role="header">
        <div data-role="navbar">
       <ul>
        <li><a href="a.html" class="ui-btn-active">One</a></li>
        <li><a href="b.html">Two</a></li>
       </ul>
    </div><!-- /navbar -->
    </div>
    <div data-role="header">
        <div data-role="navbar">
       <ul>
        <li><a href="a.html" class="ui-btn-active">One</a></li>
        <li><a href="b.html">Two</a></li>
       </ul>
    </div><!-- /navbar -->
    </div>
</div>

</body>
</html>

0
fujet
fujet

引用来自“小编辑”的答案

你看看oschina的移动首页吧 http://m.oschina.net/

html代码已经没问题了,是不是引入的css之类的有问题呢

你好,你还在不?

要不你把楼上的代码在你电脑是运行一下,看正常不

- -

返回顶部
顶部