我如何使用jQuery在自定义的Tapestry 5组件

我试图创建，如果考虑到以下TML组件：我如何使用jQuery在自定义的Tapestry 5组件

<t:slideout> 
    <p:header>Short Description of Data</p:header> 

    Long Details about the data here 
</t:slideout>

这应该首先呈现在头参数块，当该块点击我希望长细节部分使用jQuery .slideDown（）函数或同等功能滑出。

目前，我有下面的类：

public class slideout 
{ 
    @Parameter(name="header", defaultPrefix = BindingConstants.LITERAL) 
    private Block headerBlock; 

    public Block getHeader() 
    { 
    return headerBlock; 
    } 
}

和相应的slideout.tml文件：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" 
    xmlns:p="tapestry:parameter"> 
<body> 
    <t:delegate to="header"/> 
    <t:body/> 
</body> 
</html>

我们已经用上了tapestry5，jQuery库，这个组件需要能要在同一页面上多次使用，所以我也不确定如何确保在渲染页面时没有ID冲突。

我不知道从这里到进步，如果我是在原始的HTML这样做/ jQuery的我会做这样的事情

$('slideout-header').click(function() { 
    $(this).next('slideout-body').slideDown(); 
});

但是我不知道什么样的“挂毯”构建这些类的方式将是。在Tapestry 5中解决这个问题的最好方法是什么？

来源

2012-07-06 Jake Woods

您可以在下添加Slideout.js文件到您的Slideout.tml：

Tapestry.Initializer.Slideout = function (parameters) { 
    var yourClientId = parameters.clientId; 
    //your javascript init script here 
};

添加到您的Slideout.java：

@Import(library = {"Slidout.js"}) 
public class Slideout { 

    @Inject 
    private JavaScriptSupport javaScriptSupport; 

    @Parameter(name="header", defaultPrefix = BindingConstants.LITERAL) 
    private Block headerBlock; 

    @Property 
    @Parameter(value = "prop:componentResources.id", defaultPrefix = "literal") 
    private String clientId; 

    @AfterRender 
    private void afterRender() { 
     JSONObject props = new JSONObject(); 
     props.put("clientId", clientId); 
     javaScriptSupport.addInitializerCall("Slideout", props); 
    } 

    public Block getHeader() 
    { 
     return headerBlock; 
    } 
}

和你Slideout.tml（注意，我删除在HTML，这样你可以使用滑出作为一个组件）

<div id="${clientId}" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" 
    xmlns:p="tapestry:parameter"> 
    <t:delegate to="header"/> 
    <t:body/> 
</div>

免责声明：我没有测试过这个代码，所以有一个游戏。

来源

2012-07-09 12:53:20 joostschouten

我如何使用jQuery在自定义的Tapestry 5组件

回答

相关问题