2011-12-27 41 views
56

我正在開發一個具有自己外觀和感覺的Web應用程序。我只想使用jQuery Mobile進行觸摸事件支持。如何僅將jQuery Mobile用於其觸摸事件支持(無UI增強)?

當我鏈接jquery.mobile.min.js(不鏈接css)時,我的頁面佈局被打破。

如何配置(初始化)jQuery Mobile只使用觸摸事件支持?我是否會綁定jQuery文檔就緒鉤子中的事件,因爲我沒有任何與JQM頁面相關的事件?

編輯

見這個例子中的jsfiddle:http://jsfiddle.net/redhotsly/JGgrw/。該html包含<button>,但jQuery Mobile在其左側創建了一個<span>。如果您檢查結果標記(F12),您將看到jQuery Mobile還爲我的按鈕添加了一個CSS類。

編輯:

我需要一個解決方案,我沒有修改JQM腳本。我需要使用CDN的官方腳本。

回答

49

如果你只是想綁定到觸摸/手勢事件我會使用jGestures而不是:

http://jgestures.codeplex.com/

尼斯小jQuery插件,我已經在項目中使用前,用大範圍的事件綁定到:

可用事件:

orientationchange該設備順時針或逆時針轉動。此事件由設備觸發,並可能使用內部陀螺儀 。

的捏合姿態時被觸發(兩個手指從或朝向彼此移動的距離)。

rotate在旋轉手勢期間觸發(兩個手指順時針或逆時針旋轉)。

swipemove輕掃移動手勢期間被觸發((多個)手指正在移動的裝置周圍,例如拖動)

swipeone是具有一個接觸點輕掃移動手勢後觸發(一個手指是移動的圍繞裝置)

swipetwo是具有兩個接觸點輕掃移動手勢後觸發(兩個手指分別在設備周圍移動)

swipethree是一個有三個接觸點輕掃移動手勢後觸發(三個手指分別在設備周圍移動)

swipefour是一個具有四個接觸點輕掃移動手勢後觸發(四個指分別在設備周圍移動)

後嚴向上輕掃移動手勢

swipeup被觸發

swiperightup是一個向右向上輕掃移動手勢後觸發

swiperight是有嚴格向右輕掃移動手勢

swiperightdown是鑽機* htwards和向下輕掃移動手勢

swipedown是有嚴格的向下後觸發後觸發後觸發刷招手勢

swipeleftdown在向左和向下滑動移動gestu後觸發再

swipeleft是有嚴格向左輕掃移動手勢

swipeleftup是一個向左,向上輕掃移動手勢

tapone是單(一個手指)後觸發後觸發後觸發點擊手勢

taptwo雙擊(雙指)輕敲手勢後觸發

tapthree是一個特里普爾(三個手指)輕叩手勢

pinchopen被觸發後觸發時一個pinchopen手勢(兩個手指移動遠離彼此)發生和接觸點(指)是 除去裝置。

pinchclose當pinchclose手勢(兩個手指朝向彼此移動)發生和接觸點(指)是 除去裝置被觸發。

rotatecw當順時針旋轉手勢(兩根手指順時針旋轉)發生並且接觸點(手指)已移除設備時觸發。

rotateccw當逆時針旋轉手勢(兩個手指的逆時針轉動)發生被觸發,並且接觸點 (手指)被除去的裝置。

+3

它看起來像我的問題的答案是「這是不可能的,使用另一個庫」_。這就是我要做的。謝謝。 – Sylvain 2012-02-16 20:07:02

+0

這不適用於觸摸筆記本電腦或觸摸平板電腦與1080p顯示器......奇怪:( – Sijav 2015-03-18 02:53:17

+0

@Sijav可能值得向jgestures傢伙報告:) – 2015-03-19 14:55:15

13

JQM現在去耦:

小工具:現在去耦靈活構建

我們想從網頁插件脫鉤我們所有的部件對於 現在很長時間,我們很高興地宣佈,我們終於降落了這個 更改。那麼究竟是什麼意思呢?那麼, 個別小部件和實用程序總是被分解成 單獨的腳本文件。但是,頁面插件負責處理 在創建頁面時自動初始化所​​有官方插件 中的標記。這種情況使得 不可能在不會導致錯誤的情況下移除插件,並且通常 爲將來的小部件添加設置了一個不好的先例。

現在,幾乎所有jQuery Mobile庫中的UI小部件都完全解耦,因此如果 特定項目不需要,它們可以簡單地刪除。除了少數必需的核心文件外,此更改還允許您通過僅包含特定的小組件或 功能來顯着減少庫的大小。 雖然我們仍然打算做更多的去耦和清理,下面 文件現在脫鉤,並能安全地從make文件 你做一個自定義生成之前被刪除:

  • 頁的頁眉/內容/頁腳
  • 可摺疊
  • controlgroup
  • fieldcontain
  • fixheaderfooter
  • 按鈕
  • checkboxradio
  • 選擇
  • 滑塊
  • 的TextInput
  • 鏈接主題化
  • 列表視圖
  • 導航欄
  • 電網

我們會依賴地圖上工作,因爲一些小部件依賴在別人的 上工作。例如,按鈕標記插件被上面的小部件的許多 調用,所以它只能被排除,但如果你不使用任何依賴於按鈕的小部件。

我們仍在制定我們的建議,以便將插件 依賴關係進行映射並進一步解耦。最終,這將 出現在下載構建工具中,敬請期待!

您可以前往自己的GIT回購,只需下載你想要什麼:

+0

謝謝,但我不想採取個別腳本文件的副本。我想鏈接到CDN上的官方jquery移動腳本。 – Sylvain 2012-01-20 21:48:17

+1

我不認爲他們會釋放CDN上的解耦庫,也許jQM 1.1將有這個選項,計劃在2月中下旬發佈。 – 2012-01-21 01:30:08

+0

可能,但即使如此,我也很想知道如何初始化JQM,使其不會更改UI。 – Sylvain 2012-01-21 03:59:35

2

照顧這個特殊的問題,在初始時間幾乎是不可能的,最好的辦法是使用你不想默認樣式就這樣發生的UI元素的數據角色=「無」:

<button type="button" data-role="none">Click Me!</button>​​​​​​​​​ 

http://jsfiddle.net/JGgrw/13/

+0

我明白了。爲了將其應用到我的網站,我必須在包含JQM的'

46

如果你想使用jQuery移動的觸摸事件只,之前添加此腳本的加載了jQuery移動圖書館:

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend( $.mobile , {autoInitializePage: false})});</script> 

這可以防止jQuery Mobile的從初始化頁面和觸摸DOM ,從而只留下你的佈局。

+1

嗨eivers。這對我很有幫助,但我仍然感到沮喪,因爲我的網站嚴重依賴onhashchange進行導航,並且jQuery mobile將#更改爲/。你可能包含一個http://stackoverflow.com/a/8159996/3917091的鏈接,建議增加'$ .mobile.pushStateEnabled = false;',因爲它仍然在mobileinit上。 – 2015-02-01 00:06:08

+1

非常好的答案,有助於加載只有jQuery的移動標準事件。 – Sijav 2015-03-18 02:54:20

5

另一個新選擇是jQuery-Mobile-Events,我一直在這個問題掙扎,只覺得這個插件非常有用。

從jQuery Mobile的下載生成器定製生成不適合我。並且jGestures沒有我需要的taphold事件。

相關問題