Каков рекомендуемый способ оформления меток и значений в jquery mobile? - PullRequest
Новая
       1

Каков рекомендуемый способ оформления меток и значений в jquery mobile?

1 голос
/ 12 января 2012

Я знаком со стилями форм с меткой для = "my_id" и тегами типа ввода. Мне очень нравится, как автоматически стилизуются компоненты формы, если ширина формы уменьшается до более узкой, и мне нравится, что входные теги выравниваются по левому краю.

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

Вот код, который, как я надеялся, сработает, но это не так. 

<div data-role="fieldcontain">
    <label for="full_name"><strong>Name:</strong></label>
    <span id="full_name">John Smith</span>
</div>
<div data-role="fieldcontain">
    <label for="phone"><strong>Long Phone Label:</strong></label>
    <span id="phone">(800) 555-1212/span>
</div>

Есть идеи о том, как сделать это, не прибегая к таблицам?

Ответы [ 2 ]

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

Может быть, это будет работать.Вы можете использовать JQM-сетку для создания меток рядом друг с другом:

Метка: элемент ввода Метка: элемент ввода

Будьте осторожны, поскольку метки для мобильных устройств такие же, как нарочно.Это так, что вы можете увидеть ярлык и вход при входе на устройстве, как Ihone: 

<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>
0 голосов
/ 12 января 2012 
It seems that you want to align the text in the way the form is aligned.The below code will align the labels with their values.This is what i understand from your question.i hope the below code will help you.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.0rc1.css" />
<script type="text/javascript" src="js/Common/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/Common/jquery.mobile-1.0rc1.js"></script>

<style>
#b {
    left: 156px;
    bottom: 50px;
}

</style>
</head>
<body>
<div data-role="page" id="header">
    <div data-role="fieldcontain" id="a">
    <label for="full_name"><strong>Name:</strong></label><br>
    <label for="phone"><strong>Long Phone Label:</strong></label>
</div>
<div data-role="fieldcontain" id="b">
    <span id="full_name">John Smith</span><br>
    <span id="phone">(800) 555-1212</span>
</div>
</div>
</body>
</html>
...