- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在我的应用程序中使用 jscrollpane。如果我将滚动 Pane 定义如下
<div id="scroll-pane">
<p>This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
which can be styled at will.</p>
</div>
在脚本中我定义如下
$('#scroll-pane').jScrollPane()
.bind('mousewheel', function (e) {
e.preventDefault();
}
);
工作正常。如果我在 div 标签内提供 iframe,例如
<div id="scroll-pane">
<iframe id="scroll" src="//Home/GridColumnMenu"></iframe>
</div>
它不起作用。有人可以告诉我该怎么做吗?
最佳答案
为了在 iframe 中使用 jscrollpane
,您需要使用 jscrollpane 代码来准备它们,如文档 ( http://jscrollpane.kelvinluck.com/iframe.html ) 中所示。
例如,
包含 iframe 的父 div
js
$('#scroll-pane').jScrollPane()
.bind('mousewheel', function (e) {
e.preventDefault();
}
);
html
<div id="scroll-pane">
<b>An Iframe at the bottom</b>
<p>This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
which can be styled at will.This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
which can be styled at will.This demonstration shows basic
....
<iframe id="scroll" src="http://jsfiddle.net/Rf26T/1/show"></iframe>
</div>
CSS
#scroll-pane{
height:100px;/*to demonstrate jscrollpane on the parent div containing the iframe*/
}
iframe {
width: 100%;
height: 200px;
border: 0;
}
iframe 代码
js
$(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.on(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#content');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({
'width': 1,
'height': 1
});
// Now make it the size of the window...
container.css({
'width': win.width(),
'height': win.height()
});
isResizing = false;
container.jScrollPane({
'showArrows': true
});
}
}).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
});
html
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique non urna sed vu...
</p>
</div>
CSS
body {
background: #fff;
overflow: auto;
height: 100%;
}
编辑 - 这是对评论的回复
如果动态创建iframe有两种情况,
*1.*您已将 jquery 和 jscrollpane 库放置在 iframe 的 head
元素中,以及此答案中上面显示的代码。然后就可以直接运行了,如下例
http://jsfiddle.net/EBz3s/show
http://jsfiddle.net/EBz3s/ - 代码
如您所见,使用的 iframe 与上面第一个示例创建的 iframe 相同。
*2.*您尚未放置 js 库或代码,并且您不打算添加它们。在这种情况下,场景是像情况 1 一样动态创建 iframe,但还要添加与 jquery、jscrollpane 相关的 js 代码、iframe 的自定义代码(如上所示)、jscrollpane css。由于本例中引用的 iframe 没有加载任何外部库或 js 代码等。这并非小事,必须小心。在此示例中,
http://jsfiddle.net/EBz3s/show (需要等待 2-3 秒才能加载库,然后 jscrollpane 才能运行,解释如下)
提供的解决方案提供了一种动态添加资源的方法,但没有一种稳健的方法来等待每个资源加载后再加载下一个资源(例如,等待 jquery 加载,然后加载 jscrollpane 等)。仅用于提供工作示例的方法是函数 setTimeout
和加载库之间的 1-2 秒延迟。如果是这种情况,您将需要实现更好的东西,可能是一个递归 setTimeout
来检查 jQuery 是否已加载,然后从 iframe 中调用 getScript
。此外,所提供的 importScript(iframe,jsFile,jsCode)
对于实现更强大的解决方案确实很有帮助。
最后是代码,以防 fiddle 消失,
js
$('input[type=button]').not('[value*="NOT"]').click(function(){
var url = "http://jsfiddle.net/Rf26T/1/show";
$("#scroll-pane1").html("<iframe src =" + url + " style='width:100%;border:none;'></iframe>");
});
$('input[type=button][value*="NOT"]').click(function(){
var url = "http://jsfiddle.net/7Lc9V/show";
var $iframe=$("<iframe src="+url+" style='width:100%;border:none;'></iframe>");
$("#scroll-pane2").append($iframe);
$iframe.load(function(){
importCSS($iframe.get(0),"http://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.14/jquery.jscrollpane.min.css")
importScript($iframe.get(0),"http://code.jquery.com/jquery-1.9.1.js");
importScript($iframe.get(0),null,"function importScript(iframe,jsFile,jsCode){var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');var script = document.createElement('script');if(jsCode){try {script.appendChild(document.createTextNode(jsCode));} catch (e) {script.text = jsCode;}}else{script.setAttribute('src',jsFile);}script.setAttribute('type','text/javascript');heads[0].appendChild(script);}");
importScript($iframe.get(0),null,"setTimeout(function(){importScript(null,'http://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.14/jquery.jscrollpane.js');},1000);");
importScript($iframe.get(0),null,"setTimeout(function(){importScript(null,null,\"$(document).ready(function(){$(function () {var win = $(window);var isResizing = false;win.on('resize',function () {if (!isResizing) {isResizing = true; var container = $('#content');container.css({'width': 1,'height': 1});container.css({'width': win.width(),'height': win.height()});isResizing = false;container.jScrollPane({'showArrows': true});}}).trigger('resize');$('body').css('overflow', 'hidden');if ($('#full-page-container').width() != win.width()) {win.trigger('resize');}});});\");},2000);");
});
function importCSS(iframe,cssFile){
var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');
var css = document.createElement('link');
css.setAttribute("rel", "stylesheet")
css.setAttribute("type", "text/css")
css.setAttribute("href", cssFile)
heads[0].appendChild(css);
}
function importScript(iframe,jsFile,jsCode){
var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');
var script = document.createElement('script');
if(jsCode){
try {
script.appendChild(document.createTextNode(jsCode));
} catch (e) {
script.text = jsCode;
}
}else{
script.setAttribute("src",jsFile);
}
script.setAttribute('type','text/javascript');
heads[0].appendChild(script);
}
});
html
<input type="button" value="add iframe that includes jscrollpane" />
<div id="scroll-pane1">
</div>
<input type="button" value="add iframe that DOES NOT include jscrollpane" />
<div id="scroll-pane2">
</div>
关于javascript - Web 应用程序中的 jscroll Pane ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20397919/
我有一个几乎可以构建的Maven / Grails应用,但在web.xml上找不到[my-app]\webapp\WEB-INF\web.xml。但是目录结构像往常一样包含web-app文件夹,而不是
正如我在标题中提到的:我想知道 web-service 和 web-socket 之间的区别?我们什么时候使用每一个? 谢谢! 最佳答案 一个web service是一个响应客户端 SOAP/REST
让我们看一个示例场景: 客户端打开一个网站并找到他从文本框中输入的两个数字的总和。然后单击“添加”按钮。两个参数通过 HTTP GET 发送到服务器,在服务器上写入 PHP 代码以添加数字,结果为回声
我知道这是一个老问题,肯定已经被回答了数百次,但我还无法找到令人满意的答案。 我正在创建一个应用程序,其他应用程序(移动/网络)将使用该应用程序来获取数据。现在我有两个选择: 将我的应用程序创建为简单
通过 Web 作业部署新功能有 3 种方法: 创建一个新的 Web 应用,并部署一个包含该函数的 Web 作业。 向现有 Web 作业添加一项新函数(这样您现在在一个 Web 作业中就拥有了多个函数)
我收到来自网络场景的通知,上面写着“问题”和“确定”。我想在问题发生时包含网络响应的内容。我不担心标题值,只担心网页的内容. 这是我可以在通知设置中引用的变量吗? 最佳答案 不幸的是 zabbix 不
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
嗨,这是一个理论问题,但我真的无法弄清楚 Web 应用程序、基于 Web 的应用程序和基于云的应用程序之间的区别。这个你能帮我吗。 最佳答案 @Matt 是对的 - 这真的无关紧要,但是,为了清楚起见
我正在尝试使用多个 Web 服务,这些服务在它们的 wsdl 中重新定义了一些相同的公共(public)类。我目前在网站中引用了它们,但我想转换为 Web 应用程序。 由于一些相同的类是从多个 Web
一个。我必须考虑哪些事项?b.当前应用程序正在执行多个存储过程。如果我创建等效的方法来执行这些过程,会有什么风险或挑战。 最佳答案 在架构上,将网络应用程序转换为网络服务时必须考虑的一件事是,对方法和
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 5年前关闭。 Improve thi
网络 API 和网络服务之间有什么区别吗?或者它们是同一个吗? 最佳答案 网络服务通常提供 WSDL您可以从中自动创建客户端 stub 。 Web 服务基于 SOAP protocol 。ASP.NE
我已经获得了我需要的所有资源。我将 Web 服务放入应用程序服务环境中,然后将 NSG 连接到应用程序服务环境使用的子网。然后,我允许 VNET 内的应用程序与 Web 服务进行通信,但它无法正常工作
我已经获得了我需要的所有资源。我将 Web 服务放入应用程序服务环境中,然后将 NSG 连接到应用程序服务环境使用的子网。然后,我允许 VNET 内的应用程序与 Web 服务进行通信,但它无法正常工作
我正在使用 stub 将我的网络服务相关测试与实际网络服务隔离开来。 你/我应该如何合并测试以确保我制作的响应与实际的网络服务匹配(我无法控制它)? 我不想知道怎么做,而是何时何地? 我应该为测试数据
我在互联网上搜索了很多,但我仍然没有得到网络服务和网络 API 之间的明显区别?我在某处读到所有 Web 服务都是 API,但所有 API 都不是 Web 服务。如何? 我所知道的是两者都允许利用其他
假设我已经完成了使用 JavaEE 制作的 Web 应用程序。这个 Web 应用程序包含登录系统,但最后它是非常基本的 Web 应用程序。我使用的是 GlassFish 3.1.2.2。 我想知道一旦
我希望设计者能够打开与我相同的解决方案文件。这可以通过 Expressions Web 实现吗? 最佳答案 简短的回答是“不”;但这是一个非常常见的请求,我知道很多人都希望下一个版本(无论何时)对此有
我正在尝试在 CF10 中创建一个 Web 服务对象。我已验证它在 SoapUI 中按预期工作。但是,当我在 CF 中运行它时,我得到一个错误,它无法找到在 WSDL 的导入语句中导入的 XSD。这是
我的要求是开发一个 Web 服务,充当外部 Web 服务和客户端之间的中间人。 我知道,我可以为我的服务设计一个wsdl,然后将外部wsdl映射到代码中我的wsdl。我的问题是有一个开源 api/工具
我是一名优秀的程序员,十分优秀!