• 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 回调函数,可以自己定义

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


    图片1sdfsdfsdf.jpg

    图片1s3sdfsdfsdf.jpg



    现在滚动的时候头和尾会消失  然后再出现  但是我想让他一直在  不消失

    我也是这个问题
    可以用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方法切换页面后,新页面的jscss不起作用3.footer里的buttonui-btn-right样式不起作用
    我知道怎么就可以居中了,肯定可以.
    <div style="100%;text-align:center;">
    <a href="#" data-role="button" id="submit" data-theme="b" data-inline="true" style=" 50px;">登录</a>
    </div>
    图sdfsdfsdfd片1.jpg





  • 相关阅读:
    【Java基础】9、Enumeration接口和Iterator接口的区别
    【Java基础】4、java中的内部类
    【Java基础】3、Java 位运算(移位、位与、或、异或、非)
    【高并发解决方案】6、数据库水平切分的实现原理解析
    【Java深入研究】6、CGLib动态代理机制详解
    【Java深入研究】4、fail-fast机制
    【Java深入研究】2、JDK 1.8 LinkedList源码解析
    【算法】1、快速排序
    Linux下查看系统版本号信息的方法
    Kubernetes1.2如何使用iptables
  • 原文地址:https://www.cnblogs.com/y0umer/p/3839173.html
Copyright © 2020-2023  润新知