`
zhangyaochun
  • 浏览: 2595846 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jqm之button

阅读更多

 

  • 如果希望把a转换渲染成按钮?
//添加data-role属性为button,默认会变成块级元素
<a data-role="button">其实我是一个按钮</a>

 

  • 如果希望把上面的转换成内联?
//增加一个data-inline的属性值为true
<a data-role="button" data-inline="true">其实我是一个内联的按钮</a>

 

  • 自动初始化渲染的按钮标签包含哪些?
//其实和initSelector指定有关系
//initSelector:"button,[type='button',[type='submit'],[type='reset'],[type='image']]";

<button>Button</button>
<input type="button"  value="input button" />
<input type="submit" value="input submit" />
<input type="reset" value="input reset" />
<input type="image" value="input image" />

 

  • 如果想禁用自动初始化?
<button data-role="none">button不自动初始化</button>

 

  • 如果想增加主题c?
<button data-theme="c">我是有主题c的按钮</button>

 

  •  想要加点图标?
//data-icon属性来指定图标,比如值为home
<button data-icon="home">是是一个带图标home的按钮</button>

 

    效果图:

 

       
 

 

  • 想要设置图标的位置?
//用data-iconpos来设置图标的位置,默认是left,也可以设置top|right|bottom
<button data-icon="home" data-iconpos="top">是是一个带图标home的按钮</button>

 

    效果图:

 

     
 

 

  • 想要不显示文字,只有图标?
//设置data-iconpos为notext
<button data-icon="home" data-iconpos="notext">是是一个带图标home的按钮,只有图标没有文字</button>

 

  • 大小: 6.2 KB
  • 大小: 7.2 KB
分享到:
评论

相关推荐

    jqerymobile开发实战案例

    jqm的核心是基于“页面”和“数据-角色”的设计理念,其中页面由HTML5的`&lt;div data-role="page"&gt;`定义,而数据-角色则通过添加"data-"属性来增强HTML元素的功能,比如`data-role="button"`。这种结构使得页面在移动...

    empty_jqm_struct:用于开始 jquery 移动项目的空代码

    - **导航(Navigation)**:使用 data-role="navbar" 创建顶部工具栏,data-role="button" 和 data-rel="back" 实现按钮和返回功能。 - **表单(Forms)**:支持各种表单元素,如输入框、选择器、开关等,并提供了...

    JQMButtonNumberInput:基于按钮的jQuery Mobile数字输入

    &lt;div data-role="jqm-button-number-input" id="numberInput"&gt; ``` 3. **初始化插件**:在文档准备就绪后,通过调用插件函数对输入元素进行初始化。 ```javascript $(document).on("pagecreate", function()...

    query mobile 代码助手

    将常用的组件分类成page页面、content内容、Form表单,其中page页面包括header头部、navbar导航、footer底部、grid网格、panel面析、collapsible折叠层,content内容image图片、audio音频、video视频、button按钮、...

    Jquery mobile 中文开发文档

    - **数据属性(Data Attributes)**:jQuery Mobile 使用 HTML5 的 data-* 属性来标记和配置 UI 元素,例如 `data-role="button"` 创建按钮,`data-theme` 定义颜色主题。 - **增强页面(Enhancement)**:当页面...

    Jquery Mobile 1.4.2 for Asp.net

    在Asp.net中,开发者可以使用服务器控件,如TextBox、Button等,然后利用jQuery Mobile的样式和事件处理来增强用户体验。在本项目中,用户注册和登录页面就是这种集成的实例。 **用户注册与登录** 用户注册通常...

    jquery mobile 制作notepad

    &lt;button type="button" id="save"&gt;保存&lt;/button&gt; ``` JavaScript代码示例: ```javascript $('#save').on('click', function() { var id = $(this).closest('form').data('id'); var title = $('#title').val()...

    前端项目-jqModal.zip

    close: '.closeButton', // 关闭按钮的选择器 overlay: 30, // 透明度 toTop: true, // 弹出时移至顶部 onShow: function(a) { a.w.fadeIn('slow'); } // 自定义打开动画 }); ``` ### 5. 高级用法 除了基本...

    java弹出框效果

    $('#buttonId').click(function() { $('#dialog').jqmShow(); }); ``` 当用户点击具有id为`buttonId`的元素时,弹出框将会显示。 3. **弹出框样式和配置**: jqModal允许自定义弹出框的外观和行为。通过设置...

    jqb-ko-fastclick:从触摸设备上的点击事件中删除 300 毫秒的延迟

    npm install jqm-ko-fastklick --save 然后将它加载到你的src/index.js入口点: require('jqb-ko-fastclick'); 该模块没有初始化选项或程序。 在模板中使用 fastclick只是click绑定的一个普通包装器,因此您可以...

    jQuery移动开发

    例如,`data-role="page"`属性将一个div元素标记为一个页面,而`data-role="button"`则将一个元素转换为一个按钮。通过这种方式,`jqmData()`选择器使得jQuery Mobile能够自动增强页面元素,实现移动优化的布局和...

    jqModal弹窗插件

    $("#closeButton").click(function() { $("#dialog").jqmHide(); }); ``` **5. 动画效果** jqModal支持多种动画效果,如淡入淡出(fade)、滑动(slide)等。这些效果可以通过配置`ajax`选项实现,或者在`....

    jquerymobile学习小项目

    - 例如,创建一个按钮:`&lt;a href="#" data-role="button"&gt;按钮&lt;/a&gt;`。 7. **事件** - `pageinit` 事件在页面首次加载或通过 AJAX 加载时触发,是进行页面特定初始化的好时机。 - `tap` 事件模拟点击行为,适用于...

    jquerymobile中文文档

    - `&lt;a&gt;` 和 `&lt;button&gt;` 元素可以转换为触摸优化的按钮,通过添加 `data-role="button"`。 2. **表单**: - 表单元素(如输入框、选择器、开关)都被美化,并且提供了自动验证功能。 3. **网格**: - `...

    jquery mobile

    - **按钮**(`&lt;a&gt;`或`&lt;button&gt;`元素,加上`data-role="button"`) - **表单**(输入字段、选择器、滑块等,使用特定的数据属性增强) - **网格**(`&lt;div&gt;`元素,使用`data-role="grid"`) - **面板**(可滑动的侧...

    jiaoben3254.rar

    这个框架基于jQuery核心库,旨在简化跨平台开发,支持多种浏览器,包括IE8、360、Firefox、Chrome、Safari、Opera、傲游、搜狗以及世界之窗等。这些浏览器覆盖了Windows、Mac、Linux等操作系统,使得开发者能够构建...

    基于Jquery Mobile的IOS主题

    例如,`data-role="button"`用于将HTML元素转变为按钮。 3. **可触摸的控件(Touchable Elements)**:jQuery Mobile提供了一系列触摸友好的控件,如滑块(slider)、开关(toggle switch)、下拉菜单(select menu...

Global site tag (gtag.js) - Google Analytics