首页>>后端>>java->jquerymobile主题(jqueryanimate)

jquerymobile主题(jqueryanimate)

时间:2023-11-30 本站 点击:1

jquery mobile按钮写法有哪些

按钮是标准的HTML锚和输入元素的编码,通过jQuery移动的增强,使其更具吸引力和可移动设备上的。采用锚链接(一个元素)的导航按钮标记,并提交表单输入按钮元素。

为了容易的样式化按钮,Jquery Mobile自动把type为submit,reset,button或image的按钮元素或输入元素样式化为按钮,所以没有必要增加data-role="button"的属性。 基于表单(form-based)的按钮的原始按钮(input)是隐藏的,但是依然保留其标记。 当一个按钮的点击事件触发时,也会在原始的表单按钮上触发点击事件。

按钮事件create( event, ui ) 创建按钮触发的事件event:是第一个参数。类型:事件。ui:是第二个参数。类型:对象。//初始化按钮,并且创建指定的回调函数$( ".selector" ).buttonMarkup({ create: function( event, ui ) {}}); //给按钮,绑定一个事件监听器$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );

按钮方法disable() 禁用表单按钮此方法不接受任何参数$( "[type='submit']" ).button( "disable" ); $( ".selector" ).buttonMarkup( "disable" ); enable() 启用禁用表单按钮此方法不接受任何参数$( "[type='submit']" ).button( "enable" ); $( ".selector" ).buttonMarkup( "enable" ); refresh() 更新的表单按钮此方法不接受任何参数如果你操作一个表单按钮通过java script,你必须调用Refresh方法上更新的视觉风格$( "[type='submit']" ).button( "refresh" ); $( ".selector" ).buttonMarkup( "refresh" );

按钮选项corners 圆角 类型: 布尔值 默认值: true如果设置为真,将主题应用于按钮边界半径。此选项也可以通过 data-corners="false" 的属性设置.//使用编程方式设置$( "a" ).buttonMarkup({ corners: false });//在HTML中使用data-corners="false"的属性设置a href="#" data-role="button" data-corners="false"No rounded corners/a 与角选项指定初始化buttonMarkup$( ".selector" ).buttonMarkup({ corners: false }); 初始化后,获取或设置选项的圆角。// gettervar corners = $( ".selector" ).buttonMarkup( "option", "corners"

主题按钮 data-theme在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示,也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子"A"主题下的图标按钮 data-theme="a" div data-role="content" div data-role="controlgroup" data-type="horizontal"a href="index.html" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true"My button/aa href="index.html" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="a" data-inline="true"My button/aa href="index.html" data-role="button" data-icon="arrow-l"

分组按钮 data-role=controlgroup有时候,你想把一组按钮放进一个单独的容器内,使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内,然后给该容器添加 data-role="controlgroup" 属性,Jquery Mobile会创建一个垂直的按钮组,删除掉按钮间的margin和阴影,然后只在第一个按钮和最后一个按钮产生圆角,使他们看起来是一组按钮。div data-role="controlgroup" a href="index.html" data-role="button"Yes/a a href="index.html" data-role="button"No/a a href="index.html" data-role="button"Maybe/a/div水平排列 data-type="horizontal"默认情况下,组按钮表现为垂直列表,如果给容器添加 data-type="horizontal" 的属性,则可以转换为水平按钮的列表,按钮会横向一个挨着一个地水平排列,并设置只有足够大以适应内容的宽

内联按钮 data-inline=true默认情况下,在体内含量的所有按钮都称为块级元素,所以他们填补了屏幕的宽度。但是,如果你想让按钮外观紧凑,宽度只符合里面的文字和icon,那就给按钮添加data-inline="true"的属性。如果你有多个按钮,应该肩并肩地坐在同一行,将data-inline="true"的属性为每个按钮。这将风格的按钮将其内容的宽度和浮动按钮让他们坐在同一条直线上。a href="index.html" data-role="button" data-inline="true"Cancel/aa href="index.html" data-role="button" data-inline="true" data-theme="b"Save/a添加 data-mini="true" 对内联按钮创建一个更紧凑的版本:

