`

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编码实践方法
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

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

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      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）。...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jqueryMobile 教程+手册+实例
                    
                  
    
                  
    本教程、手册和实例集合将帮助你深入理解和熟练掌握 jQuery Mobile 的核心概念和功能。  1. **jQuery Mobile 基础**  - **事件绑定**：jQuery Mobile 提供了一系列触控事件，如 `vclick`（模拟点击）、`swipe`（滑动...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jQuery Mobile快速入门245页完整版.pdf 和 所有源码
                    
                  
    
                  
    首先，jQuery Mobile的核心特性之一是其统一的用户界面（UI）框架，它提供了一系列预定义的主题和组件，如页面、表单、按钮、工具栏等，使开发者能够轻松创建具有吸引力且一致性的移动界面。通过简单的HTML标记和CSS...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      webapp界面UI框架Sencha Touch 是WEB APP的界面UI组件库,明显比jquery Mobile快.zip
                    
                  
    
                  
    对于内存有限的移动设备，jQuery Mobile加载的资源可能过大，导致应用启动慢，消耗内存过多。  另外，Ratchet与Sencha Touch是两个不同的移动Web开发框架。Ratchet更轻量级，适合快速原型制作，而Sencha Touch则更...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      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库放在本地而不是通过外部...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      基于Jquery网站框架
                    
                  
    
                  
    jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript编程，尤其在处理网页中的DOM操作、事件处理、动画效果以及Ajax交互方面。jQuery的流行在于其易于学习和使用，同时兼容多种浏览器，使得...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jQuery全面技术网页
                    
                  
    
                  
    2. 链式操作：jQuery对象返回的是一个包含多个DOM元素的集合，允许连续调用多种方法，如$(element).css('color', 'red').fadeIn(500)。  3. 事件处理：jQuery提供了统一的事件绑定和解绑机制，例如$.fn.click()、$....
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Jquery  实现效果 多个demo
                    
                  
    
                  
     - jQuery Mobile或第三方库提供了对触摸事件的支持，如`.swipe()`, `.tap()`等。  在提供的`Jquery Demos`压缩包中，你可以找到这些概念的实际应用示例，通过运行和分析代码，能更直观地理解jQuery的效果实现方式。...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jquery-ui API jquery ui
                    
                  
    
                  
    jQuery UI是一个基于jQuery库的强大且功能丰富的用户界面插件集合，它提供了一套完整的解决方案，用于构建交互式、美观的网页应用。jQuery UI包含了一系列组件，如对话框（Dialog）、日期选择器（Datepicker）、拖放...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jquery-easyui-1.4.3
                    
                  
    
                  
    4. `jquery.easyui.mobile.js`：针对移动设备优化的版本，使EasyUI能够适应手机和平板等触屏设备，提供良好的移动端用户体验。  5. `licence_gpl.txt`、`changelog.txt`、`readme.txt`：分别包含了软件的GPL许可证...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JQuery 学习资料
                    
                  
    
                  
    - **移动开发**：尽管存在专为移动设备优化的库，如jQuery Mobile，但基础版jQuery也可用于大部分移动应用开发。  ### 5. 学习资源  - **jQuery API文档**：官方文档详尽介绍了所有方法和函数，是学习jQuery的重要...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      简单的GridView单选按钮行选择器
                    
                  
    
                  
    在IT领域，尤其是在Web开发中，GridView控件是ASP.NET框架中的一个重要组成部分，它用于显示数据集合，并提供了灵活的数据操作和格式化功能。本话题主要关注如何在一个GridView中实现单选按钮行选择器，这对于用户...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      最新easyui-1.6.3
                    
                  
    
                  
    EasyUI 是一个基于 jQuery 的用户界面插件集合，它提供了丰富的组件和样式，使得开发者能够快速构建现代化的Web应用程序。最新版本"easyui-1.6.3"为这一框架带来了若干更新和改进，旨在提升性能和用户体验。  1. **...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      6个非常精美的Web前端flash+xml焦点图代码（二）
                    
                  
    
                  
    标题中的“6个非常精美的Web前端flash+xml焦点图代码（二）”指的是这是一个关于Web前端开发的资源，特别是涉及到使用Flash和XML技术创建的焦点图（也称为轮播图或幻灯片）的代码集合。焦点图是网页设计中常见的一种...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jquerySlideshow_网页素材_
                    
                  
    
                  
    【标题】"jQuery Slideshow - 网页素材" 是一个关于使用jQuery库创建滑动展示效果的网页素材集合。这种效果通常用于制作网站上的图片轮播、广告展示或者产品焦点图，为用户提供动态且吸引人的视觉体验。jQuery是...
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics