Technical Library
-
Device Technologies
- Biometrics
- Device Detection
- HTML5
- Mobile Web Fundamentals
- Mobile Web Standards
- Multi Core Coding in Dalvik
- Multi Thread Coding in Android
- Near Field Communication
- NFC Forum
- NFC Use Cases
- NFC Case Studies
- NFC Tags
- GlobalPlatform and NFC
- User Identification
- Native Code
- Application Privacy Guidelines
- Downloading DRM Content in Android
- IPv6
- Likelihood of a Successful Attack
- Messaging Privacy
- Mobile Web Security
- Network Security
- Security Policy
- Security at AT&T
- Types of Security Threats
- Wireless Application Security
- Security Policy Enforcement
- Slider Controls for Android
- Check Box for Android
- Dropdown for Android
- Image Button for Android
- Toggle Button for Android
- Radio Button for Android
- Segmented Text Toggle Button for Android
- Static Text Toggle Button for Android
- Switch for Android
- Text Fields for Android
- Getting Started with AT&T UI
- HTML5 UI Elements
- HTML5 Checkboxes
- HTML5 Dropdown
- HTML5 Image Button
- HTML5 Image Toggle Button
- HTML5 Radio Button
- HTML5 Segmented Toggle Button
- HTML5 Slider
- HTML5 Static Text Toggle Button
- HTML5 Switch Control
- HTML5 Text Fields
- Other AT&T Websites Next Generation External Application Gateway (NGEAG)
- Native Messaging
- NGEAG Certification
- NGEAG Developer Resources
- Partner Provisioning Onboarding
- NGEAG Production
- SOAP Parlay X
HTML5 Image Button
The image button UI Element is a customizable button UI Element which includes images for each state. The following image shows some examples:
Creation
You need to add the following code to create the buttons. There are different types of buttons:
Buttons with an image on the left
<a href="#" data-role="button" data-icon="check">Check</a> <a href="#" data-role="button" data-icon="delete" data-theme="e">Delete</a> <a href="#" data-role="button" data-icon="play">Play/Pause</a>
The data-icon attribute defines which icon is showed inside the button. The options are 'check', 'delete', and 'play'.
Full Image Buttons
You can create full image buttons with no text adding this code
<a href="#" data-role="button" data-icon="close" data-iconpos="notext" data-theme="d" class="ui-btn-icon-custom ui-btn-icon-square ui-btn-icon-large ui-btn-icon-noborder">Close </a> <a href="#" data-role="button" data-icon="levelup" data-iconpos="notext" data-theme="d" class="ui-btn-icon-custom ui-btn-icon-square ui-btn-icon-large ui-btn-icon-noborder">Level Up </a> <a href="#" data-role="button" data-icon="list" data-iconpos="notext" data-theme="f" class="ui-btn-icon-custom ui-btn-icon-square ui-btn-icon-xxlarge ui-btn-icon-noborder">List </a> <a href="#" data-role="button" data-icon="remove" data-iconpos="notext" data-theme="d" class="ui-btn-icon-custom ui-btn-icon-small ui-btn-icon-noborder">Remove </a> <a href="#" data-role="button" data-icon="play-alt" data-iconpos="notext" data-theme="f" class="ui-btn-icon-custom ui-btn-icon-medium ui-btn-icon-noborder">Play </a> <a href="#" data-role="button" data-icon="pause-alt" data-iconpos="notext" data-theme="f" class="ui-btn-icon-custom ui-btn-icon-medium ui-btn-icon-noborder">Pause </a> <a href="#" data-role="button" data-icon="secondary" data-iconpos="notext" data-theme="f" class="ui-btn-icon-custom ui-btn-icon-square ui-btn-icon-xlarge ui-btn-icon-noborder">Secondary </a>
The predefined buttons are:
data-icon | Description |
---|---|
close | Close Button |
levelup | Level Up Button |
list | List Button |
remove | Remove Button |
play-alt | Play Button (small) |
pause-alt | Pause Button (small) |
secondary | Plus Button |
14100000
Session Expired
Sorry! Your session has expired.