2 радиокнопки на одной строке в поле jquery mobile и номер телефона дисплея - PullRequest
Новая
       1

2 радиокнопки на одной строке в поле jquery mobile и номер телефона дисплея

2 голосов
/ 15 марта 2012

Я пытаюсь дизайн формы в jquery mobile.В своей форме я хочу показать две кнопки-переключатели на одной строке.Я пытаюсь использовать display: inline, но не работает.Во-вторых, я искал в документации по jquery для мобильных устройств показ поля телефонного номера с тремя текстовыми полями (разделяя телефонный номер), но у меня не было такого дизайна.Любые предложения о том, как это сделать в jquery mobile.

Ответы [ 3 ]

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

Я думаю, что решение, которое вы ищете, может включать Content Grids .

Документация: http://jquerymobile.com/test/docs/content/content-grids.html

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

Взгляните на этот пример: http://jsfiddle.net/shanabus/XxB6Y/

Кроме того, проверьте эту страницу документации для ввода текста для (телефонных) номеров:

В jQuery Mobile вы можете использовать существующие и новые типы ввода HTML5, такие как в качестве пароля, адреса электронной почты, телефона, номера и т. д.

Отсюда: http://jquerymobile.com/test/docs/forms/textinputs/

0 голосов
/ 23 октября 2012

Радиокнопки нуждаются в очень агрессивном отображении: встроенный! Важный; ... Кроме того, вы должны поиграть с высотой этих текстовых полей, чтобы они хорошо выровнялись. Вот вам две версии: одна с обычными кнопками, а другая с мини.

http://jsfiddle.net/den232/bVF3B/

Удачи! 

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
<div data-role="page" class="type-home">


<ul data-role="listview">
  <li  data-role="fieldcontain">first LI line</li>
  <li  data-role="fieldcontain">

    <div class='floatleft closespacing'>
        Big Buttons<br>More Text
    </div>
    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">A1</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">B1</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="#1" class='biginputheight'></input>
    </div>  

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="#2" class='biginputheight'></input>
    </div>  

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="#3" class='biginputheight'></input>
    </div>  

    <div  class='floatright textwidth'>
      <input type="text" placeholder="right" class='biginputheight'></input>
    </div>  

  </li>
  <li  data-role="fieldcontain">

    <div class='floatleft closespacing'>    
        Small Buttons
    </div>

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">AA</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">BB</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="s1" class='miniinputheight'></input>
    </div>  

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="s2" class='miniinputheight'></input>
    </div>  

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="s2" class='miniinputheight'></input>
    </div>  


    <div class='floatright closespacing'>
      <div  class='floatright closespacing'>    
        e3 Text<br>on right
      </div>
      <div  class='floatright textwidth'>
        <input type="text" placeholder="e3" class='miniinputheight'></input>
      </div>  
    </div>
  </li>
  <li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->

0 голосов
/ 20 апреля 2012

Я нашел решение, как получить номер телефона с тремя текстовыми полями, такими как xxx-xxx-xxxx.Демо: http://jsfiddle.net/XxB6Y/1/

...