jquery mobile jQueryui框架过时了吗
这篇文章给大家聊聊关于jquery mobile，以及jQueryui框架过时了吗对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
怎么使用JQuery Mobile开发移动网站
方法/步骤
简单的说明一下JQueryMobile.它是一个很好的跨平台的移动端网站开发框架。是一个前台的框架。现在要使用这个框架组一个界面，这个界面很简单，但是麻雀虽小五脏俱全，然后模板实现，知识讲解完毕。html要使用HTML5的标准来写，因为JQueryMobile是基于HTML5的。书写html5的格式如图，
既然使用JQueryMobile就要有这个框架，这里可以使用本地引用的方式，和网上引用，也叫做cdn引用。就是比较稳定和快速的引用外部文件的一种方式。这里使用cdn的方式，这样只要可以上网就可以使用该框架。
在写移动端的网站的时候，一定要写一个meta的name为viewport的属性，因为该属性代表着网站页面的自适应。简单的写法为：<meta name="viewport" content="width=device-width, initial-scale=1">代表着网站为驱动设备的宽度。
然后加入框架之后，写一个简单的界面。这里面JQueryMobile大量的使用了一个data-的属性，这里使用最多的事data-role。代表着他默认的样式规则。就是提前定义好了很多的样式来供你使用。常用的page.代表着页面， listview，代表着一个列表视图。下面是代码和效果图
稍微说明一下。
data-role="page"是代表着一个页面可以看做该内容下是一个页面显示的内容
data-role=”header"代表着页面的页头，就是页面的最上面显示的内容这里需要注意，里面要加上子标签内容，要不然，就不会居中显示内容了。推荐使用h1.
data-role="footer"代表着页脚的内容。也是网站的一个说明信息。或者是一个底部导航菜单。还有一部分，就是data-role="content"是代表着页面内容部分，主要的内容在这里面显示。
这3个部分构成了一个简单的页面。所以，现在可以体验到它的强大，不用写太多的代码一个简单的框架就好了，下面继续增加一个listveiw的列表视图。
完成列表视图的代码，增加一个文章列举表的代码，这里列表是使用data-role="listview"来修饰样式。然后这里只需要加上data-role="listview"你发现想要的list效果就实现了。这样我们一个简单的页面效果就实现了。
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 rel="external nofollow" 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">My button</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="a" data-inline="true">My button</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-icon="arrow-l"
分组按钮 data-role=controlgroup有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内，然后给该容器添加 data-role="controlgroup"属性，Jquery Mobile会创建一个垂直的按钮组，删除掉按钮间的margin和阴影，然后只在第一个按钮和最后一个按钮产生圆角，使他们看起来是一组按钮。<div data-role="controlgroup"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button">Yes</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button">No</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-inline="true">Cancel</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>添加 data-mini="true"对内联按钮创建一个更紧凑的版本:
给按钮添加图标 data-iconjQuery Mobile框架包括一组选定的图标移动应用程序通常需要。尽量减少下载大小，jQuery Mobile包含一个单一的白色图标的精灵，和自动添加一个半透明的黑圈背后的图标来确保它有任何背景颜色对比度好。一个图标，可以通过添加一个对锚杆指定要显示的图标数据图标属性添加到一个按钮。例如，下面的标记：<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button">Link button</a>注：风格像按钮链接都相同的视觉选择的按钮下面的真正形成，但也有一些重要的差异。基于链接的按钮，按钮是插件，不仅使用基本的button标记插件生成按钮的风格，所以窗体按钮方法（启用，禁用，刷新）不支持。如果你需要禁用基于链接的按钮（或元素），它可能申请伤残等级的UI残疾人自己用java script实现相同的效果。迷你版 data-mini="true"一个更紧凑的版本，在工具栏和紧空间是有用的，添
jquery mobile的问题
工具栏（Toolbar）一般用于header，footer和utility bar,他们遍及一个移动页面和程序，所以jQuery Mobile提供了一系列标准的工具栏和导航工具来涵盖大部分常见情况。
AD：
头结构
header通常是页面顶部包含页面标题文字和可选按钮以及定位到左侧和/或右导航的工具条。
标题文本通常是一个H1标题元素，但它可以使用任何级别的标题(H1- H6)的，以体现语义的灵活性。例如，一个页面包含多个'page'时，可以使用H1表示的‘首页’的标题，H2元素表示二级‘页面’的标题。默认情况下所有标题级别是相同的风格，以保持视觉上的一致性。
1.<div data-role="header">
2.<h1>页面标题</h1>
3.</div>
默认 header的特性
header工具栏默认被设置为'a'主题调板(黑色)，但是你可以方便的设置主题调板.
Back页面标题
看到"back"按钮没?框架会自动在每个页面生成该按钮，以简化创建通用导航条的过程，要阻止header中自动添加该按钮，你可以自行在左边添加按钮或者为header容器添加 data-backbtn="false"属性。
添加按钮
在标准header配置中,文本旁边有很多位置可供添加按钮。每个按钮通常都是一个 a标签，但是任何可用的按钮标签都可以添加。为了节省空间，在工具栏中按钮被设置为inline styling，所以按钮的宽度会和它所包含了文本、按钮所匹配。
创建自定义后退按钮
如果你对a标记使用data-rel="back"属性，任何在此a上的点击都会模拟后退按钮，和浏览器的历史按钮一样，并会忽略a标记本身的href。当链接到一个已有页面，比如“主页”，或者生成后退按钮时或者一个按钮来关闭一个对话框时，该属性十分有用。当在你的源文件中使用此特性时，请确保提供一个有意义的href来指向引用页的URL(这样才能使得用户在C级浏览器中也能使用该特性)。同样的，请记住如果你只是想要一个反向过渡而并不实际回到上一页，你应该使用data-direction="reverse"属性来替代。
默认按钮定位
header插件会寻找header容器的直接子元素，并自动设置第一个链接在左边的位置，第二个链接在右边。在以下的例子中，“取消”按钮会出现在左边而“保存”会出现在右边。
1.<div data-role="header" data-position="inline">
2.<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-icon="delete">取消</a>
3.<h1>Edit Contact</h1>
4.<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-icon="check">保存</a>
5.</div>
按钮会自动适应按钮所在工具栏的调板颜色，所以在一个调板为“a”的header bar里一个按钮也会被设置为“a”，除非你单独设置按钮的 data-theme属性为其他值(例如b)。
1.<div data-role="header" data-position="inline">
2.<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-icon="delete">Cancel</a>
3.<h1>Edit Contact</h1>
4.<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-icon="check" data-theme="b">Save</a>
5.</div>
用class控制按钮的位置
按钮位置同样可以用class而不是源代码的顺序来控制。当你想按钮只在右边时就非常有用。为a标记添加ui-btn-left或者ui-btn-right class来指定按钮的位置。
在以下例子中，我们只在右边添加了一个按钮，所以必须要添加 data-backbtn="false"来防止出现后退按钮，而右边的按钮则需要添加ui-btn-right class。
1.<div data-role="header" data-position="inline" data-backbtn="false">
2.<h1>页面标题</h1>
3.<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-icon="gear" class="ui-btn-right">选项</a>
4.</div>
自定义后退按钮的文本
如果您想配置后退按钮的文本，您可以使用 data-back-btn-text="previous"属性，或者以编程方式设置插件的选项：$.mobile.page.prototype.options.backBtnText="previous";。如果你采用编程方式，请在mobileinit事件的处理程序中设置该选项。
自定义 header配置
如果你要创建一个自定义的header，将你自己的标记包裹在一个 div容器中(在header容器中)，插件不会应用自动按钮逻辑，所以你可以编写自定义样式来布局你的header内容。
好了，关于jquery mobile和jQueryui框架过时了吗的问题到这里结束啦，希望可以解决您的问题哈！