1

我有一个包含 3 个空页面（appAnotado、appCompilado 和 appOriginal）的 html 文件。 

<div id="appAnotado" data-role="page" data-theme="a" data-content-theme="a">
    <div id="divDestino" data-mini="true">
        <div id="visoes" data-role="navbar">
        </div>
        <div id="divTexto" data-mini="true">
        </div>
    </div>
</div>
<div id="appCompilado" data-role="page" data-theme="a" data-content-theme="a">
    <div id="divDestinoCompilado" data-mini="true">
        <div id="visoesCompilado" data-role="navbar">
        </div>
        <div id="divTextoCompilado" data-mini="true">
        </div>
    </div>
</div>
<div id="appOriginal" data-role="page" data-theme="a" data-content-theme="a">
    <div id="divAtoDestinoOriginal" data-mini="true">
        <div id="visoesOriginal" data-role="navbar">
        </div>
        <div id="divTextoOriginal" data-mini="true">
        </div>
    </div>
</div>

我用来自 3 个外部 URL 的 3 个 ajax 调用填充这些页面。每个页面都根据您的别名填写。 

<script>
$(document).on('pagebeforeshow', "#appAnotado",function () {
    var id = 10;
    var formData = new FormData();
    $.ajax({
        url :'http://myApp.action?id=' + id + '&visao=anotado',
        type : 'POST',
        dataType : "html",
        data : formData,
        cache : false,
        crossDomain: true,
        processData : false,
        contentType : false,
        success : function(dados) {
            $('#visoes').html(jQuery(dados).find('#visoes').html());
            $('#divTexto').html(jQuery(dados).find('#divTexto').html());
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("xhr.status: " + xhr.status);
        }
    });
    $.ajax({
        url :'http://myApp.action?id=' + id + '&visao=compilado',
        type : 'POST',
        dataType : "html",
        data : formData,
        cache : false,
        crossDomain: true,
        processData : false,
        contentType : false,
        success : function(dados) {
            $('#visoesCompilado').html(jQuery(dados).find('#visoes').html());
            $('#divTextoCompilado').html(jQuery(dados).find('#divTexto').html());
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("xhr.status: " + xhr.status);
        }
    });
    $.ajax({
        url :'http://myApp.action?id=' + id + '&visao=original',
        type : 'POST',
        dataType : "html",
        data : formData,
        cache : false,
        crossDomain: true,
        processData : false,
        contentType : false,
        success : function(dados) {
            $('#visoesOriginal').html(jQuery(dados).find('#visoes').html());
            $('#divTextoOriginal').html(jQuery(dados).find('#divTexto').html());
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("xhr.status: " + xhr.status);
        }
    });
});
</script>

视图（别名）在导航栏中定义。而这段代码是由外部 URL 带来的。 

<div id="visoes" data-role="navbar">
    <ul>
        <li><a id="anotado10" class="ui-btn-active" href="appAnotado" >Anotado</a></li>
        <li><a id="publicado10" href="appCompilado" >Compilado</a></li>
        <li><a id="original10" href="appOriginal" >Original</a></li>
    </ul>
</div>

当我运行应用程序时，只显示第一页（这是正确的），但是当我单击其他视图（别名）时，会暂时出现消息"error loading page"。

我尝试使用这些属性rel = "external"或data-ajax = "false"找到这个jquerymobile.com但它不起作用。

4

2 回答 2

1

要链接单个文件寺庙中的页面，请在页面的 id 之前添加 hashtag，这种方式<a href=#page_id>Page</a>。

演示

<div id="visoes" data-role="navbar">
  <ul>
    <li><a id="anotado10" class="ui-btn-active" href="#appAnotado">Anotado</a></li>
    <li><a id="publicado10" href="#appCompilado">Compilado</a></li>
    <li><a id="original10" href="#appOriginal">Original</a></li>
  </ul>
</div>
于 2013-10-01T16:51:08.297 回答
1

奥马尔，感谢您的关注。我按照这个LINK的例子解决了页面变化的问题。

添加了'#appAnotado'Omar 建议的主题标签：

<div id="visoes" data-role="navbar">
    <ul>
        <li><a id="anotado10" class="ui-btn-active" href="#appAnotado" >Anotado</a></li>
        <li><a id="publicado10" href="#appCompilado" >Compilado</a></li>
        <li><a id="original10" href="#appOriginal" >Original</a></li>
    </ul>
</div>

并添加了根据 Phill Pafford 的建议为每个视图检索 id 的函数：

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
$(document).on( "pagebeforeshow", "#appAnotado", function( e ) {
    var formData = new FormData();
    $.ajax({
        url :'http://myApp.action?id=' + getParameterByName('id'),
[...]

只有标签没有解决问题。我想也许应用程序被错误参数传递破坏了。有了上面的功能getParameterByName(name)，问题就解决了。

仍然有必要修复listview调用此页面的问题：

<ul data-role="listview">
    <li>
        <a href="?id=10#appAnotado" rel="external"></a>
    </li>
</ul>

尽管所有页面都在同一个 html 文件中，但使用该属性rel="external"是基本的。

我很抱歉认为问题只是在更改页面上。

于 2013-10-03T18:03:05.340 回答