Question

我目前正在使用WordPress的obox移动插件来创建该网站的“移动”版本，但这就是它真正使用jQuery mobile作为基础并且我想使用select元素作为导航所以用户获得默认的操作系统弹出窗口，他们可以选择一个选项（例如在iPhone上你得到屏幕底部的部分）这在一定程度上有效，但它没有与基于jquery mobile ajax的导航集成而只是正常加载页面 - 无论如何要让它像普通链接一样运行，这样用户就可以从菜单中选择一个选项，然后它会转换到页面，如果用户点击了一个链路？

我已经看了好几年了，似乎无法找到实现它的方法......

Answer 1

您可以在调用changePage函数时指定转换类型：

$(document).delegate("#select", "change", function(){
    $.mobile.changePage("#"+this.options[this.selectedIndex].value,{
        transition: "slideup" //add your app's default transition here
    });

});

Answer 2

我会这样做：

http://jsfiddle.net/TrghW/1/

JS

$('.navigateToPage').change(function() {
    var page = $(this).val();
    $.mobile.changePage( "#"+page, { transition: "slideup"} );
});

HTML

<div data-role="page" id="home">
    <div data-role="content">        
        <label for="pages" class="select">Navigate to page:</label>
        <select name="pages" id="selectPages" class="navigateToPage">
           <option>Select a Page</option>
           <option value="page2">Page 2</option>
           <option value="page3">Page 3</option>
           <option value="page4">Page 4</option>
           <option value="page5">Page 5</option>
        </select>
        <br />
        <span>This is the Home Page</span>     
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="content">        
        <label for="pages2" class="select">Navigate to page:</label>
        <select name="pages2" id="selectPages2" class="navigateToPage">
           <option>Select a Page</option>
           <option value="home">Home Page</option>
           <option value="page3">Page 3</option>
           <option value="page4">Page 4</option>
           <option value="page5">Page 5</option>
        </select>
        <br />
        <span>This is Page 2</span>  
    </div>
</div>

<div data-role="page" id="page3">
    <div data-role="content">        
        <label for="pages3" class="select">Navigate to page:</label>
        <select name="pages3" id="selectPages3" class="navigateToPage">
           <option>Select a Page</option>
           <option value="home">Home Page</option>
           <option value="page2">Page 2</option>           
           <option value="page4">Page 4</option>
           <option value="page5">Page 5</option>
        </select>
        <br />
        <span>This is Page 3</span>     
    </div>
</div>

<div data-role="page" id="page4">
    <div data-role="content">        
        <label for="pages4" class="select">Navigate to page:</label>
        <select name="pages4" id="selectPages4" class="navigateToPage">
           <option>Select a Page</option>
           <option value="home">Home Page</option>
           <option value="page2">Page 2</option>           
           <option value="page3">Page 3</option>
           <option value="page5">Page 5</option>
        </select>
        <br />
        <span>This is Page 4</span>     
    </div>
</div>

<div data-role="page" id="page5">
    <div data-role="content">        
        <label for="pages5" class="select">Navigate to page:</label>
        <select name="pages5" id="selectPages5" class="navigateToPage">
           <option>Select a Page</option>
           <option value="home">Home Page</option>
           <option value="page2">Page 2</option>           
           <option value="page3">Page 3</option>
           <option value="page4">Page 4</option>
        </select>
        <br />
        <span>This is Page 5</span>     
    </div>
</div>

使用jquery mobile导航选择

2 个答案: