Как добавить кнопку домой, используя jquery-mobile? - PullRequest
18 голосов
/ 10 ноября 2010

По умолчанию jquery-mobile добавляет кнопку возврата на каждой странице после главной страницы. Я хочу знать, как я могу также добавить кнопку домой?
Вот пример: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html

Примечание: эта ссылка подходит только для Firefox / Chrome

Спасибо.

Ответы [ 4 ]

23 голосов
/ 04 марта 2011

Существует более простое решение: просто добавьте ссылку на ваш заголовок div с помощью class="ui-btn-right".Это важно для того, чтобы кнопка возврата jQuery Mobile могла автоматически добавляться влево.Есть также несколько других атрибутов data- *, которые вы можете использовать, чтобы вы могли использовать значок встроенной темы и т. Д., Как показано:

<div data-role="page">
    <div data-role="header">
        <h1>Title</h1>
        <a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext" 
           data-direction="reverse">Home</a> 
    </div>
    <div data-role="content">
        ...

(Очевидно, измените URL-адрес home href на что-то подходящее для вашей среды, не используйте только «/», потому что это ограничивает возможности развертывания вашего приложения.)

22 голосов
/ 16 ноября 2010

Без изменения исходного кода jquery-mobile.js я могу думать только о том, чтобы добавить свои собственные навигационные ссылки в заголовок.Как только вы добавите собственную ссылку, автоматическая кнопка «Назад» исчезнет, ​​поэтому мы создадим 2 ссылки, одну для возврата и одну для дома.

Вы заметите, что на страницах 2 и 3 есть кнопки возврата икнопку домой, и вы можете вернуться или прыгнуть прямо домой.Это требует, чтобы вы изменили раздел «заголовок» для каждой страницы, но это не такая уж большая проблема, поскольку всегда требуется одно и то же (копирование и вставка), никаких изменений не требуется для каждого экземпляра.

Ссылка «home» будетбыть в верхнем правом углу (в соответствии со стандартным поведением второй ссылки, чтобы поместить его в верхний правый угол).

Вот пример:

<!DOCTYPE html>
<html>
        <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>


<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.</p>
                <p>View internal page called <a href="#secondpage">second page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                <p><a href="#thirdpage">Go to third page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="thirdpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.  (this is thirdpage)</p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

</body>
</html>

Если вы хотитезаставить его делать это автоматически, вы также можете просто взломать js ...

Сразу после этого куска кода (около строки 1084 не минимизированного jquery.mobile-1.0a2.js)

$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
                                                .click(function() {
                                                        history.back();
                                                        return false;
                                                })
                                                .prependTo( $this );

Добавьте строку вроде этой, где #firstpage - это идентификатор вашей домашней страницы, я не смог найти способ сослаться на домашнюю страницу, не назвав ее по имени, не стесняйтесь улучшать .. Я не хотелделать / или просто # не будет работать ... но этот метод работает

$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );
1 голос
/ 02 августа 2011

Когда я впервые использовал jqm для разработки приложения, я хотел использовать кнопки «домой» и «назад» в верхнем заголовке, потому что дерево навигации глубокое. Использование основных классов кнопок, таких как "ui-btn-right" или "ui-btn-left", работает отлично - ЕСЛИ вам нужна только одна кнопка с каждой стороны.

Но если вы похожи на меня и хотите две кнопки слева, вы можете использовать немного нестандартного CSS и позиционирования, чтобы получить его там, где вы хотите. Я также обернул кнопки в класс пользовательских заголовков, а также использовал CSS для управления заголовком в заголовке. Вам нужно будет поместить каждую кнопку в другой z-индекс, иначе каждая кнопка будет конфликтовать с другой.

Это заголовок:

    <div id="home-btn" class="header-btn-left-pos1">
        <a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
    </div><!-- /home-btn -->

    <div id="back-btn" class="header-btn-left-pos2">
        <a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
    </div><!-- /back-btn -->

    <div class="header-title" align="center">
        <h4>Business Locations</h4>
    </div><!-- /header-title -->

</div><!-- /custom header -->

Это CSS:

.custom-header
{
    height:18px;
}
.header-title
{
    position:relative;
    top:-10px;
}
.header-btn-left-pos1
{
    position:absolute;
    left:25px;
    top:5px;
    z-index:1;
}
.header-btn-left-pos2
{
    position:absolute;
    left:105px;
    top:5px;
    z-index:2;
}

Надеюсь, это даст вам больше возможностей.

1 голос
/ 22 марта 2011
<div data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
        </div>
    </div>

Вы можете использовать rel=external в своем теге href. Откроется домашняя страница без кнопки возврата.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...