我寻求一种简单的方式使用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可以找到),从而导致
用于显示器3列产品列表> 760px
和
2列产品列表显示<760px
我用这个我的网站的登录页面:
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
文章来源: Determine browser width with jQuery, then call one (out of two) .php files (from the same directory) to load a line of PHP