【发布时间】：2011-11-26 14:36:35
【问题描述】：
我在 magento 产品页面上有一个 jScrollPane，它正在获取显示为内联列表的选项（参见屏幕截图 - http://awesomescreenshot.com/06dlbao6b）。
是否可以根据内容动态设置分区大小，因为有些产品只有 2 个选项，但有些可能有 27 个。
到目前为止，如果我手动设置分割宽度，我只找到了一种显示超过 4 个选项的方法，这不是一个真正的选项，就好像我只有 3 个不需要显示滚动的产品一样控制。
有问题的部门是product-options-chooser div。
不确定它是否有帮助，但这是来自 \template\catalog\product\view\options\type\select.phtml 的相关代码：
<?php /* @var $this Mage_Catalog_Block_Product_View_Options_Type_Select */ ?>
<?php $_option = $this->getOption() ?>
<script>
jQuery(function()
{
var pane = jQuery('.product-options-container');
pane.jScrollPane(
{
showArrows: true,
animateScroll: true
}
);
});
</script>
<div class="product-options-title">
<dt>
<label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>>
<?php if ($_option->getIsRequire()) echo '<em>*</em>' ?>
<?php echo $this->htmlEscape($_option->getTitle()) ?></label>
</dt>
</div>
<div class="product-options-container">
<div class="product-options-chooser">
<dd<?php if ($_option->decoratedIsLast){?> class="options-last"<?php }?>>
<div class="input-box"> <?php echo $this->getValuesHtml() ?>
<?php if ($_option->getIsRequire()): ?>
<?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO || $_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX): ?>
<span id="options-<?php echo $_option->getId() ?>-container"></span>
<?php endif; ?>
<?php endif;?>
</div>
</dd>
</div>
</div>
【问题讨论】：
-
确定计算内部元素的宽度并相乘
-
另外，JavaScript（以及因此 jQuery）在客户端工作，这意味着 php（服务器端）脚本是无关紧要的；我们需要查看呈现的 html。