`

jquery mobile中的按钮大集合

jquery 
阅读更多 
 本文小结了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 
踩

    
分享到：
      
      
    

  


  

    

      
      |
      Web应用开发必知的HTML 5编码实践方法
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      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》是一本...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      HTML5+CSS3+JQueryMobile入门-源代码.zip
                    
                  
    
                  
    HTML5、CSS3和JQueryMobile是现代网页开发中的核心技术，它们共同构建了丰富的、交互式的移动和...总之，这份源代码集合为学习HTML5、CSS3和JQueryMobile提供了一个直观的起点，帮助开发者快速进入移动Web开发的世界。
    
                
    
                
              
                
                
                
    
                  
    
                    
                      [jQuery移动开发].源代码
                    
                  
    
                  
    总的来说，这份源代码集合是深入理解和实践jQuery Mobile的强大资源，它可以帮助你从基础到高级，全面掌握这个框架的用法。通过学习和研究这些代码，你将能够更有效地构建适应各种移动设备的高性能Web应用。
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jquery2014-12月最新版本库
                    
                  
    
                  
    jQuery Mobile是jQuery的一个分支，专注于移动应用的开发，提供一套完整的触控事件和可自定义的UI组件，如工具栏、按钮、滑块等，以适应各种屏幕尺寸和触摸操作。  **本地调试**  将jQuery库放在本地而不是通过外部...
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics