根据窗口宽度加载不同的TPL

我尝试根据窗口宽度加载不同的TPL（或者我也可以设置一个变量）。所以，我想我可以使用代码一样，或者得到至少2个不同类型的窗口：根据窗口宽度加载不同的TPL

基本上，这是我想有结果：

if($(window).width() < 960){ 
    include file="small.tpl" 
}; 

else{ 
include file="big.tpl" 
};

或类似的东西：

if ($(window).width() < 960) 
    {assign var="numcolumns" value="1"}; 

else 
    {assign var="numcolumns" value="2"};

任何简单的建议？

来源

2014-07-21 user3848253

对不起，但它不会这样工作。您无法使用JavaScript条件加载PHP（并且Smarty实际上是PHP）。

您可以做的最好的做法是包含这两个文件，并根据检测窗口在JavaScript中隐藏不需要的块。

然而这不是最好的技术。我建议你使用响应式网页设计技术来显示网站，不管客户端窗口宽度。

编辑

工作代码（不使用jQuery）

<div id="big"> 
    {include file="big.tpl"} 
</div> 
<div id="small"> 
    {include file="small.tpl"} 
</div> 

<script type="text/javascript"> 


if (window.innerWidth < 960) 
    document.getElementById('big').style.display = 'none'; 
else 
    document.getElementById('small').style.display = 'none'; 

</script>

来源

2014-07-21 08:00:16

其实响应式设计（和林好与它），它不是最好的解决办法。但它不是最好的技术。我会建议你使用响应式网页设计技术来显示网站，无论客户端窗口宽度为 – user3848253

如何包含这两个文件，然后隐藏不需要的tpl？ – user3848253

@ user3848253我已添加示例代码。没有最好的解决方案，但在这种情况下，我向你展示了两次加载相同/相似的内容，这意味着页面加载时间更长，并且只使用了一半的内容。 –

根据窗口宽度加载不同的TPL

回答

相关问题