使用 jqTouch 进​​行 iPhone 网络开发

发布于 2024-08-30 10:03:13 字数 3945 浏览 1 评论 0原文

我在让过渡适用于我的 iPhone 网站时遇到了一些真正的麻烦,我正在尝试使用添加“翻转”过渡,

<a class="button flip" href="#about">About</a>

但是我没有得到翻转过渡,也没有导航到关于锚点,这是我的 HTML,

    <!DOCTYPE html>
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  
        <title>Elfm Iphone</title>
        <script src="javascript/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="javascript/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/jqtouch.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="themes/apple/theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen" title="no title" charset="utf-8">

        <script type="javascript/text">
            $.jQTouch({
                icon:'kilo.png',
                statusBar:'black'
            });
        </script>
    </head>
        <body>
            <div id="about">
            <div class="toolbar">
                <h1>About</h1>
                <p>Some about blurb, telling the users about the station and the site, in most cases this won't be a very extensive page, just some background information, nothing that will overface the user and not want them to carry on listening. I would probably be a good idea to push the user to the stream as well. This could be done as an internal link, something like, why not listen to our <a href="http://www.twovalleysradio.co.uk/iphone/stream.pls">live feed?</a></p>
            </div>
            </div>
            <div id="blog">
                <div class="toolbar">
                    <h1>Blog</h1>
                </div>
            <p>The blog should be an easy things to implement we should just be able to use the stations RSS feed from wordpress and then style up the entries with CSS to match the look and feel of the sites. We could possibly implement the nice listing features that come with the theme available and if not we could easily build our own theme.</p>
            </div>
            <div id="home" class="current">
                <div class="toolbar">
                    <h1>Home</h1>
                    <a class="button flip" href="#blog">Blog</a>
                </div>
                    <div id="header">
                        <img src="images/elfm-header.png" alt="ELfm" title="ELfm" />
                    </div>
                        <div id="content">
                            <p>Here's a load of text about is and where it's based and why it's coll and who listen to it and a load more blurb and now I'm just adding filler for the sake of it and I know dynamic text is a pain because then we have to consider what happens if there is too much of it but we'll show a live preview on the web service of what the app would look like.</p>
                        </div>
                            <div id="play">
                                <div id="button">
                                    <a class="play_stream" href="">
                                        Play
                                    </a>
                                </div>
                            </div>
            </div>
            <div id="twitter">
                <div id="tweet">

                </div>
            </div>
        </body>
</html>

我正在测试这个是Chrome和Safari以及iPhone模拟器。

I am some real trouble getting the transitions working for my iPhone site, I am trying to add the 'flip' transition using,

<a class="button flip" href="#about">About</a>

However I get no flip transition nor do is navigate to the about anchor, here is my HTML,

    <!DOCTYPE html>
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  
        <title>Elfm Iphone</title>
        <script src="javascript/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="javascript/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/jqtouch.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="themes/apple/theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen" title="no title" charset="utf-8">

        <script type="javascript/text">
            $.jQTouch({
                icon:'kilo.png',
                statusBar:'black'
            });
        </script>
    </head>
        <body>
            <div id="about">
            <div class="toolbar">
                <h1>About</h1>
                <p>Some about blurb, telling the users about the station and the site, in most cases this won't be a very extensive page, just some background information, nothing that will overface the user and not want them to carry on listening. I would probably be a good idea to push the user to the stream as well. This could be done as an internal link, something like, why not listen to our <a href="http://www.twovalleysradio.co.uk/iphone/stream.pls">live feed?</a></p>
            </div>
            </div>
            <div id="blog">
                <div class="toolbar">
                    <h1>Blog</h1>
                </div>
            <p>The blog should be an easy things to implement we should just be able to use the stations RSS feed from wordpress and then style up the entries with CSS to match the look and feel of the sites. We could possibly implement the nice listing features that come with the theme available and if not we could easily build our own theme.</p>
            </div>
            <div id="home" class="current">
                <div class="toolbar">
                    <h1>Home</h1>
                    <a class="button flip" href="#blog">Blog</a>
                </div>
                    <div id="header">
                        <img src="images/elfm-header.png" alt="ELfm" title="ELfm" />
                    </div>
                        <div id="content">
                            <p>Here's a load of text about is and where it's based and why it's coll and who listen to it and a load more blurb and now I'm just adding filler for the sake of it and I know dynamic text is a pain because then we have to consider what happens if there is too much of it but we'll show a live preview on the web service of what the app would look like.</p>
                        </div>
                            <div id="play">
                                <div id="button">
                                    <a class="play_stream" href="">
                                        Play
                                    </a>
                                </div>
                            </div>
            </div>
            <div id="twitter">
                <div id="tweet">

                </div>
            </div>
        </body>
</html>

I am testing this is Chrome and Safari and also the iPhone simulator.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

沫尐诺 2024-09-06 10:03:13

您可能需要将 "javascript/text" 替换为 "text/javascript" :)

You may want to replace "javascript/text" with "text/javascript" :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文