给按钮添加图标 data-iconjQuery Mobile框架包括一组选定的图标移动应用程序通常需要。尽量减少下载大小,jQuery Mobile包含一个单一的白色图标的精灵,和自动添加一个半透明的黑圈背后的图标来确保它有任何背景颜色对比度好。一个图标,可以通过添加一个对锚杆指定要显示的图标数据图标属性添加到一个按钮。例如,下面的标记:a href="index.html" data-role="button" data-icon="delete"Delete/a迷你版 添加 data-mini="true" 属性图标样式列表jQuery Mobile 自带很多按钮小图标,如下图所示:左箭头:data-icon="arrow-l"右箭头:data-icon="arrow-r"上箭头:data-icon="arrow-u"下箭头:data-icon="arrow-d"删除:data-icon="delete"添加:data-icon="Plus"减少:data-icon="minus"检查:data-icon="Ch

创建按钮 data-role=button给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。样式链接按钮在一个网页的主要内容块,你可以样式的任何锚链接为按钮添加 data-role="button" 属性。该框架将加强与标记和类的链接方式链接按钮。例如,这个标记:a href="index.html" data-role="button"Link button/a注:风格像按钮链接都相同的视觉选择的按钮下面的真正形成,但也有一些重要的差异。基于链接的按钮,按钮是插件,不仅使用基本的button标记插件生成按钮的风格,所以窗体按钮方法(启用,禁用,刷新)不支持。如果你需要禁用基于链接的按钮(或元素),它可能申请伤残等级的UI残疾人自己用java script实现相同的效果。 迷你版 data-mini="true"一个更紧凑的版本,在工具栏和紧空间是有用的,添

jquery mobile 如何改变按钮、标题栏的颜色,他的默然颜色不喜欢,比如我喜欢红色!

jQuery Mobile 官方有个 ThemeRoller,是用来自定义主题的。不过好像没有中文版。

jquerymobile.com/themeroller/

默认你可以自定义三个主题,在上面的颜色中直接用鼠标把颜色拖到下面任何一个元素上,例如标题,颜色就会改变。

左边:

Header/Footer: 页眉/页脚

Body: 中间主要内容

Button Normal: 按钮 (正常)

Button Hover: 按钮 (鼠标经过)

Button Pressed: 按钮 (按下)

Text Color: 字体颜色

Background: 背景颜色

Border: 边框颜色

Link Color: 链接颜色

Text Shadow: 文字阴影

右边:

Lightness 明暗度

Saturation 饱和度

调整完之后点上面的 Download,在 Theme Name 中输入你自定义的主题名称,点 Download Zip,下载后复制到 css/themes 中就可以使用了。

我想 用jQuery Mobile 制作 wordpress 手机主题,在设置修改页面模板 (page.php)遇到问题~~

用Firebug看一下空白时,页面没有加载到内容、是不是异步脚本的顺序不当

jquery mobile主题问题

有可能是API改了,也有可能是你看那个例子写错了。在哪里加data-theme其实取决于jq mb的js设置,没必要纠结那么多。

jquery mobile自定义主题的问题

有个属性可以设置的,具体可以看

a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Bars/a

a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Edit/a

a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Arrow left/a

a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Arrow right/a

a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Arrow up/a

a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Arrow down/a

a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Delete/a

a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Plus/a

a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Minus/a

a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Check/a

a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Gear/a

a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Refresh/a

a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Forward/a

a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Back/a

a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Grid/a

a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Alert/a

a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Info/a

a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Home/a

a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true"Search/a

/div

jQuery Mobile有哪些强大的功能

jQuery Mobile 是创建移动 web 应用程序的框架。

jQuery Mobile 适用于所有流行的智能手机和平板电脑。

jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

1.跨平台

目前大部分的移动设备浏览器都支持HTML5标准,jQuery Mobile以HTML5标记配置网页,所以可以跨不同的移动设备,如Apple iOS,Android,BlackBerry,Windows Phone,Symbian和MeeGo等;

2.容易学习

jQuery Mobile通过HTML5的标记与CSS规范来配置与美化页面,对于已经熟悉HTML5及CSS3的读者来说,架构清晰,又易于学习.

3.提供多种函数库

例如键盘,触碰功能等,不需要辛苦编写程序代码,只要稍加设置,就可以产生想要的功能,大大了编写程序所花费的时间;

4.多样的布景主题和ThemeRoller工具

jQuery UI的ThemeRoller在线工具,只要通过下拉旱行设置,就能够自制出相当有特色的网页风格,并且可以将代码下载下来应用,另外,JQuery Mobile还提供布景主题,轻轻松松就能够快速创建高质感的网页.


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/java/3859.html