Jquery Mobile總結

設的時候，用到了Jquery Mobile，前先後後，接觸了一個月，大致上知道了它的用法，確實很強大，可是一些設計理念，我開始的時候仍是不理解，後來，隨着不斷解決各類BUG，慢慢地懂了一些。下面是一些總結吧，沒有認真整理，由於之後用不到了，因此只把我當時看的一些東西整理下來了。你們有選擇的看看把。

網上的各類教程也有不少了，你們仔細看看，而後又幾個中國人已經把英文的官方文檔給翻譯好了，你們能夠多看看中文文檔，遇到問題就查文檔，文檔是最好的學習資料。而後，你們記得一點，就是用jqm(jquery mobile)的時候，只有一個html頁面其它都是潛入第一個載入的頁面的，因此全部的css和js文件均可以放到第一個加載的HtmL文件中，頁面間的切換都是新的html頁面片斷插入到第一個HtmL頁面的，你們必定要注意這點，我就是吃了大虧。

還有，能夠加幾個QQ羣，我當時加的那個羣，就很是好，有不少人回答我問題，在此特別感謝他們，雖然他們可能不會看到個人這些話。下面是羣號：
140381742 、136590887


   
1.我在一個頁面中有兩個page，在第一個page中有個鏈接鏈接到第二個page的id，理想狀態下應該顯示第二個page的內容，可是不知道爲何它卻跳轉到前一個html去了，這是怎麼回事啊？
  是否是有A,B,C。B/C在一個頁面。在B中點擊C的id，確跳到A去了。   
根據個人狀況是，我dataType寫的json，可是個人返回值弄錯了，返回的不是json,因此形成success中的回調函數不執行。

可是我看了下，這不是主要緣由。我繼續找找。有人試過：版本低了 換高版本的就好了。

JQuery mobile的這個頁面跳轉一直都是個bug  你必須把目錄分級建,不然路徑老是找不對.就是說每一個層次都得分級建目錄

2.作頁面切換時有沒有辦法不切換整個頁面，只切換中間部分，header和footer不變？
這個2個辦法。一個是按文檔說的定義data-id。可是效果很差。不建議使用。會閃屏。當數據量很大，滑動屏幕的時候，頭和尾會暫時消失，等你不滑動的時候纔會出現頭和尾，用戶體驗不好 
第二個辦法是：用css寫成固定的位置。
   
3.連接當前目錄下的頁面，爲何提示說「error loading page」呢？由於那個頁面跟本沒有，或者你路徑寫錯了。通常狀況下是這兩個緣由
4.請問在android裏，如何去掉網頁的觸發時的黃色邊？？？
5.page切換閃屏的問題
6.我服務端PHP寫的，直接返回一個HTML頁面給客戶端，可是下面的分頁，點擊後提示error loading page。幫忙分析下，什麼緣由呢？
   
7.Maybe you have to move the <script> inside the <div data-role="page" id="home">.
If this page isn't your starting page, the script outside the page-div will be ignored.



<script type="text/javascript">
                        $(function(){
                                $(document).bind('swipeleft', function(){
                                        var prePages = $.mobile.activePage.prevAll('div[data-role=page]');
                                        if(prePages.length !== 0){
                                                $.mobile.changePage(prePages.first().attr('id'), 'slide');
                                        }else{
                                                alert('It\'s the first one.');
                                        }
                                }).bind('swiperight', function(){
                                        var nextPages = $.mobile.activePage.nextAll('div[data-role=page]');
                                        if(nextPages.length !== 0){
                                                $.mobile.changePage(nextPages.first().attr('id'), 'slide');
                                        }else{
                                                alert('It\'s the last one.');
                                        }
                                });
                        });
                </script>
別人寫的



用swipeleft、swiperight進行上/下一頁切換，怎麼作的。我作了，怎麼在不停地在作切換，有時切換不到我想要的頁面
有誰作過，請指教
$(".ui-content").live({
                    "swipeleft": function (event) {
                        alert("swipeleft")
                    },
                    "swiperight": function () {
                        alert("swiperight")
                    }
                });

不要用live綁定，用bind
bind好像第二頁面就不行了.--能夠的。

$(".ui-content").bind({
                    "swipeleft": function (event) {
                        var nextPages = $.mobile.activePage.nextAll("div[data-role='page']");
                        if (nextPages.length !== 0) {
                            $.mobile.changePage($("div[data-url='" + nextPages.first().attr("data-url") + "']"));
                        } else {
                            var url = $.mobile.activePage.attr("data-url"), page = 1;
                            var urlId = url.substr(url.lastIndexOf("/") + 1);
                            if (urlId.isNumber()) page = parseInt(urlId);
                            if (page < 10) {
                                next = _root + "/Index/" + (page + 1).toString();
                                $.mobile.changePage(next);
                            }
                        }
                    },
                    "swiperight": function () {
                        var prePages = $.mobile.activePage.prevAll("div[data-role='page']");
                        if (prePages.length !== 0) {
                            $.mobile.changePage($("div[data-url='" + prePages.first().attr("data-url") + "']"));
                        } else {
                            var url = $.mobile.activePage.attr("data-url"), page = 1;
                            var urlId = url.substr(url.lastIndexOf("/") + 1);
                            if (urlId.isNumber()) page = parseInt(urlId);
                            if (page > 1) {
                                prev = _root + "/Index/" + (page - 1).toString();
                                $.mobile.changePage(prev, { role: "page" });
                            }
                        }
                    }
                });
