个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有一个使用 jQPlot 的折线图，需要在单击 jquery 移动弹出窗口时显示。不幸的是它没有出现。下面是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<link class="include" rel="stylesheet" type="text/css" href="jquery.mobile-1.3.0.css" />
<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.canvasAxisLabelRenderer.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<img src="downarrow_Green.svg" onclick="openpopup()"/>
<div id="mychartshow" style="height:150px; width:150px;"></div>
<div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">
<div class="ui-grid-d">
<div class="ui-block-a" align="left">
<span>1y</span>
</div>
<div class="ui-block-b" align="left">
<span>6m</span>
</div>
<div class="ui-block-c" align="left">
<span>3m</span>
</div>
<div class="ui-block-d" align="left">
<span>1m</span>
</div>
<div class="ui-block-e" align="left">
<span>1w</span>
</div>
</div>
<!--Graph Section-->
<div id="mychartshow">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//var plot1 = $.jqplot('chart1', [[93, 17, 19, 11, 15, 13, 18, 12, 15]]);
//var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]], {title:'US Dollar', axes: {xaxis: {min: 5, max:13, tickInterval:2,numberTicks:5},yaxis: {min: 2, max: 8, numberTicks:4}}});
var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
title : 'US Dollar',
axes : {
xaxis : {
ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
},
yaxis : {
ticks : [2.8, 3.0, 3.2, 3.4, 3.6]
}
}
});
});
function openpopup() {
$('#ExchangeRate_graph').popup('open');
}
</script>
</div><!--page-->
</body>
</html>
弹出窗口显示但没有图表。我做错了什么？？？
最佳答案
所有使用页面高度和宽度的 jQuery 插件(在您的例子中是 jqPlot)必须通过 pageshow 事件或在页面已显示的任何其他点进行初始化，在我们的例子中，这是一个 popupbeforeopen 事件。这是因为 jQuery Mobile 页面仅在此时具有正确的高度。因此，如果页面高度为 0，插件将初始化，但高度设置为 0。
只需将此 HTML 复制到一个空的 html 文件中并尝试即可。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/src/jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script>
$(document).on('pageshow', '#graph-page', function(){
$(document).on( "popupafteropen", "#ExchangeRate_graph",function( event, ui ) {
var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
title : 'US Dollar',
axes : {
xaxis : {
ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
},
yaxis : {
ticks : [2.8, 3.0, 3.2, 3.4, 3.6]
}
}
});
});
});
</script>
</head>
<body>
<div data-role="page" id="graph-page">
<div data-role="content">
<a href="#ExchangeRate_graph" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">
<!--Graph Section-->
<div id="mychartshow">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//var plot1 = $.jqplot('chart1', [[93, 17, 19, 11, 15, 13, 18, 12, 15]]);
//var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]], {title:'US Dollar', axes: {xaxis: {min: 5, max:13, tickInterval:2,numberTicks:5},yaxis: {min: 2, max: 8, numberTicks:4}}});
var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
title : 'US Dollar',
axes : {
xaxis : {
ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
},
yaxis : {
ticks : [2.8, 3.0, 3.2, 3.4, 3.6]
}
}
});
});
function openpopup() {
$('#ExchangeRate_graph').popup('open');
}
</script>
</div><!--page-->
</body>
</html>
关于jquery - jQPlot 图表在 jquery mobile 弹出窗口中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16592016/
27
4
0
$.mobile.pageContainer 是指包含其他虚拟页面的元素。它设置为 .所以我认为它可以改变。实际上，某些 JQM 方法 (changePage) 允许您为页面指定非默认页面容器。 J
如何在移动设备上更改方向时触发事件。 调整大小 在 iPod Touch 上运行良好，但在使用 Opera mobile 作为浏览器的移动设备上运行良好。 有关如何在 Opera mobile 上触发
我想为我拥有的装有 Windows Mobile 2003 的设备开发一些应用程序，但我不想为此寻找 Visual Studio 2003 的副本。我想知道是否可以将 Mobile 6 SDK 用于此
我试图阻止 jQuery Mobile 在调用 changePage 时隐藏加载微调器。 程序流程是这样的，从点击一个链接开始，它的点击事件定义如下: $('body').delegate('.lib
我想为运行 Windows Mobile 5 的扫描仪开发应用程序。 MSDN 站点说要下载最新的 SDK(Windows Mobile 6 Professional SDK)。这会起作用还是我应该下
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
我正在尝试使用 Jquery mobile 创建弹出菜单，通过单击按钮，它应该在不更改页面的情况下弹出菜单选项，类似于 jquery mobile 的选择菜单。在 JQM 中有没有办法做到这一点？ 谢
在移动设备中，当我打开我的页面并选择一个输入框时，虚拟键盘打开，页面自动滚动以将输入框置于中心。 我不想要这个 Action 。 我搜索了很多答案，其中大多数建议在调整大小事件中手动调用以下 java
jQuery 移动列表中是否可以有多个拆分按钮？ 我试过这样做: 1 但它不起作用。将链接包装在 中也不行.我做错了什么，
我想从我的 .js 文件中打开 .html 文件。所以我使用了 $.mobile.changePage("file.html")。在file.html 中有file.js。但是 file.js 在调用
我们有许多使用 Windows Mobile 6 的用户，需要应用较小的更改。例如。更新注册表设置。一种选择是使用我们的设备管理软件推送和执行可执行文件。 我希望这对熟悉 VBScript/JScri
我在PHP网站上有一个日期字段，并且我正在使用jQuery Mobile作为移动网站。 在移动浏览器(例如android上的firefox mobile)上浏览网站时，单击日期文本输入时，会出现日历对
我正在构建一个PhoneGap + JQuery Mobile应用程序，但似乎无法阻止它通过双击放大。我按照http://www.tricedesigns.com/2012/01/17/mobile-
随着 jQuery Mobile 1.3 的到来，.navigate()已添加功能。我听说这是更改页面的推荐方法，似乎他们解决了在页面之间传输数据的问题。 问题是，既然已经简化了，我该如何访问 cha
我想得到一个 input文本区域和 submit按钮附在它的右侧。 理想情况下，两者将使用 100% 的宽度并且并排放置。 我一直在尝试玩弄ui-grid-a和类似的选择，但一切都失败了。你可以看到一
我正在使用 jquery-mobile，我有这两个按钮: Pro: Reset 我希望它们并排显示(内联)。但我想不通。我做了this但它不起作用。你能帮我吗 ？这是我的 CSS:
我正在为 Windows Mobile 6.5 (Samsung Omnia II i8000) 开发 native 应用程序。进行一些更改后，我的应用程序在运行时挂起。 问题是我的应用程序也在启动期
有没有办法从周围和图标中删除背景光盘(圆圈)？我找到的光盘的唯一引用如下 background: rgba(0,0,0,.4) /*{global-ic
jQuery 移动版虽然在很多方面都很棒，但有时也令人沮丧。在这种情况下，我试图动态创建库中非常好的按钮之一。 基本上我想要做的是在输入字段中输入文本，当按下空格键时，它会创建一个带有文本的 jQue
我想在我的第 2 页上显示标题。使用以下内容是否有效: "> .... ? 最佳答案 这取决于你定义什么为“有效”
我是一名优秀的程序员,十分优秀！