带有2组页面的jQuery Mobile [英] Jquery Mobile with 2 set of page

问题描述

我有一个wordpress网站，该网站需要使用滑动显示页面，我选择使用Jquery Mobile，并且可以正常运行.现在，我们在网站上使用wpml插件提供了2种语言.我的滑动代码效果很好，除非我们使用更改语言"按钮时滑动失败.

I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.

有关问题的详细信息.

我们的网站上只有3种纯文本页面，只有2种语言.在Footer中，我们具有更改语言的链接.另外，客户也不希望加载Ajax页面，所以我要做的是用data-role=page创建三个Div，然后将data-next，data-prev设置为#div-$postid.因此导航工作绝对正常.我将页脚从data-role=page放在外面.

We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.

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

Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.

另外，页脚没有改变，所以我想要的是:我们可以简单地强制Link导航而不是滑动方式吗? jQuery Mobile强制在所有A标签上滑动，我不希望滑动在data-role=page之外起作用.

Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.

希望我有道理.

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

Edit here is code: [not sure if this code will help at all]

<?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会根据语言变量变化)来显示每种语言的不同图像.

This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.

推荐答案

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

To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.

参考资料: jQuery Mobile-链接

Reference: jQuery Mobile - Links

这篇关于带有2组页面的jQuery Mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！