jquery - 需要使用 JQtouch 帮助的 iPad 应用程序

标签 jquery css ajax ipad jqtouch

所以基本上这是我第二次尝试使用 jquery 和 jqtouch 创建 ipad 应用程序(请参阅我的其他问题)

我现在想知道如何将使用一个窗口的 iphone 的现成 jqtouch 主题应用程序拆分为 2 个窗口。所以它更适合ipad

所以当用户访问页面时,导航将在左侧,我将有一个主窗口。

当用户单击左侧的导航链接时,div 信息会出现在右侧的主窗口中,过渡动画仅在主窗口中发生,导航保持不变。

到目前为止,页面上显示的所有菜单链接,单击菜单链接时,菜单链接向左滑动以显示所选链接。

我希望菜单链接位于左侧,单击菜单链接时,所选链接会出现在右侧窗口中,并带有漂亮的过渡动画。

谁能帮帮我?????好吗?

如有任何回复,我们将不胜感激。

我不确定是否允许链接,但我想让它看起来像这样:

http://en.myfreeweb.ru/designing-an-ipad-web-application-with-jqtouc

目前看起来如何:

我的 jQtouch 网站 @import "jqtouch.css"; @import "主题.css";

    <script type="text/javascript" charset="utf-8">
        var jQT = new $.jQTouch({
            icon: 'jqtouch.png',
            addGlossToIcon: false,
            startupScreen: 'jqt_startup.png',
            statusBar: 'black'
        });
    </script>
</head>
<body>
    <div id="page1">
        <div class="toolbar">
            <h1>CISM Diary App</h1>
        </div>
        <ul class="edgetoedge">
            <li><a class="pop" href="#page2">Latest News</a></li>
            <li><a href="#page3">Important Uploads</a></li>
            <li><a href="#page4">Personal Details</a></li>
            <li><a href="#page5">Timetable</a></li>
            <li><a href="#page6">Tasks</a></li>
            <li><a href="#page7">Staff Lookup</a></li>
            <li><a href="#page8">University Information</a></li>
        </ul>
    </div>
    <div id="page2">

        <div class="toolbar">
            <a href="#" class="back">back</a>
            <h1>Latest News</h1>
        </div>
        <div class="info">
            Hello this is page one huiphguipghuipbuytbouybtouokhjpoinugbougnouygnou
        </div>
    </div>
    <div id="page3">
        <div class="toolbar">
            <a href="#" class="back">back</a>
            <h1>Important Uploads</h1>
        </div>
        <div class="info">
            Hello this is page two
        </div>
    </div>
    <div id="page4">
        <div class="toolbar">
            <a href="#" class="back">back</a>
            <h1>Personal Details</h1>
        </div>
        <div class="info">
            Hello this is page three
        </div>
    </div>
    <div id="page5">
        <div class="toolbar">
            <a href="#" class="back">back</a>
            <h1>Timetable</h1>
        </div>
        <div class="info">
            Hello this is page th
        </div>
    </div>
    <div id="page6">
        <div class="toolbar">
            <a href="#" class="back">back</a>
            <h1>Tasks</h1>
        </div>
        <div class="info">
            Hello this is page three
        </div>
    </div>
    <div id="page7">
        <div class="toolbar">
            <a href="#" class="back">back</a>
            <h1>Staff Lookup</h1>
        </div>
        <div class="info">
            Hello this is page three
        </div>
    </div>
    <div id="page8">
        <div class="toolbar">
            <a href="#" class="back">back</a>
            <h1>University Information</h1>
        </div>
        <div class="info">
            Hello this is page three
        </div>
    </div>

</body>

最佳答案

我认为您应该看一下 JQTouch 的这个分支 - 它有一个像 ipad 一样的布局预置到 CSS 中。所以它在左边有一个 Pane 布局 - 在右边有一个主窗口。还结合了 iScroll 以在 Pane 内平滑滚动。

如果您已经使用过原始的 JQTouch,那么这个 JQTouch 分支很容易使用。 请在此处查看 Beedesk 分支和演示:

https://github.com/beedesk/jQTouch

关于jquery - 需要使用 JQtouch 帮助的 iPad 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4798731/

相关文章:

javascript - 如何减少我的代码中出现此类错误的频率?

javascript - 通过从范围内的 ng-repeat 获取动态 id 使用切换

javascript - WordPress 插件,jquery noconflict 问题

html - 菜单项的CSS block 悬停状态

html - 将 3 个 div 并排放置

javascript - 如何将输入值传递给ajax

Jquery获取通过keyup事件从文本输入填充的p标签的宽度

css - 骨架 CSS 类网格

php - jQuery 的 .html() 函数仅适用于第一个元素

jQuery 获取属性