Как создать меню пользовательских параметров в приложении HTML5 / jQuery для Android? - PullRequest
Новая
       1

Как создать меню пользовательских параметров в приложении HTML5 / jQuery для Android?

0 голосов
/ 17 января 2012

Я хочу создать меню параметров для моего приложения Android.Я использую HTML5 и jQuery Mobile с PhoneGap.Я нашел решение с помощью Java, но я хочу быть в состоянии сделать это с помощью HTML5 / jQuery / PhoneGap.У кого-нибудь есть идеи?

Ответы [ 4 ]

1 голос
/ 27 февраля 2013

Решение, которое я нашел, - добавить новый div вне фреймворка jquery-mobile. 

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Mobile Web App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="jquery-mobile/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css"/>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="jquery-mobile/jquery.1.8.1.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="cordova.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(e) {
            $('.show-menu').click(trigger_menu);
        });

        function trigger_menu()
        {
            $('#menu').slideToggle(500);
        }

        $(document).bind('pageinit', function(){
            $(document).click(function(e) {
                if(e.srcElement.className != 'show-menu ui-link'){
                    $('#menu').slideUp(500);
                }
            });

            $('#menu').click(function(){
                $('#menu').slideUp(500);
            });
        });

        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        function onDeviceReady() {
            document.addEventListener("menubutton", onMenuKeyDown, false);
        }

        function onMenuKeyDown() {
            trigger_menu();
        }
    </script>
    </head>
    <body onLoad="onLoad()">
    <div data-role="page" id="page">   
        <div data-role="header">
            <h1>Page One</h1>
        </div>
        <div data-role="content">    
            <a href="#" class="show-menu">Menu</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div>
    </div>
    <!-- Menu (outside mobile framework) -->
    <div id="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="next.html">Next</a></li>
      </ul>
    </div>
    </body>
</html>

Файл CSS: 

/* CSS Document */
#menu {
    display:none;
    position:fixed;
    bottom:0;
    z-index:9999;
    background-color:#000000;
    color:#CCCCCC;
    width:100%;
}

#menu ul {
    list-style:none;
    text-align:center;
    margin:0;
    padding:0;
}

#menu ul li {
    border-bottom:1px #FFFFFF solid;
    padding:15px;
}

#menu ul li:hover {
    background-color:#C60;
}

#menu ul li:last-child {
    border-bottom:none;
}

#menu ul li a {
    color:#FFFFFF;
    font-size:20px;
    text-decoration:none;
    display:block;
}
1 голос
/ 18 января 2012

если у вас есть приложение phonegap, почему вы не пользуетесь мобильными меню jquery и способами их отображения? Демоверсии Jquery Mobile

0 голосов
/ 20 мая 2012

Думаю, вы искали это: http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#menubutton Не уверен, что вы все еще ищете.

0 голосов
/ 17 января 2012

Вы должны создать / переопределить метод onCreateOptionsMenu, как этот: 

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);

    menu.add([some arguments here]);
    //...add more menu options...
    return true;
}

, а для обработки выборов переопределить 

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case OK_MENU_ITEM:
            showMsg("Ok");
            break;
    }
    return super.onOptionsItemSelected(item);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...