建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
jquery判斷移動(dòng)端問(wèn)題
if?((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows?Phone|Phone)/i)))?{
專(zhuān)注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)維西免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
手機(jī)端顯示的代碼
}else{
非手機(jī)端要顯示的代碼
}
jquery怎么實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)事件?
一、原理及實(shí)現(xiàn)方法如下：
1、當(dāng)開(kāi)始一個(gè)touchstart事件的時(shí)候，獲取此刻手指的橫坐標(biāo)startX和縱坐標(biāo)startY；
2、當(dāng)觸發(fā)touchmove事件時(shí)，在獲取此時(shí)手指的橫坐標(biāo)moveEndX和縱坐標(biāo)moveEndY;最后，通過(guò)這兩次獲取的坐標(biāo)差值來(lái)判斷手指在手機(jī)屏幕上的滑動(dòng)方向。
二、注意：
手指在滑動(dòng)整個(gè)屏幕時(shí)，會(huì)影響瀏覽器的行為，比如滾動(dòng)和縮放。所以在調(diào)用touch事件時(shí)，要注意禁止縮放和滾動(dòng)。
1.禁止縮放?
通過(guò)meta元標(biāo)簽來(lái)設(shè)置。
2.禁止?jié)L動(dòng)?
preventDefault是阻止默認(rèn)行為，touch事件的默認(rèn)行為就是滾動(dòng)。?
event.preventDefault()。
怎么使用JQuery Mobile開(kāi)發(fā)移動(dòng)網(wǎng)站
方法/步驟
簡(jiǎn)單的說(shuō)明一下JQueryMobile. 它是一個(gè)很好的跨平臺(tái)的移動(dòng)端網(wǎng)站開(kāi)發(fā)框架。 是一個(gè)前臺(tái)的框架。現(xiàn)在要使用這個(gè)框架組一個(gè)界面，這個(gè)界面很簡(jiǎn)單， 但是麻雀雖小五臟俱全， 然后模板實(shí)現(xiàn)， 知識(shí)講解完畢。html要使用HTML5的標(biāo)準(zhǔn)來(lái)寫(xiě)， 因?yàn)镴QueryMobile是基于HTML5的。 書(shū)寫(xiě)html5的格式如圖，
既然使用JQueryMobile就要有這個(gè)框架， 這里可以使用本地引用的方式， 和網(wǎng)上引用， 也叫做cdn引用。就是比較穩(wěn)定和快速的引用外部文件的一種方式。 這里使用cdn的方式， 這樣只要可以上網(wǎng)就可以使用該框架。
在寫(xiě)移動(dòng)端的網(wǎng)站的時(shí)候， 一定要寫(xiě)一個(gè)meta的name為viewport的屬性， 因?yàn)樵搶傩源碇W(wǎng)站頁(yè)面的自適應(yīng)。簡(jiǎn)單的寫(xiě)法為：meta name="viewport" content="width=device-width, initial-scale=1" 代表著網(wǎng)站為驅(qū)動(dòng)設(shè)備的寬度。
然后加入框架之后， 寫(xiě)一個(gè)簡(jiǎn)單的界面。 這里面JQueryMobile大量的使用了一個(gè)data-的屬性， 這里使用最多的事data-role。 代表著他默認(rèn)的樣式規(guī)則。 就是提前定義好了很多的樣式來(lái)供你使用。 常用的page. 代表著頁(yè)面， listview， 代表著一個(gè)列表視圖。下面是代碼和效果圖
稍微說(shuō)明一下。
data-role="page" 是代表著一個(gè)頁(yè)面可以看做該內(nèi)容下是一個(gè)頁(yè)面顯示的內(nèi)容
data-role=”header"代表著 頁(yè)面的頁(yè)頭， 就是頁(yè)面的最上面顯示的內(nèi)容這里需要注意， 里面要加上子標(biāo)簽內(nèi)容， 要不然， 就不會(huì)居中顯示內(nèi)容了。推薦使用h1.
data-role="footer"代表著頁(yè)腳的內(nèi)容。 也是網(wǎng)站的一個(gè)說(shuō)明信息。 或者是一個(gè)底部導(dǎo)航菜單。 還有一部分， 就是data-role="content" 是代表著頁(yè)面內(nèi)容部分， 主要的內(nèi)容在這里面顯示。
這3個(gè)部分構(gòu)成了一個(gè)簡(jiǎn)單的頁(yè)面。 所以， 現(xiàn)在可以體驗(yàn)到它的強(qiáng)大， 不用寫(xiě)太多的代碼一個(gè)簡(jiǎn)單的框架就好了， 下面繼續(xù)增加一個(gè)listveiw的列表視圖。
完成列表視圖的代碼， 增加一個(gè)文章列舉表的代碼， 這里列表是使用data-role="listview" 來(lái)修飾樣式。 然后這里只需要加上data-role="listview" 你發(fā)現(xiàn)想要的list效果就實(shí)現(xiàn)了。 這樣我們一個(gè)簡(jiǎn)單的頁(yè)面效果就實(shí)現(xiàn)了。
當(dāng)前文章：jquery移動(dòng)端,jquery移動(dòng)端懸浮球貼邊拖拽
標(biāo)題路徑：http://www.dlmjj.cn/article/hodsio.html