我是這樣的，但是改爲bind後第二頁就無效了

$("[id^=page]").bind('swiperight', function() {
  var prePages = $.mobile.activePage.prevAll('div[data-role=page]');
   if (prePages.length !== 0) {
   $.mobile.changePage(prePages.first().attr('id'), 'slide', true);
  } else {
  }
}).bind('swipeleft', function() {
  var nextPages = $.mobile.activePage.nextAll('div[data-role=page]');
  if (nextPages.length !== 0) {
   $.mobile.changePage(nextPages.first().attr('id'), 'slide');
  } else {
  }
});
用這個試試
以前我好像也遇到過這樣的問題，貌似swipe是不支持live方法的
若是一次將全部的分頁都加載，就有點浪費流量了




$("[id^=page]").bind('swiperight', function() {
  var prePages = $.mobile.activePage.prevAll('div[data-role=page]');
  //alert($.mobile.activePage.find("[name=content]").css("height"));
  if (prePages.length !== 0) {
    //  prePages.first().css('height',$.mobile.activePage.css('height'));
   $.mobile.changePage(prePages.first().attr('id'), 'slide', true);
  } else {
  }
}).bind('swipeleft', function() {
  var nextPages = $.mobile.activePage.nextAll('div[data-role=page]');
  if (nextPages.length !== 0) {
  //nextPages.first().css('height',$.mobile.activePage.css('height'))
   $.mobile.changePage(nextPages.first().attr('id'), 'slide');
  } else {
  }
});

  
  

/** pageSize change **/
(function ($) {
    $.fn.pagesizepost = function (verififunc,options,url,callbackfunc) {
        $(this).change(function(){
            var _pageIndex = parseInt($(this).parent().find("li.get-prev a").attr("pageIndex")) + 1;
//          alert(_pageIndex);
            var _pageSize = $("#PageSize option:selected").val();
            var options = [{name:"PageSize",value:_pageSize},{name:"PageIndex",value:0}];
            var verification = verififunc();
            if(!verification)
            {
                return false;
            }  
            var defaultPara = [];
            
            $("input[type='text']").each(function(){
                defaultPara.push({name:$(this).attr("name"),value:$(this).val()});               
            });
            
            $("input[type='password']").each(function(){
                defaultPara.push({name:$(this).attr("name"),value:$(this).val()}); 
            });
            
            $("input[type='hidden']").each(function(){
                defaultPara.push({name:$(this).attr("name"),value:$(this).val()}); 
            });
            
            var selectgroups = "";
            $("input[type='checkbox']:checked").each(function(){
                if($(this).attr("value")!="")
                {
                    selectgroups = selectgroups + $(this).val()+","; 
                }  
            });
            
            if(selectgroups!="")
            {
                defaultPara.push({name:$("input[type='checkbox']:checked").attr("name"),value:selectgroups});  
            };
            if(options!=null)
            {
             defaultPara = defaultPara.concat(options);
            }  
            
            $.ajax({
                type:"POST",
                beforeSend: function () 
                { 
                 $("body").showLoading() 
                },
                complete:function () { 
                 $("body").hideLoading() 
                },
                 url:url ,
                data:defaultPara,
                success:function(result){
                   if(callbackfunc && typeof (callbackfunc) === 'function') {
                        callbackfunc(result);
                    } 
                }
             });
        });
    };
})(jQuery);
本身寫的插件
verififunc 驗證函數 
callbackfunc 回調函數，能夠本身定義

---------------------------------------------------------------------------------------------------------------------------------------------

如今滾動的時候頭和尾會消失  而後再出現  可是我想讓他一直在  不消失

我也是這個問題
能夠用CSS固定位置。

position：absolutely
這個麼？


/* 下面的樣式是爲了固定頭部和尾部  */
#myheader { 
position: fixed;
  bottom: 0px; 
  left: 0px; 
  z-index: 1999; 
}

#myfooter {
position: fixed;
  top: 0px;
}
你試試。
我還沒試呢

爲何用 $.mobile.changePage("hotplay.html", "toHotPlay", true, true);
跳轉頁面的時候
前一個頁面好像會閃一會兒

方法：把動畫設置成none

$.mobile.defaultPageTransition = 'none'

疑問：

1. jqm 如何刷新本頁面2.changePage 方法切換頁面後，新頁面的 js 及 css 不起做用3.footer 裏的 button ， ui-btn-right 樣式不起做用

我知道怎麼就能夠居中了 , 確定能夠 .

<div style="width:100%;text-align:center;">
<a href="#" data-role="button" id="submit" data-theme="b" data-inline="true" style=" width:50px;">登陸</a>
</div>