我寻求一种使用jquery调用php文件的简单方法。
最终结果与我正在工作的Magento网站有关:http://bouquetsco.com/flowersplants.html^ ^这页
本页每行显示3个产品。
<?php $this->setColumnCount(3); ?>
<?php $this->setColumnCount(2); ?>
^^这段php代码手动设置产品列的数量。
默认情况下页面显示3宽，这看起来很好，直到浏览器窗口重新调整到平板电脑宽度(760px左右)。当网站设计为平板电脑大小(760px左右)时，我希望只显示两列产品。
要做到这一点，似乎必须使用javascript来确定窗口宽度，然后根据浏览器窗口宽度运行一些php代码…像
…
if ( browser-window-widith > 760) { get '3-column.php' }
else { get '2-column.php' }
这太简单了。这个代码逻辑是什么样子的呢?如何编写这个功能呢?
也可以将初始if语句修改为:
if (browser-window-width < 760) { get '2-column.php' }
else { get '3-column.php' }
====================================
将存在两个.php文件(2-column.php， &3-column.php)每个包含:
<?php $this->setColumnCount(2); ?>
或
<?php $this->setColumnCount(3); ?>
代码将根据浏览器的窗口宽度调用一个文件或另一个文件(这将由javascript找到)，从而产生
三列产品列表> 760px
和
显示器的两列产品列表<760 px
我在我的网站登录页面上使用这个:
if(!isset($_GET['width']))
{
echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
}
else
{
$_SESSION['screen_width'] = $_GET['width'];
$_SESSION['screen_height'] = $_GET['height'];
}
现在宽度和高度被保存到当前会话中，我可以在显示页面划分之前做一个条件检查。if($_SESSION['screen_width']>= '1400')
{
$this->setColumnCount(3);
}
else
{
$this->setColumnCount(2);
}
您可以使用jquery宽度和一些ajax调用。
index . php
<html>
....
<div id="somedivport"></div>
<--! if that script is used the above div will load differently depending on the width-->
</html>
script.js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//or use this$(document).width();
$("#somedivport").load(width>$(window).width()?"/3-column.php":"/2-column.php");
});
</script>
编辑减少kloc