Question

我有一个wordpress网站，需要使用swipe显示页面，我选择使用Jquery Mobile，我让它工作正常。现在，我们使用wpml插件在网站上有2种语言。我的滑动代码效果很好，除非我们使用更改语言按钮滑动失败。

有关问题的详情。

我们的网站只有3个纯文字页面，有2种语言版本。在页脚中，我们有改变语言的链接。客户也讨厌加载Ajax页面，所以我做的是用data-role=page创建三个Div并将data-next，data-prev设为#div-$postid。所以导航工作绝对精细。我把页脚放在data-role=page之外。

现在，当我点击页脚中的更改按钮时，它会加载英文页面[我使用Fiddler看到它]，然后从服务器中取出第一个data-role=page并替换/滑动其内容。但是，因为它只选择第一个数据角色，所以其他所有英文页面都没有得到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基于语言变量进行更改，以显示任何一种语言的不同图像。

Answer 1

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

参考：jQuery Mobile - Links

Answer 2

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

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

2）我添加以下代码

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

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

Jquery Mobile有2套页面

2 个答案: