`

jquery mobile中的按钮大集合

阅读更多
 本文小结了jquery mobile中的一些常见按钮的用法,代码和样式,供参考:


1 首先是引入jquery和jquery mobile相关文件
 
<!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>



2 下面是按钮列表
 
[*]Button Icons


[url=javascript:void(0)]Delete[/url]
[url=javascript:void(0)]Plus[/url]
[url=javascript:void(0)]Minus[/url]
[url=javascript:void(0)]Check[/url]
[url=javascript:void(0)]Grid[/url]
[url=javascript:void(0)]Foward[/url]
[url=javascript:void(0)]Refresh[/url] [url=javascript:void(0)]Gear[/url]
[url=javascript:void(0)]Left Arrow[/url]
[url=javascript:void(0)]Right Arrow[/url]
[url=javascript:void(0)]Up Arrow[/url] [url=javascript:void(0)]Down Arrow[/url]
[url=javascript:void(0)]Home[/url]
[url=javascript:void(0)]Alert[/url]
[url=javascript:void(0)]Star[/url]
[url=javascript:void(0)]Info[/url]
[url=javascript:void(0)]Refresh[/url]
[url=javascript:void(0)]Back[/url] 



运行后,下图是其效果:


3 再来个没文字图片的

[*]Icons with no text


[url=javascript:void(0)]Delete[/url]
[url=javascript:void(0)]Plus[/url]
[url=javascript:void(0)]Minus[/url]
[url=javascript:void(0)]Check[/url] 



  

4 再演示文字结合按钮的和分组按钮的
 
[*]Inline

[url=javascript:void(0)]Delete[/url]
[url=javascript:void(0)]Plus[/url]
[url=javascript:void(0)]Minus[/url]
[url=javascript:void(0)]Check[/url]

[*]Horizontal Grouping


<div data-role="controlgroup" data-type="horizontal">
   [url=javascript:void(0)]Button 1[/url]
   [url=javascript:void(0)]Button 2[/url]
   [url=javascript:void(0)]Button 2[/url]
</div>

[*]Normal Grouping


<div data-role="controlgroup">
   [url=javascript:void(0)]Button 1[/url]
   [url=javascript:void(0)]Button 2[/url]
   [url=javascript:void(0)]Button 2[/url]
</div>


效果为:


5 演示没阴影,圆角的
 
[*]No Shadow


[url=javascript:void(0)]Delete[/url]
[url=javascript:void(0)]Plus[/url]

[*]No Corners


[url=javascript:void(0)]Minus[/url]
[url=javascript:void(0)]Check[/url]

[*]Icon Position


[url=javascript:void(0)]Grid[/url]    
[url=javascript:void(0)]Foward[/url]
[url=javascript:void(0)]Refresh[/url]
[url=javascript:void(0)]Gear[/url] 


  运行效果:
2
1
分享到:
评论

相关推荐

    jQuery_Mobile_教程集合

    在jQuery Mobile中创建按钮也非常简单。通过给a标签添加`data-role="button"`属性,我们可以快速地将链接转变为一个按钮。如果需要,我们还可以通过`data-icon`属性给按钮添加图标,并通过`data-iconpos`属性来控制...

    JqueryMobile 开发背景按钮小图标资源

    PNG图标可以直接导入到jQuery Mobile项目中,与框架的按钮样式结合使用。 **如何在jQuery Mobile中使用这些图标** 在jQuery Mobile中,添加图标到按钮非常简单。只需在按钮的HTML元素中使用`data-icon`属性,并...

    jqmDemo,jQuery Mobile

    jQuery Mobile中的主要组件包括导航栏(navbar)、页面容器(page)、表单(forms)、下拉菜单(select menus)、滑块(sliders)、按钮(buttons)、网格(grids)和可扩展的内容区域(collapsible content)。...

    jquery与jquerymobile知识大全

    3. **按钮组**:一组相关按钮的集合。 4. **表单元素**:支持各种输入类型,如文本框、选择框、滑块等。 5. **弹出框**:提供模态对话框功能。 6. **网格系统**:帮助布局页面内容。 7. **图标和符号**:提供一系列...

    jqueryMobile 教程+手册+实例

    本教程、手册和实例集合将帮助你深入理解和熟练掌握 jQuery Mobile 的核心概念和功能。 1. **jQuery Mobile 基础** - **事件绑定**:jQuery Mobile 提供了一系列触控事件,如 `vclick`(模拟点击)、`swipe`(滑动...

    50个jQuery Mobile开发技巧集萃

    - **案例研究**: 参考给定的链接,了解如何正确地在jQuery Mobile中添加额外的jQuery调用。 #### 5. 完整的基本页面 - **知识点**: 创建一个基本的jQuery Mobile页面所需的关键HTML结构。 - **详细介绍**: - **...

    jQuery Mobile快速入门245页完整版.pdf 和 所有源码

    首先,jQuery Mobile的核心特性之一是其统一的用户界面(UI)框架,它提供了一系列预定义的主题和组件,如页面、表单、按钮、工具栏等,使开发者能够轻松创建具有吸引力且一致性的移动界面。通过简单的HTML标记和CSS...

    JqueryMobile data-属性

    - `data-icon`: 设置按钮上的图标,可以引用 jQuery Mobile 提供的图标库。 - `data-iconpos`: 规定图标相对于文本的位置,如 left, right, top, bottom 或 notext。 - `data-iconshadow`: 控制按钮图标是否有...

    webapp界面UI框架Sencha Touch 是WEB APP的界面UI组件库,明显比jquery Mobile快.zip

    对于内存有限的移动设备,jQuery Mobile加载的资源可能过大,导致应用启动慢,消耗内存过多。 另外,Ratchet与Sencha Touch是两个不同的移动Web开发框架。Ratchet更轻量级,适合快速原型制作,而Sencha Touch则更...

    ( jQuery_Mobile中文手册.pdf

    ### jQuery Mobile 开发入门知识点详解 #### 概述 jQuery Mobile 是一款用于...以上是对 jQuery Mobile 开发入门手册中所提到的关键知识点的详细介绍,希望能帮助开发者们快速掌握 jQuery Mobile 的基本使用方法。

    Packt.jQuery.Mobile.First.Look

    此外,随书附带的`Packt.jQuery.Mobile.First.Look.Code.zip`文件很可能是书中示例代码的集合,读者可以下载并跟随书中的步骤进行操作,加深对知识的理解和掌握。 总之,《Packt.jQuery.Mobile.First.Look》是一本...

    jQuery_Mobile_和_JSON

    ##### 3.2 JSON 在 jQuery Mobile 中的应用 在 jQuery Mobile 中,JSON 可以用来: - **获取数据**:通过 AJAX 请求从服务器获取 JSON 数据。 - **渲染内容**:使用 JSON 数据动态生成 HTML 内容。 - **交互式功能**...

    HTML5+CSS3+JQueryMobile入门-源代码.zip

    HTML5、CSS3和JQueryMobile是现代网页开发中的核心技术,它们共同构建了丰富的、交互式的移动和...总之,这份源代码集合为学习HTML5、CSS3和JQueryMobile提供了一个直观的起点,帮助开发者快速进入移动Web开发的世界。

    [jQuery移动开发].源代码

    总的来说,这份源代码集合是深入理解和实践jQuery Mobile的强大资源,它可以帮助你从基础到高级,全面掌握这个框架的用法。通过学习和研究这些代码,你将能够更有效地构建适应各种移动设备的高性能Web应用。

    jquery2014-12月最新版本库

    jQuery Mobile是jQuery的一个分支,专注于移动应用的开发,提供一套完整的触控事件和可自定义的UI组件,如工具栏、按钮、滑块等,以适应各种屏幕尺寸和触摸操作。 **本地调试** 将jQuery库放在本地而不是通过外部...

Global site tag (gtag.js) - Google Analytics