带有 2 组页面的 Jquery Mobile答案

【问题标题】：Jquery Mobile with 2 set of page带有 2 组页面的 Jquery Mobile
【发布时间】：2013-06-12 19:20:11
【问题描述】：

我有一个 wordpress 网站，需要使用滑动来显示页面，我选择使用 Jquery Mobile，并且可以正常工作。现在，我们在网站上有 2 种语言，使用 wpml 插件。我的刷卡代码运行良好，除非我们使用更改语言按钮刷卡失败。

关于问题的详细信息。

我们的网站上只有 3 个纯文本页面，采用 2 种语言。在页脚中，我们有更改语言的链接。客户也讨厌加载 Ajax 页面，所以我用data-role=page 创建了三个Div，并将data-next、data-prev 设置为#div-$postid。所以导航工作得很好。我把页脚放在data-role=page 外面。

现在，当我单击页脚中的更改按钮时，它会加载英文页面 [我使用 Fiddler 看到它]，然后首先从服务器获取 data-role=page 并替换 /slide 其内容。然而，由于它只选择第一个数据角色，所有其他英文页面都不会进入 HTML [它只是更新 DOM 并且不会导航到英文版本]。由于其他英文页面不在 dom 中，因此滑动失败。

另外，页脚没有改变，所以我想要的是：我们可以简单地强制链接导航而不是滑动方式吗？ Jquery Mobile 在所有 A 标签上强制滑动，我不想滑动到 data-role=page 之外的任何东西。

希望我说得通。

在此处编辑代码：[不确定此代码是否有帮助]

<?php 
    get_header(); 
global $post;   
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");

$the_query = new WP_Query($args);            
if($the_query->have_posts()){
    while($the_query->have_posts()) { $the_query->the_post();
    $prev =get_previous_post();
    $next =get_next_post();
    if($prev) {
        $prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
    } else {
        $prev='';
    }
    if($next) {
        $next = "#page-".$next->ID; //get_permalink($next->ID);
    } else {
        $next='';
    }

    if (has_post_thumbnail( $post->ID ) ) {     
        $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
        <div id="page-<?php echo $post->ID; ?>" data-dom-cache="true"  data-transition="slide"  class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
        <?php } else { ?>
        <div id="page-<?php echo $post->ID; ?>" data-dom-cache="true"  data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>"> 
        <?php } ?>
        <div class="post_box">
            <h2><blockquote><?php the_title(); ?></blockquote></h2>
            <div class="post_entry">
               <?php the_content(); ?>
            </div>
        </div><!-- post_box -->
        </div>

   <?php   } 
   } ?>
   <?php get_footer(); ?>

这就是我所拥有的，除了 get_footer 使用基于 Ul li 的列表，其中基于语言变量的 LI 更改，以显示两种语言的不同图像。

【问题讨论】：

请在 jsfiddle.net 上添加代码或重现问题。
如果您在更改语言后输入例如site.net/#english，是否会更改为该页面？因为页面在 DOM 中。
当我单击具有类似 site.com/en 的 url 的英文页脚链接时，它确实显示第一个 Data-role=page 内容，并且 fiddler 显示完整的页面下载，但是当我在浏览器上检查源时，它显示只有一个数据角色被合并到其他语言的 html 中。
这意味着所有以前的页面都被删除了。试试.load() html 文件，它会添加页面而不是删除以前的页面。
不，希伯来语页面仍然存在，只是它不会加载所有英文页面

标签： wordpress jquery-mobile

【解决方案1】：

要阻止 Ajax 加载页面/链接，请添加到链接锚 data-rel="external" 或 data-ajax="false"。这将正常加载页面而无需任何转换。

参考：jQuery Mobile - Links

【讨论】：

【解决方案2】：

对于那些有类似问题的人，我使用以下方法修复它：

1) 我在 A Tag 中添加了一个“noswipe”类，以便在 Jquery 中引用它

2）我添加以下代码

$(function(){
  $(".noswipe").click(function(){
     window.location.href= $(this).attr("href");
      return false;
   });
 });

上面的代码只是强制跳过手机的解析和调用，适用于我的情况。

【讨论】：