jquery mobile頁面新增iscroll

2022-08-31 00:57:13 字數 1978 閱讀 7100

在低版本的iso裝置上瀏覽器不支援position:fixed樣式,找了很多解決方案之後選擇了iscroll。

增加滾動功能的**如下:

1 (function

($) 89

elm.css();

1213

var barheight = 0; //

頁頭頁尾高度

1415

//設定頁頭樣式

16var $header = elm.find('[data-role="header"]');

17if

($header.length) );

23 barheight +=$header.height();24}

2526

//設定頁尾樣式

27var $footer = elm.find('[data-role="footer"]');

28if

($footer.length) );

34 barheight +=$footer.height();35}

3637

//設定內容區域樣式、高度

3839

if40

41 "z-index": 1

42});

(e) );45}

4647

//設定滾動區域

48var scroller = elm.find('[data-iscroll="scroller"]').get(0);

49if (!scroller)

5253

//新增滾動條

5455 hscroll : false

,56 vscroll : true

,57 hscrollbar : false

,58 vscrollbar : false

,59 fixedscrollbar : true

,60 fadescrollbar : false

,61 hidescrollbar : true

,62 bounce : true

,63 momentum : true

,64 lockdirection : true

,65 checkdomchanges: true

,66 onbeforescrollstart: function

(e)

75});

76 elm.data("iscroll-plugin", iscroll);

7778 window.settimeout(function(), 200);79}

80 $('[data-role="page"][data-iscroll="enable"]').live("pageshow", function

() );

83if ($.mobile.activepage.data("iscroll") == "enable")

8687

});88 })(jquery);

除了引用jquery、jquerymobile、iscroll外,使用iscroll的頁面需要在data-role

="page"所在標籤

新增data-iscroll="enable"

<

div

data-role

="page"

id="ann"

data-iscroll

="enable"

>

div

jQuery Mobile 頁面事件

在 jquery mobile 中與頁面打交道的事件被分為四類 當 jquery mobile 中的一張典型頁面進行初始化時,它會經歷三個階段 每個階段觸發的事件都可用於插入或操作 事件描述 pagebeforecreate 當頁面即將初始化,並且在 jquery mobile 已開始增強頁面之前,...

jquerymobile頁面結構

1 必須用html5的文件型別頭 2 包含viewport的meta標籤 3 包含jquerymobile的css和js檔案 4 使用data role page 結構 data role page data role header data role content data role foote...

jQuery Mobile頁面跳轉及其引數傳遞

這裡我用到的是標籤進行跳轉,引數是放在href後面的,如下 遇到的問題 1 在第二個頁面,引入的js沒有效果,寫的js方法沒有生效?解析 這是因為頁面跳轉,只能夠解析裡面的東西 解決辦法 第一種方法 將js方法,css樣式,引入的js都寫在這個標籤裡面就可以生效 第二種方法 在a標籤中加入rel e...