Создавайте кнопки с помощью jquery-mobile, которые растягивают на весь экран - PullRequest
Новая
       21

Создавайте кнопки с помощью jquery-mobile, которые растягивают на весь экран

0 голосов
/ 09 марта 2012

Я пытаюсь создать экран домашней страницы, где кнопки в теле занимают полный экран после верхнего и нижнего колонтитула. В идеале кнопки 2x2 будут растягиваться на оставшееся место на экране.

Я пытался использовать ui-grid-a, чтобы растянуть кнопки до ширины экрана, но не смог изменить высоту до размера экрана. 

   <section id="Home" data-role="page">
   <header data-role="header">
        <a href="#Home">Home</a>
        <h1>testapp</h1>
        <a href="#Setup">Setup</a>
   </header>

   <div data-role="content">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><a href="#button1" data-role="button" data-inline="false">button1</a></div>
            <div class="ui-block-b"><a href="#button2" data-role="button" data-inline="false">button2</a></div>
            <div class="ui-block-a"><a href="#button3" data-role="button" data-inline="false">button3</a></div>
            <div class="ui-block-b"><a href="#button4" data-role="button" data-inline="false">button4</a></div>
        </fieldset>
    </div>

   <footer data-role="footer"  data-role="footer" data-position="fixed">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"style="text-align:left"><a href="#button1"  data-role="button" data-transition="slide" data-inline="false">button1</a></div>
            <div class="ui-block-b"style="text-align:right"><a href="#button2" data-role="button" data-transition="slide" data-inline="false">button2</a></div>
        </fieldset>
   </footer>

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

Ответы [ 2 ]

1 голос
/ 10 марта 2012

Я верю, что это то, что вы ищете. http://jsfiddle.net/codaniel/JAjJp/1/embedded/result/

CSS 

<style>
   .button{padding:25% 0;}
</style>

HTML 

<section id="Home" data-role="page">
   <header data-role="header">
        <a href="#Home">Home</a>
        <h1>testapp</h1>
        <a href="#Setup">Setup</a>
   </header>

   <div data-role="content">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><a href="#button1" class="button" data-role="button" data-inline="false">button1</a></div>
            <div class="ui-block-b"><a href="#button2" class="button" data-role="button" data-inline="false">button2</a></div>
            <div class="ui-block-a"><a href="#button3" class="button" data-role="button" data-inline="false">button3</a></div>
            <div class="ui-block-b"><a href="#button4" class="button" data-role="button" data-inline="false">button4</a></div>
        </fieldset>
    </div>

   <footer data-role="footer"  data-role="footer" data-position="fixed">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"style="text-align:left"><a href="#button1"  data-role="button" data-transition="slide" data-inline="false">button1</a></div>
            <div class="ui-block-b"style="text-align:right"><a href="#button2" data-role="button" data-transition="slide" data-inline="false">button2</a></div>
        </fieldset>
   </footer>
</section>​
1 голос
/ 10 марта 2012

Работает ли это:

Использование панели навигации с одним элементом списка

...