在多个地方放置相同的HTML

Question

我正在构建一个webapp，在移动浏览器中，它将包含两个用户可以在其间滑动的视图（A和B）。在较大的屏幕上，两个视图将并排放置。

我正在使用iosSlider来创建滑动效果。

我想要做的是使用一些输出A和B的命令，例如两个只输出一个非常长的字符串的函数，这样我就可以编写类似

的内容

if mobile:
    <slider-construction>
        <slide1> funk_A() </slide1>
        <slide2> funk_B() </slide2>
    </slider-construction>  
else:
    <div>funk_A()</div>
    <div>funk_B()</div>

我做事是明智的吗？我意识到另一种方法是使用一些允许我禁用它的滑动脚本，使得幻灯片只是并排放置（看起来iosSlider似乎没有那个功能？）。我试过简单地将A和B放在单独的.html文件中，并使用embed-command将它们放在幻灯片中，但这似乎禁用了滑动效果。使用document.write（）或类似的东西（例如幻灯片的innerHTML）也是不切实际的，因为那些函数当时只假设一行代码。

谢谢你：）

Answer 1

我找到了3种不同的解决方案：

HTML解决方案：

“包含”命令

使用

<!--#include virtual="/directory/included.html" -->

并将父文件的结尾更改为 .shtml 。

iosSLider-solutions：

幻灯片宽度

如果幻灯片的总宽度小于滑块的宽度，则它们将自动放置在彼此旁边。这在iosSlider附带的基准测试的最后一个例子中得到了证明。

destroy-method

也可以使用调用

来禁用滑块

$(".iosSlider").iosSlider("destroy");

请注意，这里的“.iosSlider”与用于启动iosSlider的定义相同，即呼叫：

$('.iosSlider').iosSlider({
                (options)
            });

在这种情况下，幻灯片将被视为div，（但仍然具有格式，例如宽度和高度，如滑块处于活动状态时所应用的那样）。