Статьи

JQuery Mobile: кнопки

Ноябрь 30, 2018

В этой статье я расскажу о кнопках в jQuery Mobile. Кнопки jQuery Mobile по умолчанию отображаются с центрированной меткой, закругленными углами и тенями.

Посмотрим, как это работает.

Шаг 1: Создайте HTML-страницу для демонстрации значков кнопок jQuery Mobile .

Шаг 2: Поместите ниже код в HTML-страницу. Если вы заметили, я использую Microsoft CDN

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title></title>
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.js" type="text/javascript"></script>
   <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
   <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Шаг 3: Теперь разместите код под разделом тела HTML-страницы.


<li>Button Icons</li>

<a href="javascript:void(0)" data-role="button" data-icon="delete">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check">Check</a>
<a href="javascript:void(0)" data-role="button" data-icon="grid">Grid</a>
<a href="javascript:void(0)" data-role="button" data-icon="forward">Foward</a>
<a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a> <a href="javascript:void(0)" data-role="button" data-icon="gear">Gear</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-l">Left Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-r">Right Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-u">Up Arrow</a> <a href="javascript:void(0)" data-role="button" data-icon="arrow-d">Down Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="home">Home</a>
<a href="javascript:void(0)" data-role="button" data-icon="alert">Alert</a>
<a href="javascript:void(0)" data-role="button" data-icon="star">Star</a>
<a href="javascript:void(0)" data-role="button" data-icon="info">Info</a>
<a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a>
<a href="javascript:void(0)" data-role="button" data-icon="back">Back</a>

Шаг 4: Вы получаете экран, как показано ниже. Снимок экрана ниже с устройства Windows Phone.

Вы можете просмотреть его в своем Windows Phone или любом другом устройстве, используя приведенный ниже URL.

http://dotnetspeaks.com/LiveDemos/jquerymobileButtonIcons.html

Шаг 5: Создайте еще одну страницу HTML и повторите шаг 2, чтобы продемонстрировать кнопки без текста в jQuery Mobile.

Шаг 6: Поместите код под тегом body HTML-страницы, созданной на шаге 5.

<li>Icons with no text</li>

<a href="javascript:void(0)" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus" data-iconpos="notext">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus" data-iconpos="notext">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check" data-iconpos="notext">Check</a>

Шаг 7: Теперь запустите приложение, и вы получите экран, как показано ниже на Windows Phone.

Вы можете просмотреть его в своем Windows Phone или любом другом устройстве, используя ниже URL

http://dotnetspeaks.com/LiveDemos/jquerymobilebuttonwithnotext.html

Шаг 8: Создайте еще одну страницу HTML и повторите шаг 2, чтобы продемонстрировать  встроенные кнопки и группирование кнопок в jQuery Mobile.

Шаг 9: Поместите код под тегом body html-страницы, созданной на шаге 8.

<li>Inline</li>
<a href="javascript:void(0)" data-role="button" data-icon="delete" data-inline="true">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus" data-inline="true">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus" data-inline="true">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check" data-inline="true">Check</a>

<li>Horizontal Grouping</li>

<div data-role="controlgroup" data-type="horizontal">
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 1</a>
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a>
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a>
</div>

<li>Normal Grouping</li>

<div data-role="controlgroup">
   <a href="javascript:void(0)" data-role="button">Button 1</a>
   <a href="javascript:void(0)" data-role="button">Button 2</a>
   <a href="javascript:void(0)" data-role="button">Button 2</a>
</div>

Шаг 10: Теперь запустите приложение, и вы получите экран, как показано ниже на Windows Phone.

Вы можете просмотреть его в своем Windows Phone или любом другом устройстве, используя ниже URL

http://dotnetspeaks.com/LiveDemos/jquerymobileInlineAndGroupedButton.html

Шаг 11: Создайте еще одну страницу .html и повторите шаг 2, чтобы продемонстрировать « Нет тени», «Углы» и «Положение значка» в кнопке в jQuery Mobile.

Шаг 12: Поместите код под тегом body html-страницы, созданной на шаге 11.

<li>No Shadow</li>

<a href="javascript:void(0)" data-role="button" data-shadow="false" data-icon="delete" data-inline="true">Delete</a>
<a href="javascript:void(0)" data-role="button" data-shadow="false" data-icon="plus" data-inline="true">Plus</a>

<li>No Corners</li>

<a href="javascript:void(0)" data-role="button" data-corners="false" data-icon="minus" data-inline="true">Minus</a>
<a href="javascript:void(0)" data-role="button" data-corners="false" data-icon="check" data-inline="true">Check</a>

<li>Icon Position</li>

<a href="javascript:void(0)" data-role="button" data-iconpos="right" data-icon="grid" data-inline="true">Grid</a>    
<a href="javascript:void(0)" data-role="button" data-iconpos="left" data-icon="forward" data-inline="true">Foward</a>
<a href="javascript:void(0)" data-role="button" data-iconpos="bottom" data-icon="refresh" data-inline="true">Refresh</a>
<a href="javascript:void(0)" data-role="button" data-iconpos="top" data-icon="gear" data-inline="true">Gear</a>

Шаг 12: Теперь запустите приложение, и вы получите экран, как показано ниже на Windows Phone.

Вы можете просмотреть его в своем Windows Phone или любом другом устройстве, используя ниже URL

http://dotnetspeaks.com/LiveDemos/effectsiconpositioningshadow.html

На этом статья JQuery Mobile Buttons заканчивается

37
Share: