JqueryMobile實踐點滴

時間 2019-12-01

原文原文鏈接

最近在用JqueryMobile寫點東西，就遇到的一些小問題加以記錄，也但願能幫到遇到相同問題的朋友。

一、動態改變圖標data-icon，這個只是改變data-icon屬性是不行的，之因此會有圖標是由於jquery mobile把渲染後的html代碼加入了class。而class就是經過css sprint 把圖標圖片附加在頁面上的。若是你在頁面已經渲染完成後。想要改變圖標圖片。就必需要動態改變class。 javascript

正解：jQuery.mobile.activePage.find('#ad_search').attr('data-icon','arrow-d').trigger('create').find('.ui-icon').removeClass('ui-icon-arrow-r').addClass('ui-icon-arrow-d'); css

二、jqueryMobile經常使用事件： html

pageshow是在頁面切換後顯示以後，觸發的事件。
pagechange是在頁面切換成功後，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換以前的pagebeforechange事件，和切換完成後pagechange（成功）或者pagechangefailed（失敗）
pagebeforehide是在頁面切換後老頁面隱藏以前，觸發的事件。
pagebeforecreate是在頁面DOM建立以前，觸發的事件。通常來講，jQuery Mobile自動初始化頁面，如一個input元素的type爲range的時，jQuery Mobile自動爲此元素生成一個slide滾動條。jQuery也提供自定義的頁面初始化函數。讓自定義的函數代替系統自動的初始化。在頁面的每一次的顯示or隱藏，都會觸發頁面初始化事件。
taphold，是指輕擊而且不放後觸發的事件。具備觸摸屏的電腦和手機特有的事件。
swipe，是指在一秒內，水平方向拖拽大於30px，or 垂直方向拖拽小於20px時觸發的事件。多長時間拖拽多少px能夠配置。swipeleft與swipe的惟一區別就是拖拽滑動的方向。swipe向左，向右拖拽，都會被觸發，但swipeleft只有向左時觸發。 java

能夠經過下面是個4個配置文件來直到那個swipe時間的觸發時機。 jquery

scrollSupressionThreshold : 抑制滾動px。默認10px。水平方向拖拽大於這個值，將不觸發
durationThreshold ：超過這個時間，就不觸發事件。默認1000ms
horizontalDistanceThreshold ：水平方向滑動超過這個值纔會觸發事件。默認30px
verticalDistanceThreshold ：垂直方向，滑動小於這個數字纔會觸發事件。默認75px

能夠經過以下方式，改變上面配置的默認值 ios

1.

2.

3.

4.

$.event.special.swipe.scrollSupressionThreshold = 20;

$.event.special.swipe.durationThreshold = 2000;

$.event.special.swipe.horizontalDistanceThreshold = 40;

$.event.special.swipe.verticalDistanceThreshold = 50;

pageload是在任何頁面成功加載以後觸發的事件。使用preventDefault()使得確定調用回調函數來處理該事件。
updatelayout是在框架中的組件show·hide時，被觸發的事件。觸發的事件中，通知別的組件，自身的大小，位置發生了變化，相關聯的組件請作相關的變化。
scrollstop是頁面滾動中止時觸發的事件。
orientationchange，是指設備的方向發生變化時觸發的事件。綁定此事件時，回調函數的第2個參數，是用來描述設備的屬性。表示是哪一個方向的變化，橫向or縱向的改變。對於瀏覽器來講，經過屏幕的高寬的變化，來觸發orientationchange事件，是有些困難的。因此，若是要真的想經過高寬的改變來控制，仍是建議禁用。$.mobile.orientationChangeEnabled = false能夠禁用此功能。
vmouseover是觸摸環境下touch，和非觸摸環境下mouseover的事件。
vmousedown是觸摸環境下touch start，和非觸摸環境下mousedown的事件。
tab，是指一次快速完整的輕擊後觸發的事件。具備觸摸屏的電腦和手機特有的事件。

三、taphold事件在ios上與自帶的長按事件衝突。 web

正解：加樣式a {
-webkit-touch-callout:none!important;
},或者event.preventDefault();或者禁止頁面全部彈出窗function OnLoad()
{
document.documentElement.style.webkitTouchCallout = "none"; //禁止彈出菜單
document.documentElement.style.webkitUserSelect = "none";//禁止選中
}
<body onload="OnLoad()"> 瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。