jQueryのモバイルデータプロパティ2024 年の最新の入門チュートリアル。このコースでは jQueryのデータプロパティ,プッシュボタン,チェックボックス,折りたたみブロック,折り畳み式のコレクション,コンテンツ,対照群,ダイアログ,増加,ドメインコンテナ,ドッキングされたツールバー,トグルスイッチをフリップ,テールバー,ヘッドバー,リンク,リスト,リストアイテム,ナビゲーションバー,ページ,ポップ,ラジオボタン,選択します,スライダー,テキスト入力ボックス＆テキスト入力フィールド, について学習できます。

jQueryのモバイルデータプロパティ

jQueryのデータプロパティ

使用してjQueryのモバイルHTML5データーは*属性のモバイルデバイスのためのより多くのタッチフレンドリーな外観と名所を作成します。

以下のリストの参照値は 、 太字でデフォルト値です 。

---

プッシュボタン

バージョン1.4の後廃止されました。 使用するCSSクラスを代わりに。 のデータ役割= "ボタン"とハイパーリンク。 ボタン要素のツールバーリンクおよび入力フィールドが自動的にボタンのスタイルをレンダリングします、あなたは、データ役割= "ボタン"を追加する必要はありません。

Data-属性	值	描述
data-corners	true | false	规定按钮是否圆角
data-icon	图标参考手册	规定按钮的图标。默认没有图标。
data-iconpos	left | right | top | bottom | notext	规定图标的位置
data-iconshadow	true | false	规定按钮图标是否有阴影
data-inline	true | false	规定按钮是否内联
data-mini	true | false	规定按钮是小尺寸还是常规尺寸
data-shadow	true | false	规定按钮是否有阴影
data-theme	字母 (a-z)	规定按钮的主题颜色

	ボタンの水平または垂直の組み合わせかどうかを指定するためのコンテナ|複数のボタンの組み合わせについては、データ-役割「垂直水平」で= "controlgroup"とデータ型=属性を使用します。

---

チェックボックス

ラベルと入力タイプの= "チェックボックス"のペアを持ちます。 彼らは、自動的にデータ-役割が必要とされていない、プロセスのボタンのスタイルをレンダリングしています。

Data-属性	值	描述
data-mini	true | false	规定复选框是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 把复选框渲染成按钮样式
data-theme	字母 (a-z)	规定复选框的主题颜色

	水平または垂直の組み合わせのチェックボックスかどうかを指定するための容器|複数のチェックボックスを結合するには、= "controlgroup"とデータ役割「垂直水平」とのデータ型=属性を使用します。

---

折りたたみブロック

データ・ロールを持つ任意のHTMLに続いて、容器の内部には= "折りたたみ式" title要素をマーク。

Data-属性	值	描述
data-collapsed	true | false	规定内容是折叠还是展开
data-collapsed-icon	图标参考手册	规定可折叠按钮的图标。默认是 "plus"
data-content-theme	字母 (a-z)	规定可折叠内容的主题颜色。是否为可折叠内容添加圆角
data-expanded-icon	图标参考手册	规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos	left | right | top | bottom	规定图标的位置
data-inset	true | false	规定可折叠按钮是否渲染成圆角且带外边距
data-mini	true | false	规定可折叠按钮是小尺寸还是常规尺寸
data-theme	字母 (a-z)	规定可折叠按钮的主题颜色

---

折り畳み式のコレクション

データ-役割= "折りたたみ可能なセットと、容器の内部には「折りたたみ可能なコンテンツブロックの。

Data-属性	值	描述
data-collapsed-icon	图标参考手册	规定可折叠按钮的图标。默认是 "plus"
data-content-theme	字母 (a-z)	规定可折叠按钮的主题颜色
data-expanded-icon	图标参考手册	规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos	left | right | top | bottom | notext	规定图标的位置
data-inset	true | false	规定可折叠块是否渲染成圆角且带外边距
data-mini	true | false	规定可折叠按钮是小尺寸还是常规尺寸
data-theme	字母 (a-z)	规定可折叠集合的主题颜色

---

コンテンツ

