jQuery Moblile Demos学习记录Theming、Button、Icons图标，脑子真的不好使。

jQuery Moblile Demos学习记录Theming、Button、Icons图标，脑子真的不好使。

• 06. 二
• /
• Jquery Mobile 前端
• /
• 没有评论

 

本文来源于www.ifyao.com禁止转载！www.ifyao.com

一CSS Framework块

Theming

是一个整体了解默认主题和内置的A-E主题各个效果。待解决问题，自定义主题，下边是一个知识点。

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

jQuery Mobile 可以在移动页面添加新主题。

通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（f-z）,并在样式中添加你喜欢的颜色和字体。

你也可以在 HTML 文档中添加主题的新样式 – 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) for the content:

实例

Source code

1. <style>
2. .ui-bar-f
3. {
4. color:green;
5. background-color:yellow;
6. }
7. .ui-body-f
8. {
9. font-weight:bold;
10. color:purple;
11. }
12. </style>

从目前看，可以自定义标题和内容区域的样式。其他后边再补充，先总体了解，实践中再补充。

Button

Source code

1. <a href="#" class="ui-btn">Anchor</a>
2. <button class="ui-btn">Button</button>

最普通的两种，其余效果都是在这两种效果上面添加。

只要class=ui-btn即可。

圆角在样式里面加上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>

带图标的按钮默认是圆的，但是添加了自定义样式后可以改变

Source code

1. <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
2. <div id="custom-border-radius">
3. <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
4. </div>

在CSS 3中border-radius是用来设置圆角的。

后代选择器，效果只产生于DIV中的a标签。自定义了带图标的按钮

Source code

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

添加ui-shadow   按钮产生阴影

ui-btn-a 或者b是按钮的主体颜色，可以自定义。

ui-btn-inline 将按钮变成行内的按钮

ui-mini  迷你按钮

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是一个图标叉叉，ui-btn-icon-left是图标在最左边。

Source code

1. <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
2. <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
3. <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a>
4. <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom</a>
5. <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Icon only</a>

图标位置，五种，最后的notext,是按钮没有文字。

Source code

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

无法点击状态的按钮

<button data-role=”none”>Button</button>

原生的按钮样式

本文来源于www.ifyao.com禁止转载！www.ifyao.com

Icons图标

ui-icon-arrow-d内置的图标，很多，参考JQuery Mobile Demo

如何自定义图标 ui-icon-myicon

Source code

1. <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-myicon">myicon</button>
2. .ui-icon-myicon:after {
3. background-image: url("../_assets/img/glyphish-icons/21-skull.png");
4. /* Make your icon fit */
5. background-size: 18px 18px;//定义图标尺寸
6. }

你也可以地使用SVG图标 可以将自定义SVG图标并且提供，当不支持SVG时候的替代方案，添加一个替代的PNG图片。

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仅仅显示图标不显示文字

还可以将按钮分组

Source code

1. <div data-role="controlgroup" data-type="horizontal">
2. <p>水平分组：</p>
3. <a href="#" data-role="button">按钮 1</a>
4. <a href="#" data-role="button">按钮 2</a>
5. <a href="#" data-role="button">按钮 3</a>
6. </div><br>
7. <div data-role="controlgroup" data-type="vertical">
8. <p>垂直分组（默认）：</p>
9. <a href="#" data-role="button">按钮 1</a>
10. <a href="#" data-role="button">按钮 2</a>
11. <a href="#" data-role="button">按钮 3</a>
12. </div>

效果http://www.w3school.com.cn/tiy/t.asp?f=jquerymobile_button_group

Grids网格布局后边进行