Как изменить страницу с помощью меню выбора Jquery для мобильных устройств?

Я разрабатываю приложение, в котором я использую меню выбора в нем. Поскольку я новичок в разработке, я не знаю, как изменить страницу при выборе меню. Я пробовал события onclick и события onchange в меню выбора, но они не работают. Код, который я использую

код:

index.html

<section id="previewPage" data-role="page">
  <div data-role="content" id="previewId" class="previewScreen">


        <select name="select-choice-0" id="select-choice-1" data-native-menu="false">
            <option value="email">Share via Email</option>
            <option value="bbm">Share via BBM</option>
            <option value="sms">Share via SMS</option>
            <option value="facebook">Share via Facebook</option>
            <option value="twitter">Share via Twitter</option>
            <option value="google">Share via Google</option>
        </select>                       
        </div>

    </section>

Согласно приведенному выше коду, когда я нажал на кнопку "Поделиться по электронной почте" или "Поделиться через BBM", он должен перейти на страницу с этими конкретными HTML-страницами. Например, когда я нажал на опцию "Поделиться через BBM", мой проект должен изменить страницу с index.html на страницу BBM.html.

Canany один, пожалуйста, помогите мне с этим...... Спасибо заранее...

4 ответа

Решение

JQuery Mobile выставляет $.mobile.changePage метод. Вы можете решить проблему с этим.

Если страницы, по которым нужно перемещаться, находятся в том же каталоге, что и "index.html", вы можете использовать js ниже.

$(function(){

    $('select').change(function() {
        var nextpage = $(this).children('option:selected').attr('value');
        $.mobile.changePage( nextpage + '.html' );
    });

});​

ДЕМО:jsfiddle (многостраничный пример)

Один вариант добавляет data- атрибуты тегов параметров:

<option value="bbm" data-location='www.example.com/bbm.html'>Share via BBM</option>

$('#select-choice-1').change(function() {
   window.location = $(this).data('location')  
})

data()

Я использую следующее, чтобы кодировать, чтобы изменить URL страницы с помощью selectbox, как меню.

$('#menu-select').change(function() {
   window.location = $(this).data('location')  
})

JavaScript

 <select name='select-choice-1' id="menu-select">
    <option value="">Menú:</option>
    <option value="index.php">Noticias</option>
    <option value="index.php#tramites" data-location='index.php#tramites'>Trámites</option>
    <option value="index.php#twitter" data-location='index.php#twitter'>Twitter</option>
    <option value="virgen_del_valle.php">Parque Virgen del Valle</option>
    </select>

У меня есть три страницы:

  • index.php (с содержанием на страницы или data-role="page" с и id)
  • news.php
  • event.php

Проблема в том, что когда я выбираю, например, опцию Home, затем More Information и пытаюсь перейти на Event, страница не загружается.

Я думаю, что этот код должен иметь условие для внутренних страниц и для внешнего URL.

Надеюсь, что вы можете

var a = document.createElement('a');
a.href='http://google.com/';
a.rel = 'external';
a.target = '_top';
document.body.appendChild(a);
a.click();

Jsfiddle

Другие вопросы по тегам