バージョン1.5はもはやサポートされた後に1.4バージョンでは放棄されていません。 コンテナのデータ役割= "コンテンツ"を使用。

データ - プロパティ	値	説明
データ-テーマ	文字 （AZ）	カラーコンテンツに関する規定。

---

対照群

データ-役割= "controlgroup"の<div>や<フィールドセット>コンテナと。 入力ボタンスタイルの複数の単一タイプ（リンクベースボタン、ラジオボタン、チェックボックス、選択要素）の組合せ。 組み合わせは、チェックボックスやラジオボタンを形成するために、我々はスタイルを改善するために、内側の<div>タグ "fieldcontain」=データ役割に容器に<フィールドセット>をお勧めします。

Data-属性	值	描述
data-mini	true | false	规定控件组是小尺寸还是常规尺寸
data-type	horizontal | vertical	规定控件组是水平显示还是垂直显示

---

ダイアログ

コンテナまたはデータ役割を持つデータのrel = "ダイアログ"リンクで= "ダイアログは"です。

Data-属性	值	描述
data-close-btn-text	sometext	规定对话框关闭按钮的文本
data-dom-cache	true | false	规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试）
data-overlay-theme	字母 (a-z)	规定对话框页面的蒙版（背景）颜色
data-theme	字母 (a-z)	规定对话框页面的主题颜色
data-title	sometext	规定对话框页面的标题

---

増加

=「偽」 またはデータのajax = "false"のコンテナデータ高めると。

Data-属性	值	描述
data-enhance	true | false	如果设置为 "true"（默认），jQuery Mobile 会自动渲染页面，使其更适合于移动设备。如果设置为 "false"，框架将不会渲染页面
data-ajax	true | false	规定是否通过 ajax 加载页面

注：= "false"のデータ高める $ .mobile.ignoreContentEnabledされなければならない=真"のjQuery Mobileは自動的にページをレンダリング防止するために一緒に使用。

$ trueに設定され.mobile.ignoreContentEnabledすると、コンテナ内のデータのajax = "false"のいずれかのリンクやフォーム要素は、ナビゲーションフレームワークを無視されます。

---

ドメインコンテナ

バージョン1.4は、バージョン1.5がサポートされなくなった後、クラス=使用しないでしょう放棄された「UI-fieldcontain代替を。」 とラベル/フォーム要素のペアとデータ-役割= "fieldcontain"コンテナに包まれました。

---

ドッキングされたツールバー

データ-役割= "ヘッダー" またはデータ役割= "フッター"、およびデータ位置で=コンテナのプロパティで「固定」。

Data-属性	值	描述
data-disable-page-zoom	true | false	规定用户是否能缩放页面
data-fullscreen	true | false	规定工具栏是否一直固定在顶部或底部
data-tap-toggle	true | false	规定用户是否能够通过点击改变工具栏的可见性
data-transition	slide | fade | none	规定当点击发生时的切换效果
data-update-page-padding	true | false	规定页面顶部和底部的内边距是否在 resize、transition 和 "updatelayout" 事件发生时更新（jQuery Mobile 在 "pageshow" 事件发生时总是更新内边距）
data-visible-on-page-show	true | false	规定当父页面显示时工具栏的可见性

---

トグルスイッチをフリップ

2 <オプション>要素と<select>要素を持つデータ-役割= "スライダー"。

Data-属性	值	描述
data-mini	true | false	规定开关是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 把拨动开关渲染成按钮样式
data-theme	字母 (a-z)	规定拨动开关的主题颜色
data-track-theme	字母 (a-z)	规定轨道的主题颜色

---

テールバー

データ-役割= "フッター"コンテナと。

Data-属性	值	描述
data-id	sometext	规定唯一 ID。对于持续的尾部栏是必需的
data-position	inline | fixed	规定尾部栏是与页面内容内联还是保持固定在底部
data-fullscreen	true | false	规定尾部栏是固定在底部还是覆盖在页面内容上（查看范围更大）
data-theme	字母 (a-z)	规定尾部栏的主题颜色。默认是 "a"

