- 触摸事件在用户触摸屏幕(页面)时触发。触摸事件同样可应用与桌面电脑上:点击或者滑动鼠标!jQuery Mobile 点击点击事件在用户点击元素时触发。如下实例:当点击 <p> 元素时,隐藏当前的 <p> 元素:实例$("p").on("tap",function(){ $(this).hide();});尝试一下 »jQuery Mobile 点击不放(长按)点击不放(长按) 事件在点击并... 触摸事件在用户触摸屏幕(页面)时触发。触摸事件同样可应用与桌面电脑上:点击或者滑动鼠标!jQuery Mobile 点击点击事件在用户点击元素时触发。如下实例:当点击 <p> 元素时,隐藏当前的 <p> 元素:实例$("p").on("tap",function(){ $(this).hide();});尝试一下 »jQuery Mobile 点击不放(长按)点击不放(长按) 事件在点击并...
- jQuery Mobile 也提供了针对移动端浏览器的事件:触摸事件 - 当用户触摸屏幕时触发滑动事件 - 当用户上下滑动时触发定位事件 - 当设备水平或垂直翻转时触发页面事件 - 当页面显示,隐藏,创建,加载或未加载时触发初始化 jQuery Mobile 事件在学习jQuery时我们学到了用$(document).ready()来使你的jQuery代码脚本在DOM元素加载完成后才开始执... jQuery Mobile 也提供了针对移动端浏览器的事件:触摸事件 - 当用户触摸屏幕时触发滑动事件 - 当用户上下滑动时触发定位事件 - 当设备水平或垂直翻转时触发页面事件 - 当页面显示,隐藏,创建,加载或未加载时触发初始化 jQuery Mobile 事件在学习jQuery时我们学到了用$(document).ready()来使你的jQuery代码脚本在DOM元素加载完成后才开始执...
- 如需创建滑动条,请使用 <input type="range">:实例<form method="post" action="demoform.php"> <label for="points">进度:</label> <input type="range" name="points" id="points" value="50" min="0" max="100"></form>尝试一... 如需创建滑动条,请使用 <input type="range">:实例<form method="post" action="demoform.php"> <label for="points">进度:</label> <input type="range" name="points" id="points" value="50" min="0" max="100"></form>尝试一...
- <select> 元素创建带有若干选项的下拉列表。<select> 元素内的 <option> 元素定义了列表中的可用选项:实例<form method="post" action="demoform.html"><fieldset class="ui-field-contain"><label for="day">Select Day</label><select name="day" i... <select> 元素创建带有若干选项的下拉列表。<select> 元素内的 <option> 元素定义了列表中的可用选项:实例<form method="post" action="demoform.html"><fieldset class="ui-field-contain"><label for="day">Select Day</label><select name="day" i...
- jQuery Mobile 文本输入框输入字段是通过标准的 HTML 元素编码的,jQuery Mobile 将为它们添加样式使其看起来更具吸引力,在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型:实例<form method="post" action="demo_form.php"><div class="ui-field-contain"><label for... jQuery Mobile 文本输入框输入字段是通过标准的 HTML 元素编码的,jQuery Mobile 将为它们添加样式使其看起来更具吸引力,在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型:实例<form method="post" action="demo_form.php"><div class="ui-field-contain"><label for...
- 可过滤元素所有的元素如果有一个或更多的子元素均可过滤。如何创建搜索字段:你想过滤的元素必须使用 data-filter="true" 属性。创建 <input> 元素并指定 id,元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中,表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段... 可过滤元素所有的元素如果有一个或更多的子元素均可过滤。如何创建搜索字段:你想过滤的元素必须使用 data-filter="true" 属性。创建 <input> 元素并指定 id,元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中,表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段...
- jQuery Mobile 列表图标默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)。如果要修改这个图标可以使用 data-icon 属性:实例<ul data-role="listview"> <li><a href="#">Default is right arrow</a></li> <li data-icon="plus"><a href="#">data... jQuery Mobile 列表图标默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)。如果要修改这个图标可以使用 data-icon 属性:实例<ul data-role="listview"> <li><a href="#">Default is right arrow</a></li> <li data-icon="plus"><a href="#">data...
- jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>).列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接,用户可以点击它:实例<ol data-role="listview"> <l... jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>).列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接,用户可以点击它:实例<ol data-role="listview"> <l...
- jQuery Mobile 网格布局jQuery Mobile 提供了一套基于 CSS 的分列布局。然而,在移动设备上,由于考虑手机的屏幕宽度狭窄,一般不建议使用分栏分列布局。但有时您想要将较小的元素(如按钮或导航标签)并排地排列在一起,就像是在一个表格中一样。这种情况下,推荐使用分列布局。网格中的列是等宽的(合计是 100%),没有边框、背景、margin 或 padding。这里有四种布... jQuery Mobile 网格布局jQuery Mobile 提供了一套基于 CSS 的分列布局。然而,在移动设备上,由于考虑手机的屏幕宽度狭窄,一般不建议使用分栏分列布局。但有时您想要将较小的元素(如按钮或导航标签)并排地排列在一起,就像是在一个表格中一样。这种情况下,推荐使用分列布局。网格中的列是等宽的(合计是 100%),没有边框、背景、margin 或 padding。这里有四种布...
- 响应式表格响应式设计一般用于适配用户各种移动设备。我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。响应式表格让页面内容在移动端和桌面设备上能够很好的适配。响应式表格有两种类型: reflow(回流) 与 列切换。回流表格回流模型表格在屏幕尺寸足够大时是水平显示,而在屏幕尺寸达到足够小时,所有的数据会变成垂直显示。创建表格,在 <table> 元素... 响应式表格响应式设计一般用于适配用户各种移动设备。我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。响应式表格让页面内容在移动端和桌面设备上能够很好的适配。响应式表格有两种类型: reflow(回流) 与 列切换。回流表格回流模型表格在屏幕尺寸足够大时是水平显示,而在屏幕尺寸达到足够小时,所有的数据会变成垂直显示。创建表格,在 <table> 元素...
- 如需创建一个可折叠的内容块,需要为容器添加 data-role="collapsible" 属性。在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记:实例<div data-role="collapsible"><h1>点击我 - 我可以折叠!</h1><p>我是可折叠的内容。</p></div>尝试一下 »默认情况下,内容是被折叠起来的。如需在页面加载... 如需创建一个可折叠的内容块,需要为容器添加 data-role="collapsible" 属性。在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记:实例<div data-role="collapsible"><h1>点击我 - 我可以折叠!</h1><p>我是可折叠的内容。</p></div>尝试一下 »默认情况下,内容是被折叠起来的。如需在页面加载...
- 创建一个弹窗,需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性, <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id, 然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。... 创建一个弹窗,需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性, <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id, 然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。...
- 添加图标到 jQuery Mobile 按钮我们可以使用 ui-icon 类将图标添加到按钮上,并可以使用指定类来设置按钮位置。<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>注意: 在其他方式的按钮上,如列表或表单中的按钮需要使用 data-icon 属性。在接下来的章节中我们会具体介绍... 添加图标到 jQuery Mobile 按钮我们可以使用 ui-icon 类将图标添加到按钮上,并可以使用指定类来设置按钮位置。<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>注意: 在其他方式的按钮上,如列表或表单中的按钮需要使用 data-icon 属性。在接下来的章节中我们会具体介绍...
- Mobile 应用程序是建立在您想要显示的简单的点击事物上。在 jQuery Mobile 中创建按钮在 jQuery Mobile 中,按钮可通过三种方式创建:使用 <button> 元素使用 <input> 元素使用带有 data-role="button" 的 <a> 元素<button><button>按钮</button>尝试一下 »<input><input type="butt... Mobile 应用程序是建立在您想要显示的简单的点击事物上。在 jQuery Mobile 中创建按钮在 jQuery Mobile 中,按钮可通过三种方式创建:使用 <button> 元素使用 <input> 元素使用带有 data-role="button" 的 <a> 元素<button><button>按钮</button>尝试一下 »<input><input type="butt...
- 尽管jQuery Mobile兼容所有的移动设备,但是并不能完全兼容PC机(由于有限的CSS3支持)。为了更好的阅读本教程,建议您使用 Google Chrome 浏览器。实例<body><div data-role="page"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" cl... 尽管jQuery Mobile兼容所有的移动设备,但是并不能完全兼容PC机(由于有限的CSS3支持)。为了更好的阅读本教程,建议您使用 Google Chrome 浏览器。实例<body><div data-role="page"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" cl...
上滑加载中
推荐直播
-
基于开源鸿蒙+海思星闪开发板:嵌入式系统开发实战(Day1)
2025/03/29 周六 09:00-18:00
华为开发者布道师
本次为期两天的课程将深入讲解OpenHarmony操作系统及其与星闪技术的结合应用,涵盖WS63E星闪开发板的详细介绍、“OpenHarmony+星闪”的创新实践、实验环境搭建以及编写首个“Hello World”程序等内容,旨在帮助学员全面掌握相关技术并进行实际操作
回顾中 -
基于开源鸿蒙+海思星闪开发板:嵌入式系统开发实战(Day2)
2025/03/30 周日 09:00-12:00
华为开发者布道师
本次为期两天的课程将深入讲解OpenHarmony操作系统及其与星闪技术的结合应用,涵盖WS63E星闪开发板的详细介绍、“OpenHarmony+星闪”的创新实践、实验环境搭建以及编写首个“Hello World”程序等内容,旨在帮助学员全面掌握相关技术并进行实际操作
回顾中 -
从AI基础到昇腾:大模型初探、DeepSeek解析与昇腾入门
2025/04/02 周三 16:00-17:30
不易 / 华为云学堂技术讲师
昇腾是华为研发的AI芯片,其具有哪些能力?我们如何基于其进行开发?本期直播将从AI以及大模型基础知识开始,介绍人工智能核心概念、昇腾AI基础软硬件平台以及昇腾专区,旨在为零基础或入门级学习者搭建从AI基础知识到昇腾技术的完整学习路径。
回顾中
热门标签