如何使用 Dojo Mobile 移动到其他 html 页面中的视图？答案

【问题标题】：How to move to a view in an other html page with Dojo Mobile?如何使用 Dojo Mobile 移动到其他 html 页面中的视图？
【发布时间】：2015-03-30 16:01:26
【问题描述】：

我想这样做Dojo transition to another html file in same project。从其他 html 页面中选择一个视图，链接上可用的代码与我在项目中的代码非常相似。虽然该解决方案被接受，但我无法成功，而我已经对其进行了多次测试。有人可以检查一下吗？

提前谢谢你

这里有两个 html 文件可以让你测试它，它不是我的真实代码，但提供了相同的结果：

Index.html

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Index</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
    dojoConfig = {
        async: true,
        parseOnLoad: false
    };
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",                   
"dojox/mobile",              
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",                   
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
         ], function(parser) {
                parser.parse();
        });
</script>
</head>
<body>
<div id="detailsHeading" data-dojo-type="dojox.mobile.Heading"
    data-dojo-props="fixed: 'top', label: 'Details', back:'Back', moveTo:'view1', transition:'slide', transitionDir:'-1',url:'sample.html'">
</div>
</body>
<html>

sample.html

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Sample</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
    dojoConfig = {
        async: true,
        parseOnLoad: false
    };
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
                 "dojox/mobile/ViewController",                  
                 "dojox/mobile",
                 "dojox/mobile/ScrollableView",
                 "dojox/mobile/TabBar",
                 "dojox/mobile/Switch",
                 "dojox/mobile/deviceTheme",
                 "dojox/mobile/compat",                  
                 "dojox/mobile/IconMenu",
                 "dojox/mobile/SimpleDialog",
                 "dojox/mobile/Button",
                 "dojox/mobile/Heading",
                 "dijit/registry",
                 "dojo/domReady!",
                 "dojo/dom",
                 "dojo/ready"
         ], function(parser) {
                parser.parse();
        });
</script>
</head>
<body>
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1" data-dojo-props="selected:false,scrollDir:'v'">
</div>
</body>
</html>

把它们放在同一个目录下测试一下

【问题讨论】：

错误是什么？您需要提供更多信息。在问题中提供您的代码。 HTML片段文件放在哪里，可以访问吗？
我的两个 html 页面都在同一个目录中。该代码正是链接中的代码。你测试过吗？
该链接未提供完整代码。您需要向我们展示您的代码是什么。在不同的点上可能会出现故障。我们无法对您的所作所为做出假设。向我们展示带有 Head、Body 标签的完整 HTML 文件或创建一个 jsFiddle。要求我们参考其他没有为我们提供有用信息的链接是不够的。
好的，看看我编辑的问题
您的代码中有很多错误。这就是我要求向我展示您的代码的原因。将需要一个冗长的答案。稍等...我们会尽快回复您。

标签： html mobile dojo transition

【解决方案1】：

主 Html 文件。

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <meta name="msapplication-tap-highlight" content="no" />

    <!-- dojo stylesheet will go here -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>

    <title>Dojo Mobile Simple View</title>

    <!-- dojo configuration options -->
    <script>
        dojoConfig = {
            async: true,
            parseOnLoad: false
        };
    </script>
    <!-- dojo bootstrap -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>


    <script>
        require([
            "dojox/mobile/parser",
            "dojo/ready",
            "dojox/mobile/ScrollableView",
            "dojox/mobile/Heading",
            "dojox/mobile/ToolBarButton"
        ], function (parser, ready ) {

            ready ( function() {

                parser.parse();
            });

        });

    </script>


</head>
<body style="visibility:hidden;">

<!-- the view or "page"; select it as the "home" screen -->
<div id="view1" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected:true">
    <div id="detailsHeading" data-dojo-type="dojox/mobile/Heading"
         data-dojo-props="fixed: 'top', label: 'View1'">

        <span id="rightbtn" data-dojo-type="dojox/mobile/ToolBarButton"
            style="float:right;"
            data-dojo-props="transition:'slide', transitionDir:'-1',url:'Sample.html' ">Sample
        </span>
    </div>
</div>


</body>
</html>

Sample.html 文件是一个 HTML 片段，它应该不包含 head、body 标签。

<!-- Sample View -->
<div id="sample" data-dojo-type="dojox/mobile/ScrollableView" >
    <!-- heading -->
    <h1 id="edit1" data-dojo-type="dojox/mobile/Heading"
        data-dojo-props=" fixed:'top' ">Sample
    </h1>

</div>

【讨论】：