フルスクリーンの位置を有効にするには、データ位置を使用する=「固定」し、その要素にデータフルスクリーンの属性を追加します 。 注意してください 。

---

ヘッドバー

データ-役割=と、容器の「ヘッダ」。

Data-属性	值	描述
data-id	sometext	规定唯一 ID。对于持续的头部栏是必需的
data-position	inline | fixed	规定头部栏是与页面内容内联还是保持固定在顶部
data-fullscreen	true | false	规定头部栏是固定在顶部还是覆盖在页面内容上（查看范围更大）
data-theme	字母 (a-z)	规定头部栏的主题颜色。默认是 "a"

フルスクリーンの位置を有効にするには、データ位置を使用する=「固定」し、その要素にデータフルスクリーンの属性を追加します 。 注意してください 。

---

リンク

データ-役割とそれらのリンクやフォームを含むすべてのリンクは、= "ボタン"ボタンを提出します。

Data-属性	值	描述
data-ajax	true | false	规定是否通过 ajax 加载页面来提高用户体验和交互。如果设置为 false，jQuery Mobile 将会执行一个正常的页面请求。
data-direction	reverse	反向转换动画（仅用于页面和对话框）
data-dom-cache	true | false	规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试）
data-prefetch	true | false	规定是否预先读取页面到 DOM 中，以便当用户访问它们时可用
data-rel	back | dialog | external | popup	规定链接行为的选项。Back - 回退到历史记录中的前一个页面。Dialog - 以对话框形式打开链接，不保存到历史记录中。External - 用于链接到另一个域。Popup - 打开一个弹出窗口。
data-transition	fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none	规定一个页面切换到下一个页面的效果。请查看我们的 jQuery Mobile 页面切换章节。
data-position-to	origin | jQuery selector | window	规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。

---

リスト

<OL>または<UL>のデータ役割= "リストビュー"と。

Data-属性	值	描述
data-autodividers	true | false	规定是否自动划分列表项
data-count-theme	字母 (a-z)	规定计数气泡的主题颜色。
data-divider-theme	字母 (a-z)	规定列表分隔的主题颜色。
data-filter	true | false	规定是否在列表中添加搜索框
data-filter-placeholder	sometext	1.4 版本后废弃。使用 HTML placeholder 属性替代。规定搜索框内的文本。默认是 "Filter itemsja."
data-filter-theme	字母 (a-z)	规定搜索过滤的主题颜色。
data-icon	图标参考手册	规定列表的图标
data-inset	true | false	规定列表是否渲染成圆角且带外边距
data-split-icon	图标参考手册	规定分割按钮的图表。默认是 "arrow-r"
data-split-theme	字母 (a-z)	规定分割按钮的主题颜色。
data-theme	字母 (a-z)	规定列表的主题颜色

---

リストアイテム

<LI>内の<オール>または<UL>のデータ役割= "リストビュー"と。

Data-属性	值	描述
data-filtertext	sometext	规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本
data-icon	图标参考手册	规定列表项图标
data-role	list-divider	规定列表项的分隔
data-theme	字母 (a-z)	规定列表项的主题颜色

注：データ-icon属性は、リンクのみでリスト項目に影響を与えます。

---

ナビゲーションバー

内部データ-役割= "ナビゲーションバー"コンテナ<LI>要素を持ちます。

Data-属性	值	描述
data-icon	图标参考手册	规定列表项的图标
data-iconpos	left | right | top | bottom | notext	规定图标的位置

	サンプル・トピックのナビゲーションバーは、親から継承されました。 ナビゲーションバーの設定データ・テーマ属性は不可能です。 データ・テーマ属性は、ナビゲーションバーのリンクごとに個別に設定することができます。

---

ページ

とコンテナのデータ-役割= "ページ"。

Data-属性	值	描述
data-add-back-btn	true | false	自动添加后退按钮，仅限头部栏
data-back-btn-text	sometext	规定后退按钮的一些文本
data-back-btn-theme	字母 (a-z)	规定后退按钮的主题颜色
data-close-btn-text	字母 (a-z)	规定对话框上关闭按钮的一些文本
data-dom-cache	true | false	规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试）
data-overlay-theme	字母 (a-z)	规定对话框页面的蒙版（背景）颜色
data-theme	字母 (a-z)	规定页面的主题颜色。
data-title	sometext	规定页面标题
data-url	url	更新 URL 的值，而不是用于请求页面的 URL

