آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش jQuery Mobile - دکمه ها (Buttons)
دکمه‌ها (Buttons)
این عنصر، دکمه‌ای قابل کلیک را که شامل محتوایی مانند متن یا تصویر است با استفاده از کلاس ui-btn مشخص می‌کند.
شما می‌توانید به صورت‌های مختلفی دکمه‌ها را ایجاد کنید که در جدول زیر نشان داده شده‌اند −
| ردیف | نوع و توضیحات دکمه |
|---|---|
| ۱ | دکمه اساسی (Basic Button)
یک دکمه ساده در صفحه ایجاد کنید. |
| ۲ | گوشه‌های گرد در دکمه (Rounded corners to button)
می‌توانید گوشه‌های گرد را به دکمه اضافه کنید. |
| ۳ | گروه دکمه‌ها (Grouped Buttons)
گروهی از دکمه‌ها را در صفحه ایجاد کنید. |
| ۴ | دکمه‌های سایه‌دار (Shadow Buttons)
می‌توانید سایه‌های دکمه را اضافه کنید. |
| ۵ | دکمه داخلی (Inline Button)
می‌توانید دکمه را به اندازه محتوای آن نمایش دهید. |
| ۶ | دکمه کوچک (Mini Button)
نمایش دکمه‌های کوچکتر در صفحه. |
| ۷ | دکمه بازگشت (Back Button)
می‌توانید دکمه بازگشت را در صفحه ایجاد کنید. |
| ۸ | موقعیت آیکون‌ها (Icons Position)
می‌توانید موقعیت آیکون‌ها در دکمه را تنظیم کنید. |
| ۹ | دکمه غیرفعال (Disabled Button)
می‌توانید دکمه‌ها را غیرفعال کنید. |
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn">Using Anchor</a>
<button class = "ui-btn">Using Button</button>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>2-گوشه‌های گرد در دکمه (Rounded corners to button):
می توانید با استفاده از کلاس UI-corner-all گوشه های گرد را به دکمه های صفحه اضافه کنید.
مثال زیر استفاده از دکمه گوشه‌های گرد را در چارچوب موبایل جی کوئری نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn ui-corner-all">Rounded Anchor Element</a>
<button class = "ui-btn ui-corner-all">Rounded Button Element</button>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>3-گروه دکمه‌ها (Grouped Buttons):
با استفاده از ویژگی data-role = "controlgroup" گروهی از دکمه ها را به صورت عمودی و افقی در صفحه ایجاد کنید.
مثال زیر استفاده از دکمه گروه بندی را در چارچوب موبایل جی کوئری نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<div data-role = "controlgroup" data-type = "horizontal">
<p>Horizontal Button Group</p>
<a href = "#" class = "ui-btn">Apple</a>
<a href = "#" class = "ui-btn">Orange</a>
<a href = "#" class = "ui-btn">Grapes</a>
</div><br>
<div data-role = "controlgroup" data-type = "vertical">
<p>Vertical Button Group</p>
<a href = "#" class = "ui-btn">Apple</a>
<a href = "#" class = "ui-btn">Orange</a>
<a href = "#" class = "ui-btn">Grapes</a>
</div>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>4-دکمه‌های سایه‌دار (Shadow Buttons):
با استفاده از کلاس ui-shadow می توانید سایه را برای دکمه اضافه کنید.
مثال زیر استفاده از دکمه سایه در فریم ورک موبایل جی کوئری را نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn ui-shadow">Using Anchor Element</a>
<button class = "ui-btn ui-shadow">Using Button Element</button>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>5-دکمه داخلی (Inline Button):
با استفاده از کلاس ui-btn-inline می توانید دکمه را به اندازه محتوای آن نمایش دهید.
مثال زیر استفاده از دکمه درون خطی را در چارچوب موبایل جی کوئری نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>First Page Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<p>Normal Button</p>
<a href = "#page2" class = "ui-btn">Click here to go Page Two</a>
<p>Inline Button</p>
<a href = "#page2" class = "ui-btn">Click here to go Page Two</a>
</div>
<div data-role = "footer">
<h2>First Page Footer</h2>
</div>
</div>
<div data-role = "page" id = "page2">
<div data-role = "header">
<h2>Second Page Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<p>These are inline buttons</p>
<a href = "#page1" class = "ui-btn ui-btn-inline">Click here to go Page One</a>
<a href = "#page1" class = "ui-btn ui-btn-inline">Click here to go to Page One</a>
<a href = "#page1" class = "ui-btn ui-btn-inline">Click here to go to Page One</a>
</div>
<div data-role = "footer">
<h2>Second Page Footer</h2>
</div>
</div>
</body>
</html>6-دکمه کوچک (Mini Button):
با استفاده از کلاس ui-mini دکمه کوچکتر را در صفحه نمایش دهید.
مثال زیر استفاده از دکمه mini را در چارچوب موبایل جی کوئری نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn ui-mini">Small Button</a>
<a href = "#" class = "ui-btn">Normal Button</a>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>7-دکمه بازگشت (Back Button):
با استفاده از ویژگی data-rel = "back" دکمه بازگشت را در یک صفحه ایجاد کنید.
مثال زیر استفاده از دکمه بازگشت را در چارچوب موبایل جی کوئری نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "#page2" class = "ui-btn">Go to Page Two</a>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
<div data-role = "page" id = "page2">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn" data-rel = "back">Go Back to Page One</a>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>8-موقعیت آیکون‌ها (Icons Position)
با استفاده از کلاس ui-btn-icon-ico_pos می توانید موقعیت نمادها را در دکمه نمایش دهید.
مثال زیر استفاده از موقعیت آیکون را در دکمه در چارچوب موبایل jQuery نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn ui-icon-delete ui-btn-icon-left">Left Icon</a>
<a href = "#" class = "ui-btn ui-icon-delete ui-btn-icon-right">Right Icon</a>
<a href = "#" class = "ui-btn ui-icon-delete ui-btn-icon-top">Top Icon</a>
<a href = "#" class = "ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom Icon</a>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>9-دکمه غیرفعال (Disabled Button):
می‌توانید با استفاده از کلاس ui-state-disabled در عنصر anchor و با استفاده از ویژگی disabled در عنصر button، دکمه را غیرفعال کنید.
مثال زیر استفاده از دکمه غیرفعال را در چارچوب موبایل جی کوئری نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn ui-state-disabled">Disabled button using anchor element</a>
<button disabled = "">Disabled button using disabled attribute</button>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>