JQuery moblile Demos Learning record theming, Button, icons icon, the brain really does not work.

JQuery moblile Demos Learning record theming, Button, icons icon, the brain really does not work.

• 06. Two
• /
• Jquery Mobile Front End
• /
• No Comments

This article originates from www.ifyao.com Forbidden reprint! www.ifyao.com

A CSS framework block theming

is an overall understanding of the default theme and the built-in A-E themes for each effect. To solve the problem, customize the theme, below is a knowledge point.

Http://www.w3cschool.cc/jquerymobile/jquerymobile-themes.html

JQuery Mobile can add a new theme to the mobile page.

Add or edit a new theme by modifying the CSS file (if you have already downloaded JQuery Mobile). You only need to copy the style module and then re-command the letter class name (f-z) and add your favorite colors and fonts to the style.

You can also add a new style to the theme in the HTML Document – Toolbar Add Class: Ui-bar-(A-Z), text content Add Class: ui-body-(A-Z) for the content:

Instance

Source Code

2. <style>
4. . UI-bar-F
6. {
8. Color:green;
10. Background-color:yellow;
12. }
14. . UI-body-F
16. {
18. Font-weight:bold;
20. Color:purple;
22. }
24. </style>

From now on, you can customize the style of the title and content area. The rest of the supplement, first general understanding, in practice, supplemented.

Button

Source Code

1. <a href="#" Class="UI-btn">anchor</a>
2. <button class="UI-btn">button</button>

The two most common, the rest of the effect is added on the two effects above.

As long as the class=ui-btn can.

The fillet is added to the style with Ui-corner-all.

Source Code

1. <a href="#" Class="UI-btn UI-corner-all">anchor</a>
2. <button class="UI-btn UI-corner-all">button</button>

Buttons with icons are rounded by default, but when you add a custom style, you can change

Source Code

2. <a href="#" Class="UI-btn UI-icon-delete UI-btn-icon-notext UI- Corner-all ">no text</a>
4. <div id="Custom-border-radius">
6. <a href="#" Class="UI-btn UI-icon-delete UI-btn-icon-notext UI -corner-all ">no text</a>
8. </div>

In CSS 3, Border-radius is used to set rounded corners.

Descendant selector, the effect is generated only in the a tag in the Div. Customize the button with an icon

Source Code

1. #custom -border -radius .ui- Btn-icon-notext.ui -corner-all {
2. -webkit-border-radius:  .3125em;
3. border-radius:  .3125em;
4. }

Add Ui-shadow button to create a shadow

Ui-btn-a or B is the body color of the button and can be customized.

Ui-btn-inline the button into the inline button

Ui-mini Mini button

Source Code

1. <a href= "#"   Class= "Ui-btn ui-icon-delete ui-btn-icon- Left ">anchor</a>
2. < Button Class= "Ui-btn ui-icon -delete ui-btn-icon -left ">button</button >

Ui-icon-delete is an icon fork, Ui-btn-icon-left is the icon on the far left.

Source Code

2. <a href="#" Class="UI-btn UI-icon-delete UI-btn-icon-left"> Left</a>
4. <a href="#" Class="UI-btn UI-icon-delete UI-btn-icon-right"> Right</a>
6. <a href="#" Class="UI-btn UI-icon-delete UI-btn-icon-top" >top</a>
8. <a href= "#"  class=< Span class= "st0" > "Ui-btn ui-icon-delete Ui-btn-icon-bottom " >bottom</a>
10. <a href="#" Class="UI-btn UI-icon-delete UI-btn-icon-notext"> Icon only</a>

The icon position, five kinds, the last Notext, is the button no text.

Source Code

1. <a href="#" Class="UI-btn UI-state-disabled">disabled anchor via class </a>
2. <button disabled="">button with disabled attribute</button>

Unable to click the status button

<button data-role= "None" >Button</button>

Native button style

This article originates from www.ifyao.com Forbidden reprint! www.ifyao.com

Icons icon

Ui-icon-arrow-d built-in icons, many, refer to jquery Mobile Demo

How to customize Icons Ui-icon-myicon

Source Code

2. <button class="UI-btn UI-shadow UI-corner-all UI-btn-icon-leftUI-icon -myicon ">myicon</button>
4. . UI-icon-myicon: After {
6. Background-image: URL(".. /_assets/img/glyphish-icons/21-skull.png ");
8. /* Make your icon fit */
10. background-size: 18px 18px; Define icon size
12. }

You can also use the SVG icon to make a custom SVG icon available and add an alternative PNG image when an alternative to SVG is not supported.

Source Code

1. . UI-icon-myicon: After{Background-image:Url "iconimg.svg" } /* Fallback */  .ui-nosvg .ui-icon-myicon:after {  Background-image:  Url ( "iconimg.png" ) ; }

Ui-btn-icon-notext only show the icon does not display text

You can also group the buttons

Source Code

2. <div data-role="Controlgroup" Data-type="Horizontal">
4. <p> Horizontal Group:</p>
6. <a href="#" Data-role="button"> Buttons 1</a>
8. <a href="#" Data-role="button"> Buttons 2</a>
10. <a href="#" Data-role="button"> Buttons 3</a>
12. </div><br>
14. <div data-role="Controlgroup" Data-type="vertical">
16. <p> Vertical grouping (Default):</p>
18. <a href="#" Data-role="button"> Buttons 1</a>
20. <a href="#" Data-role="button"> Buttons 2</a>
22. <a href="#" Data-role="button"> Buttons 3</a>
24. </div>

Effect Http://www.w3school.com.cn/tiy/t.asp?f=jquerymobile_button_group

Grids the grid layout behind

JQuery moblile Demos Learning record theming, Button, icons icon, the brain really does not work.