---

ポップ

データ-役割= "ポップアップ"コンテナを持ちます。

Data-属性	值	描述
data-corners	true | false	规定弹窗是否圆角
data-overlay-theme	字母 (a-z)	规定弹出框的蒙版（背景）颜色。默认是透明背景（无）
data-shadow	true | false	规定弹出框是否有阴影
data-theme	字母 (a-z)	规定弹出框的主题颜色。默认是继承的，"none" 设置弹窗为透明的
data-tolerance	30, 15, 30, 15	规定窗口边缘（上 top、右 right、下 bottom、左 left）的距离

データのrel = "ポップアップ"アンカーを持ちます：

Data-属性	值	描述
data-position-to	origin | jQuery selector | window	>规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。
data-rel	popup	用于打开弹出框
data-transition	fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none	规定一个页面切换到下一个页面的效果。请查看我们的 jQuery Mobile 页面切换章节。

---

ラジオボタン

ラベルと入力タイプのペアで= "ラジオ"です。 彼らは、自動的にデータ-役割が必要とされていない、プロセスのボタンのスタイルをレンダリングしています。

Data-属性	值	描述
data-mini	true | false	规定按钮是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮，使元素以 HTML 原生的状态显示
data-theme	字母 (a-z)	规定单选按钮的主题颜色

	ラジオボタンの水平または垂直の組み合わせかどうかを指定するためのコンテナ|複数のラジオボタンを結合するには、= "controlgroup"とデータ役割「垂直水平」とのデータ型=属性を使用します。

---

選択します

すべての要素を<選択>。 これらは自動的にボタンのスタイルレンダリングされ、日付の役割は必要ありません。

Data-属性	值	描述
data-icon	图标参考手册	规定 select 元素的图标。默认是 "arrow-d"
data-iconpos	left | right | top | bottom | notext	规定图标的位置
data-inline	true | false	规定 select 元素是否内联
data-mini	true | false	规定 select 元素是小尺寸还是常规尺寸
data-native-menu	true | false	当设置为 false 时，它使用 jQuery 自带的自定义的选择菜单（如果您想要让选择菜单在所有的移动设备上都显示相同，则推荐这么使用）
data-overlay-theme	字母 (a-z)	规定 jQuery 自带的自定义的选择菜单的主题颜色（与 data-native-menu="false" 一起使用）
data-placeholder	true | false	可在一个非原生的选择菜单的 <option> 元素上设置
data-role	none	防止 jQuery Mobile 把 select 元素渲染成按钮样式
data-theme	字母 (a-z)	规定 select 元素的主题颜色

	選択要素の水平または垂直の組み合わせかどうかを指定するためのコンテナ|複数の要素の組み合わせを選択するには、= "controlgroup"とデータ役割「垂直水平」とのデータ型=属性を使用します。

---

スライダー

タイプ=「範囲」入力ボックスを持ちます。 これらは自動的にボタンのスタイルレンダリングされ、日付の役割は必要ありません。

Data-属性	值	描述
data-highlight	true | false	规定滑动轨道是否高亮突出显示
data-mini	true | false	规定滑动块是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 渲染滑动块控件为按钮样式
data-theme	字母 (a-z)	规定滑动块控件（输入框、手柄和轨道）的主题颜色
data-track-theme	字母 (a-z)	规定滑动块轨道的主题颜色

---

テキスト入力ボックス＆テキスト入力フィールド

タイプでは= "テキスト|検索|。その他、各種」入力やtextarea要素。 これらは自動的にボタンのスタイルレンダリングされ、日付の役割は必要ありません。

Data-属性	值	描述
data-mini	true | false	规定输入框是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 把输入框/输入域渲染成按钮样式
data-theme	字母 (a-z)	规定输入字段的主题颜色