asp.net web 表单中的 jQuery Mobile 类型页面导航？答案

【问题标题】：jQuery Mobile type page navigation in asp.net web forms?asp.net web 表单中的 jQuery Mobile 类型页面导航？
【发布时间】：2014-06-11 21:08:52
【问题描述】：

我有一个 asp.net web 应用程序和两个网页和一个母版页。两个页面使用相同的母版页。

我需要从一个页面导航到另一个页面，而不需要让屏幕变为空白或提供某种过渡效果，就像 jquery 移动页面导航 中发生的那样。

正在移动设备上查看网页！关于如何在不使用 jQuery mobile 的情况下实现这一点的任何建议。

或者是否有一个单独的插件只处理页面导航，提供更好的用户体验。？

【问题讨论】：

标签： asp.net jquery-mobile jquery-plugins webforms

【解决方案1】：

没有过渡不会带来更好的用户体验，但这已经超出了重点。

您可以在链接中添加 data-transition="none"，如下所示：http://jsfiddle.net/Gajotres/VC7jY/

HTML：

<!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.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="page1">
            <div data-role="header">
                <h1>page1
                </h1>
            </div>
            <div data-role="content">
                Content1</div>
            <div  data-role="footer">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#page1" class="ui-btn-active ui-state-persist" data-transition="none">One</a></li>
                        <li><a href="#page2" data-transition="none">Two</a></li>
                        <li><a href="#page3" data-transition="none">Three</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div data-role="page" id="page2">
            <div data-role="header">
                <h1>page2
                </h1>
            </div>
            <div data-role="content">
                Content2</div>
            <div  data-role="footer">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#page1" data-transition="none">One</a></li>
                        <li><a href="#page2" class="ui-btn-active ui-state-persist" data-transition="none">Two</a></li>
                        <li><a href="#page3" data-transition="none">Three</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div data-role="page" id="page3">
            <div data-role="header">
                <h1>
                    page3
                </h1>
            </div>
            <div data-role="content">
                Content3</div>
            <div  data-role="footer">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#page1" data-transition="none">One</a></li>
                        <li><a href="#page2" data-transition="none">Two</a></li>
                        <li><a href="#page3" class="ui-btn-active ui-state-persist" data-transition="none">Three</a></li>
                    </ul>
                </div>
            </div>
        </div> 
    </body>
</html>

当然，如果您使用 rel="external" 或 data-ajax="false" 阻止 AJAX 页面处理，这将不起作用。或者，如果您正在使用多个大型 HTML 文件。

【讨论】：