網(wǎng)上有很多關(guān)于pos機(jī)連接線圖標(biāo),jQuery Mobile 教程的知識(shí)，也有很多人為大家解答關(guān)于pos機(jī)連接線圖標(biāo)的問(wèn)題，今天pos機(jī)之家(m.afbey.com)為大家整理了關(guān)于這方面的知識(shí)，讓我們一起來(lái)看下吧!
本文目錄一覽：
pos機(jī)連接線圖標(biāo)
jquery Mobile 教程jQuery Mobile 教程
jQuery Mobile 簡(jiǎn)介
jQuery Mobile
jQuery Mobile 是創(chuàng)建移動(dòng) web 應(yīng)用程序的框架。
jQuery Mobile 適用于所有流行的智能手機(jī)和平板電腦。
jQuery Mobile 使用 HTML5 和 CSS3 通過(guò)盡可能少的腳本對(duì)頁(yè)面進(jìn)行布局。
每章中的 TIY 實(shí)例
通過(guò)我們的在線編輯器，您能夠編輯代碼，然后點(diǎn)擊提交按鈕來(lái)查看結(jié)果。
實(shí)例
<div data-role="page" id="pageone"><div data-role="header"><h1>在此處寫(xiě)入標(biāo)題</h1></div><div data-role="content"><p>在此處寫(xiě)入正文</p></div><div data-role="footer"><h1>在此處寫(xiě)入頁(yè)腳文本</h1></div></div>
請(qǐng)點(diǎn)擊“親自試一試”按鈕來(lái)查看結(jié)果。
jQuery Mobile 安裝jQuery Mobile 簡(jiǎn)介
jQuery Mobile 頁(yè)面
向您的網(wǎng)頁(yè)添加 jQuery Mobile
有多個(gè)辦法可供您在網(wǎng)站上開(kāi)始使用 jQuery Mobile。您可以：
從 CDN 引用 jQuery Mobile（推薦）
從 jQuerymobile.com 下載 jQuery Mobile 庫(kù)
從 CDN 引用 jQuery Mobile
提示：CDN (Content Delivery Network) 用于通過(guò) web 來(lái)分發(fā)常用的文件，以此加快用戶的下載速度。
與 jQuery 類似，無(wú)需在您的計(jì)算機(jī)上安裝任何程序；您只需直接在 HTML 頁(yè)面中引用以下樣式表和 JavaScript 庫(kù)，這樣 jQuery Mobile 就可以工作了：
jQuery Mobile CDN:
<head><link rel="stylesheet" ><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head>
親自試一試
下載 jQuery Mobile
如果您希望在服務(wù)器上存放 jQuery Mobile，您可以從 jQuerymobile.com 下載文件。
<head><link rel=stylesheet href=jquery.mobile-1.3.2.css><script src=jquery.js></script><script src=jquery.mobile-1.3.2.js></script></head>
提示：請(qǐng)將下載的文件放到您希望使用的文件夾中。
提示：您是不是奇怪為什么 <script> 標(biāo)簽中沒(méi)有 type="text/javascript" 屬性？
在 HTML5 中該屬性不是必需的。JavaScript 是 HTML5 以及所有現(xiàn)代瀏覽器中的默認(rèn)腳本語(yǔ)言！
jQuery Mobile 頁(yè)面使用 jQuery Mobile 入門
提示：盡管 jQuery Mobile 適用于所有移動(dòng)設(shè)備，它在臺(tái)式計(jì)算機(jī)上仍然可能存在兼容性問(wèn)題（由于有限的 CSS3 支持）。
因此在本教程中，我們推薦您使用谷歌的 Chrome 瀏覽器，以獲得最好的閱讀體驗(yàn)。
實(shí)例
<body><div data-role="page"><div data-role="header"><h1>歡迎訪問(wèn)我的主頁(yè)</h1></div><div data-role="content"><p>我是一名移動(dòng)開(kāi)發(fā)者！</p></div><div data-role="footer"><h1>頁(yè)腳文本</h1></div></div></body>
親自試一試
例子解釋：
data-role="page" 是顯示在瀏覽器中的頁(yè)面
data-role="header" 創(chuàng)建頁(yè)面上方的工具欄（常用于標(biāo)題和搜索按鈕）
data-role="content" 定義頁(yè)面的內(nèi)容，比如文本、圖像、表單和按鈕，等等
data-role="footer" 創(chuàng)建頁(yè)面底部的工具欄
在這些容器中，您可以添加任意 HTML 元素 - 段落、圖像、標(biāo)題、列表等等。
提示：HTML5 data-* 屬性用于通過(guò) jQuery Mobile 為移動(dòng)設(shè)備創(chuàng)建“對(duì)觸控友好的”交互外觀。
在 jQuery Mobile 中添加頁(yè)面
在 jQuery Mobile，您可以在單一 HTML 文件中創(chuàng)建多個(gè)頁(yè)面。
請(qǐng)通過(guò)唯一的 id 來(lái)分隔每張頁(yè)面，并使用 href 屬性來(lái)連接彼此：
實(shí)例
<div data-role="page" id="pageone"><div data-role="content"><a href="#pagetwo">轉(zhuǎn)到頁(yè)面二</a></div></div><div data-role="page" id="pagetwo"><div data-role="content"><a href="#pageone">轉(zhuǎn)到頁(yè)面一</a></div></div>
親自試一試
注釋：包含大量?jī)?nèi)容的 web 應(yīng)用程序會(huì)影響加載時(shí)間（比如文本、鏈接、圖像和腳本等等）。如果您不希望在內(nèi)部鏈接頁(yè)面，請(qǐng)使用外部文件：
<a href="externalfile.html">轉(zhuǎn)到外部頁(yè)面</a>
將頁(yè)面用作對(duì)話框
對(duì)話框是用來(lái)顯示信息或請(qǐng)求輸入的視窗類型。
如需在用戶點(diǎn)擊（輕觸）鏈接時(shí)創(chuàng)建一個(gè)對(duì)話框，請(qǐng)向該鏈接添加 data-rel="dialog"：
實(shí)例
<div data-role="page" id="pageone"><div data-role="content"><a href="#pagetwo" data-rel="dialog">轉(zhuǎn)到頁(yè)面二</a></div></div><div data-role="page" id="pagetwo"><div data-role="content"><a href="#pageone">轉(zhuǎn)到頁(yè)面一</a></div></div>jQuery Mobile 過(guò)渡
jQuery Mobile 頁(yè)面
jQuery Mobile 按鈕
jQuery Mobile 包含了允許您選擇頁(yè)面打開(kāi)方式的 CSS 效果。
jQuery Mobile 過(guò)渡效果
jQuery Mobile 擁有一系列關(guān)于如何從一頁(yè)過(guò)渡到下一頁(yè)的效果。
注釋：如需實(shí)現(xiàn)過(guò)渡效果，瀏覽器必須支持 CSS3 3D 轉(zhuǎn)換：
瀏覽器支持
Internet Explorer 10 支持 3D 轉(zhuǎn)換（更早的版本不支持）
Opera 仍然不支持 3D 轉(zhuǎn)換
過(guò)渡效果可應(yīng)用于任意鏈接或通過(guò)使用 data-transition 屬性進(jìn)行的表單提交：
<a href="#anylink" data-transition="slide">滑動(dòng)到頁(yè)面二</a>
下面的表格展示了可與 data-transition 屬性一同使用的可用過(guò)渡：
過(guò)渡描述測(cè)試fade默認(rèn)。淡入淡出到下一頁(yè)。測(cè)試flip從后向前翻動(dòng)到下一頁(yè)。測(cè)試flow拋出當(dāng)前頁(yè)面，引入下一頁(yè)。測(cè)試pop像彈出窗口那樣轉(zhuǎn)到下一頁(yè)。測(cè)試slide從右向左滑動(dòng)到下一頁(yè)。測(cè)試slidefade從右向左滑動(dòng)并淡入到下一頁(yè)。測(cè)試slideup從下到上滑動(dòng)到下一頁(yè)。測(cè)試slidedown從上到下滑動(dòng)到下一頁(yè)。測(cè)試turn轉(zhuǎn)向下一頁(yè)。測(cè)試none無(wú)過(guò)渡效果。測(cè)試提示：在 jQuery Mobile 中，淡入淡出效果在所有鏈接上都是默認(rèn)的（如果瀏覽器支持）。
提示：以上所有效果同時(shí)支持反向動(dòng)作，例如，如果您希望頁(yè)面從左向右滑動(dòng)，而不是從右向左，請(qǐng)使用值為 "reverse" 的 data-direction 屬性。在后退按鈕上是默認(rèn)的。
實(shí)例
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑動(dòng)</a>jQuery Mobile 按鈕
jQuery Mobile 過(guò)渡
jQuery Mobile 圖標(biāo)
移動(dòng)應(yīng)用程序構(gòu)建于觸控操作的便利性之上。
在 jQuery Mobile 中創(chuàng)建按鈕
jQuery Mobile 中的按鈕可通過(guò)三種方法創(chuàng)建：
使用 <button> 元素
使用 <input> 元素
使用 data-role="button" 的 <a> 元素
<button>
<button>按鈕</button>
親自試一試
<input>
<input type="button" value="按鈕">
親自試一試
<a>
<a href="#" data-role="button">按鈕</a>
親自試一試
提示：jQuery Mobile 中的按鈕會(huì)自動(dòng)獲得樣式，這增強(qiáng)了他們?cè)谝苿?dòng)設(shè)備上的交互性和可用性。我們推薦您使用 data-role="button" 的 <a> 元素來(lái)創(chuàng)建頁(yè)面之間的鏈接，而 <input> 或 <button> 元素用于表單提交。
導(dǎo)航按鈕
如需通過(guò)按鈕來(lái)鏈接頁(yè)面，請(qǐng)使用 data-role="button" 的 <a> 元素：
實(shí)例
<a href="#pagetwo" data-role="button">轉(zhuǎn)到頁(yè)面二</a>
親自試一試
行內(nèi)按鈕
默認(rèn)情況下，按鈕會(huì)占據(jù)屏幕的全部寬度。如果您需要按鈕適應(yīng)其內(nèi)容，或者如果您需要兩個(gè)或多個(gè)按鈕并排顯示，請(qǐng)?zhí)砑?data-inline="true"：
實(shí)例
<a href="#pagetwo" data-role="button" data-inline="true">轉(zhuǎn)到頁(yè)面二</a>
親自試一試
組合按鈕
jQuery Mobile 提供了對(duì)按鈕進(jìn)行組合的簡(jiǎn)單方法。
請(qǐng)將 data-role="controlgroup" 屬性與 data-type="horizontal|vertical" 一同使用，以規(guī)定水平或垂直地組合按鈕：
實(shí)例
<div data-role="controlgroup" data-type="horizontal"><a href="#anylink" data-role="button">按鈕 1</a><a href="#anylink" data-role="button">按鈕 2</a><a href="#anylink" data-role="button">按鈕 3</a></div>
親自試一試
提示：默認(rèn)情況下，組合按鈕是垂直分組的，彼此間沒(méi)有外邊距和空白。并且只有第一個(gè)和最后一個(gè)按鈕擁有圓角，在組合后就創(chuàng)造出了漂亮的外觀。
后退按鈕
如需創(chuàng)建后退按鈕，請(qǐng)使用 data-rel="back" 屬性（會(huì)忽略錨的 href 值）：
實(shí)例
<a href="#" data-role="button" data-rel="back">返回</a>
親自試一試
更多用于按鈕的 data-* 屬性
屬性值描述實(shí)例data-cornerstrue | false規(guī)定按鈕是否有圓角。測(cè)試data-minitrue | false規(guī)定是否是小型按鈕。測(cè)試data-shadowtrue | false規(guī)定按鈕是否有陰影。測(cè)試如需有關(guān) jQuery Mobile data-* 屬性的完整信息，請(qǐng)?jiān)L問(wèn)我們的 jQuery Mobile Data 屬性參考手冊(cè)。
下一節(jié)演示如何為按鈕添加圖標(biāo)。
jQuery Mobile 按鈕圖標(biāo)jQuery Mobile 按鈕
jQuery Mobile 工具欄
jQuery Mobile 提供的一套圖標(biāo)可令您的按鈕更具吸引力。
為 jQuery Mobile 按鈕添加圖標(biāo)
如需向您的按鈕添加圖標(biāo)，請(qǐng)使用 data-icon 屬性：
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 屬性。
下面我們列出了 jQuery Mobile 提供的一些可用圖標(biāo)：
屬性值描述圖標(biāo)實(shí)例data-icon="arrow-l"左箭頭測(cè)試data-icon="arrow-r"右箭頭測(cè)試data-icon="delete"刪除測(cè)試data-icon="info"信息測(cè)試data-icon="home"首頁(yè)測(cè)試data-icon="back"返回測(cè)試data-icon="search"搜索測(cè)試data-icon="grid"網(wǎng)格測(cè)試如需關(guān)于 jQuery Mobile 按鈕圖標(biāo)的完整信息，請(qǐng)?jiān)L問(wèn)我們的 jQuery Mobile 圖標(biāo)參考手冊(cè)。
定位圖標(biāo)
您也能夠規(guī)定圖標(biāo)被放置的位置：上、右、下或左。
請(qǐng)使用 data-iconpos 屬性來(lái)規(guī)定位置：
圖標(biāo)位置：
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a><a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a><a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a><a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
親自試一試
提示：默認(rèn)地，所有按鈕中的圖標(biāo)靠左放置。
只顯示圖標(biāo)
如果只需顯示圖標(biāo)，請(qǐng)將 data-iconpos 設(shè)置為 "notext"：
Back:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
以上就是關(guān)于pos機(jī)連接線圖標(biāo),jQuery Mobile 教程的知識(shí)，后面我們會(huì)繼續(xù)為大家整理關(guān)于pos機(jī)連接線圖標(biāo)的知識(shí)，希望能夠幫助到大家！
