использовать выбор для навигации с помощью jquery mobile - PullRequest
Новая
       30

использовать выбор для навигации с помощью jquery mobile

2 голосов
/ 18 февраля 2012

В настоящее время я использую мобильный плагин obox для WordPress, чтобы создать «мобильную» версию сайта, но это не относится к тому, что на самом деле он использует jQuery mobile в качестве базы, и я хочу использовать элемент select в качестве навигации, чтобы то, что пользователь получает всплывающее окно ОС по умолчанию, где он может выбрать опцию (например, на iPhone, где у вас есть раздел внизу экрана), это работает до некоторой степени, но не интегрируется с навигацией на основе jquery mobile ajax и вместо этого просто загружает страницу как обычно - есть ли в любом случае, чтобы заставить ее вести себя как обычная ссылка, чтобы пользователь мог выбрать опцию из меню, а затем он перешел бы на страницу, как если бы пользователь нажал на ссылка

Я смотрел это целую вечность и просто не могу понять, как это реализовать ...

Ответы [ 2 ]

1 голос
/ 18 февраля 2012

Я бы сказал так:

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>
1 голос
/ 18 февраля 2012

Вы можете указать тип перехода при вызове функции changePage: 

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

});
...