Jquery迷你图在Jquery移动可折叠集中无法正确呈现

时间：2013-04-19 04:37:39

标签： jquery jquery-mobile sparklines jquery-mobile-pageshow jquery-mobile-collapsible

我想在Jquery移动可折叠集中显示一些迷你图，但是这些图表没有正确呈现：

大多数html代码都是由jquery函数构建的，包括那些生成迷你图的函数。

它不会显示第一时刻的“图形”，而是显示绘制迷你图的文字系列数字，然后如果再次执行该功能，则使用图形正确呈现迷你图。为“listview”ul生成“li”元素的函数设置为10秒间隔。

请参阅下面附带的代码和屏幕截图：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
    <script src="jquery.sparkline.min.js"></script>
    <script type="text/javascript">
        //set repeating time
        setInterval(populateList, 10000);

        $(document).on('pageinit',function(){ 
            //build the basic html structure
            buildHtml();
            $('#domain').trigger("create");
            populateList();
        });

        function buildHtml(){
            var domain_list = "";
            domain_list += "<div id=\""+ "this.domain" +"\" data-role=\"collapsible\" data-collapsed=\"false\" data-mini=\"true\" data-collapsed-icon=\"arrow-r\" data-expanded-icon=\"arrow-d\" data-theme=\"a\">";
            domain_list += "<h2>"+ "this.domain" +"</h2>";
            domain_list += "<div data-role=\"collapsible-set\" data-theme=\"d\">";
            domain_list += "<div data-role=\"collapsible\" data-collapsed=\"false\" data-mini=\"true\">";
            domain_list += "<h2>Queueing</h2>";
            domain_list += "<ul data-role=\"listview\"  id=\""+ "domainqueueing"+"\" data-inset=\"false\">";
            domain_list += "</ul></div>";

            var show_all_queues = "";
            show_all_queues +=  "<div data-role=\"collapsible\" data-mini=\"true\">";
            show_all_queues += "<h2>Show all queues</h2>";
            show_all_queues +=  "<ul data-role=\"listview\"  id=\"domainallqueues\" data-filter=\"true\" data-filter-theme=\"c\" data-divider-theme=\"d\" >";
            show_all_queues += "</ul></div>";

            domain_list += show_all_queues+ "</div></div>";

            $('#domain').html(domain_list);


        }

        function populateList(){

            //build "li"s
            var str = "<li data-theme = \"c\"><h3>" + "this.queue1" + "</h3><p>Last Enqueue Time: " + "this.timeOnQueue1" + " ago</p><p class=\"dynasparkline\">"+historyCounts()+"</p><span class=\"ui-li-count\">" + 123 + "</span></li>"
            var str1 = "<li data-theme = \"d\"><h3>" + "this.queue1" + "</h3><p>Last Enqueue Time: " + "this.timeOnQueue1" + " ago</p><p class=\"dynasparkline\">"+historyCounts()+"</p><span class=\"ui-li-count\">" + 123 + "</span></li>"
            //just for repetition
            var doubble = str+str1;//just for repetition
            var triple = str+str1+str;

            $('#domainqueueing').html(doubble);
            $('#domainallqueues').html(triple);
            //update jquery mobile listview
            $('#domainqueueing').listview('refresh');
            $('#domainallqueues').listview('refresh');
            //trigger the sparklines
            $('.dynasparkline').sparkline();
        }
        //random generate some numbers for hisotry graph
        function historyCounts(){
            var str = "";
            for(var i=0; i<60; i++){
                var num = Math.floor((Math.random()*100)+1); //Return a random number between 1 and 100

                str += num;
                if(i != 59){
                    str+=",";
                }
            }
            return str;
        }
    </script>
</head>
<body>
    <div data-role="page" id="indexPage">
        <div data-role="header" id="queueheader">
            <h1>Queues</h1>
        </div>
        <br/>
        <div data-role="content" id="domain">

        </div>
        <div data-role="footer" id="statusbar">
            <h4>Last Update: <span id="lastupdate"></span></h4>
        </div>
    </div>
