2

我正在尝试使用 Anythingslider 在 div 之间滑动：

    <h:panelGroup id="preview" layout="block"
        style="float: left; margin-left: 100px;">

        <ul id="slider">
            <li><ui:include src="./preview/WelcomePreview.xhtml" /></li>
            <li><ui:include src="./preview/CardPreview.xhtml" /></li>
        </ul>

    </h:panelGroup>

但是，一旦我在站点中包含一个表格，它就不再起作用了。请注意，我没有将表格包含在我包含在滑块中的 div 中！它在列表之外。也许不是导致错误的表。

这是我尝试包含的 html：

<rich:collapsiblePanel header="Title" switchType="client"
    expanded="false">

    <table style="table-layout: fixed;">
        <h:form>

            <tr>
                <td class="firstTD"><h:outputLabel value="Title: " /></td>
                <td><h:inputText id="title"
                        value="#{skinningBean.currentSkin.title}">
                        <a4j:ajax event="keyup" render="preview" />
                    </h:inputText></td>
            </tr>
        </h:form>
    </table>
</rich:collapsiblePanel>

编辑

我已经发现，这行代码会产生错误：

    <a4j:ajax event="keyup" render="titlePreview" />

使用ajax时有什么办法让它正常工作吗？

编辑

为了避免找不到正确的 javascript 函数，我做的第一件事是添加 jQuery noConflict 标记：

<script type="text/javascript">
    var $jq = jQuery.noConflict();
  $jq(function($){
  $('#slider1').anythingSlider();
});
</script>

现在我唯一的问题是，一旦页面上呈现了某些内容，javascript 就不再工作了。我想这是因为 javascript 只是在页面初始化时加载的。由于性能，渲染不会加载整页？

4

1 回答 1

1

noConflict()模式设置不正确。它应该在文档就绪函数之外完成，如下所示：

var $jq = jQuery.noConflict();
$jq(function($){
  $('#slider1').anythingSlider();
});

我以前从未使用过 a4j，但快速浏览一下文档，我认为oncomplete需要使用该属性来重新初始化滑块。尝试这样的事情：

<a4j:ajax event="keyup" render="preview" oncomplete="initSlider()" />

然后将javascript更改为：

var $jq = jQuery.noConflict();

function initSlider() {
  $jq(function($){
    $('#slider1').anythingSlider();
  });
}

正如我所说，我对使用 a4j 一无所知，但这看起来可能有效。

于 2013-03-14T15:36:42.910 回答