</body>

no graphs display, but a hole bunch of numbers correct display

任何建议表示赞赏!!!提前致谢！

显示可折叠div的另外两个屏幕截图显示的是数字而不是图表： enter image description here enter image description here

1 个答案:

答案 0 :(得分：0)

您唯一的问题是 pageinit 事件。

jQuery Mobile在页面初始化期间运行图形jQuery插件时出现问题。在页面初始化页面期间，高度通常为0或一些小值，这会影响插件。因此，通常只有可用的页面事件是 pageshow 。

以下是您的代码的工作示例：http://jsfiddle.net/Gajotres/23ccn/

HTML： 

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
    <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
    <script src="http://omnipotent.net/jquery.sparkline/2.1.1/jquery.sparkline.min.js"></script>
</head>
<body>
    <div data-role="page" id="indexPage">
        <div data-role="header" id="queueheader">
            <h1>Queues</h1>
        </div>
        <br/>
        <div data-role="content" id="domain">

        </div>
        <div data-role="footer" id="statusbar">
            <h4>Last Update: <span id="lastupdate"></span></h4>
        </div>
    </div>
</body>

Javascript： 

$(document).on('pageshow', '#indexPage', function(){       
    //build the basic html structure
    buildHtml();
    populateList();  
});

//set repeating time
setInterval(populateList, 2000);


function buildHtml(){
    var domain_list = "";
    domain_list += "<div id=\""+ "this.domain" +"\" data-role=\"collapsible\" data-collapsed=\"false\" data-mini=\"true\" data-collapsed-icon=\"arrow-r\" data-expanded-icon=\"arrow-d\" data-theme=\"a\">";
    domain_list += "<h2>"+ "this.domain" +"</h2>";
    domain_list += "<div data-role=\"collapsible-set\" data-theme=\"d\">";
    domain_list += "<div data-role=\"collapsible\" data-collapsed=\"false\" data-mini=\"true\">";
    domain_list += "<h2>Queueing</h2>";
    domain_list += "<ul data-role=\"listview\"  id=\""+ "domainqueueing"+"\" data-inset=\"false\">";
    domain_list += "</ul></div>";

    var show_all_queues = "";
    show_all_queues +=  "<div data-role=\"collapsible\" data-mini=\"true\">";
    show_all_queues += "<h2>Show all queues</h2>";
    show_all_queues +=  "<ul data-role=\"listview\"  id=\"domainallqueues\" data-filter=\"true\" data-filter-theme=\"c\" data-divider-theme=\"d\" >";
    show_all_queues += "</ul></div>";

    domain_list += show_all_queues+ "</div></div>";

    $('#domain').html(domain_list).trigger("create");    
}

function populateList(){

    //build "li"s
    var str = "<li data-theme = \"c\"><h3>" + "this.queue1" + "</h3><p>Last Enqueue Time: " + "this.timeOnQueue1" + " ago</p><p class=\"dynasparkline\">"+historyCounts()+"</p><span class=\"ui-li-count\">" + 123 + "</span></li>"
    var str1 = "<li data-theme = \"d\"><h3>" + "this.queue1" + "</h3><p>Last Enqueue Time: " + "this.timeOnQueue1" + " ago</p><p class=\"dynasparkline\">"+historyCounts()+"</p><span class=\"ui-li-count\">" + 123 + "</span></li>"
    //just for repetition
    var doubble = str+str1;//just for repetition
    var triple = str+str1+str;

    $('#domainqueueing').html(doubble);
    $('#domainallqueues').html(triple);
    //update jquery mobile listview
    $('#domainqueueing').listview('refresh');
    $('#domainallqueues').listview('refresh');
    //trigger the sparklines
    $('.dynasparkline').sparkline();
}
//random generate some numbers for hisotry graph
function historyCounts(){
    var str = "";
    for(var i=0; i<60; i++){
        var num = Math.floor((Math.random()*100)+1); //Return a random number between 1 and 100

        str += num;
        if(i != 59){
            str+=",";
        }
    }
    return str;
}
相关问题
最新问题