如何在重复控件

时间:2016-12-06 00:41:50

标签: jquery css xpages

这是我的问题,我想在网页加载时动态设置元素的CSS,所以我用

$(document).ready(function(){
    x$("#{id:normalline}").css('margin-Left', '-68px');
}); 

是的,我使用了函数x $(idTag,param)...我试图使用$(“[id $ ='#{id:normalline}']”)。css要么,它们都能正常工作元素不在重复控制中..但是......一旦元素被包含在重复中,它就不再起作用了。代码在这里:

updated

我认为你们注意到重复中有一个按钮和另一个获取元素id的函数,奇怪的是它真的有效!那么为什么当我尝试初始化它时它不起作用?我检查了源代码,元素变为

x $(“ view:_id1:repeat1:normalline ”)。css('margin-Left',' - 68px');

但真正的元素ID是

<'div'id =“查看:_id1:repeat1:0:normalline ”class =“line-normal-wrapper”>

或者当页面加载时还有其他任何设置css的方法吗?

更新:这是我正在做的项目,希望你们不介意中文字符

enter image description here

我想实现这种效果为ios-delete-style,当你点击Minus按钮时,那个scroll的div可以向左移动68px,我知道有很多jquery的东西可以做到,但现在我我想集中精力如何设置normalline的css以这种方式实现......

<xp:repeat id="repeat1" rows="30" var="currentDetail"
        indexVar="detailIndex" value="#{LeaveBean.details}"
        repeatControls="false">

        <xp:div styleClass="line-wrapper">
            <xp:div id="scrollline"
                styleClass="line-scroll-wrapper">
                <xp:div id="normalline"
                    styleClass="line-normal-wrapper">
                    <xp:div
                        style="width:26px;margin-top:50px;margin-left:10px;float:left;">
                        <xp:image url="/remicon.gif" id="image2"
                            style="height:24.0px;width:24.0px">
                            <xp:eventHandler event="onclick"
                                submit="false" id="eventHandler5">
                                <xp:this.script>
                                    <xp:executeClientScript>
                                        <xp:this.script><![CDATA[x$("#{id:scrollline}").css('margin-Left', '-68px');
                                         ]]></xp:this.script>
                                    </xp:executeClientScript>
                                </xp:this.script>
                            </xp:eventHandler>
                        </xp:image>
                    </xp:div>
                </xp:div>
                <xp:div id="deletebtn"
                    styleClass="line-btn-delete">
                    <xp:button value="删除" id="button2"
                        style="font-size:13pt;border: none;color:rgb(255,255,255);width:100%;height:128px;background-color:rgb(255,0,0)">
                        <xp:eventHandler event="onclick"
                            submit="false" refreshMode="partial" refreshId="repeat1">
                            <xp:this.action>
                                <![CDATA[#{javascript:LeaveBean.removeDetail(detailIndex);}]]>
                            </xp:this.action>
                        </xp:eventHandler>
                    </xp:button>
                </xp:div>
            </xp:div>
        </xp:div>
    </xp:repeat>

这里是css样式文件

.line-wrapper {width:100%;溢出:隐藏; border-bottom:1px solid#E8E8E9}

.line-scroll-wrapper {white-space:nowrap;明确:两个}

.line-normal-wrapper {display:inline-block; line-height:100px;向左飘浮; padding-bottom:1px; margin-top:5px}

.line-btn-delete {width:68px; height:120px}

到目前为止,我必须在.line-normal-wrapper中设置宽度值以保持删除按钮不会出现在页面中,一旦我删除它,就会像这样:

enter image description here

但是我无法修复普通div的宽度,因为我无法控制所有设备的屏幕尺寸,即使在同一设备上,如果你旋转屏幕也会很糟糕,因为normalline的宽度是固定的。

enter image description here

我尝试添加此项以设置宽度

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
    $(document).ready(function(){$(".line-normal-wrapper").width($(window).width());});
     ]]></xp:this.value>
</xp:scriptBlock>

但是,它只在页面打开时才有效,一旦我添加新行或删除一行,它将成为pic 2外观

所以我现在该做什么...... = =

再次更新.... ewhh .....我发现如果删除就绪功能......它有效...&gt; ___&lt;

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
    $(".line-normal-wrapper").width($(window).width());
     ]]></xp:this.value>
</xp:scriptBlock>

2 个答案:

答案 0 :(得分:5)

从jQuery的角度来看,Taplar的答案是正确的,有一个语法问题阻止使用XPages ID(必须包含一个分层元素,使用冒号实现,以确保客户端的唯一ID,因为你见)。

但是,这里有一个特定的XPages原因影响了你,这不是ID,而是重复。这将阻止您通过SSJS以及jQuery CSJS从外部访问重复行。

XPages #{id:...}语法用于访问服务器端组件。但是在重复控件中,每行没有一组组件,只有一组组件没有绑定到任何行。我已经在今年的几个会议中介绍了这一点,并将在下周的TLCC网络研讨会上再次报道。您可以使用XPage调试工具栏的“检查器”选项卡来验证这一点,以查看XPage的组件树,即XPage使用的页面的服务器端映射。你只会看到一组组件。如果你设置重复的indexVar属性并在ID中使用它,你会看到ID不包含它,因为它没有为特定行加载一组组件,它是一个抽象集组分独立于重复。因此#{id:...}语法映射到抽象模板组件,而不映射到特定行中的特定实例。

建议使用组件上的CSS样式。

或者,如果您在重复控件上设置repeatControls="true",则会创建重复的 x 行的一组组件,您可以设置包含{{1}的ID重复控件的属性,允许您从外部访问它们。这不是推荐的方法,因为您需要知道创建了多少行,并且您将无法使用寻呼机动态更改每组组件绑定到哪些行 - 这仅在页面加载时设置。 / p>

答案 1 :(得分:1)

这里的问题是你的id中包含:这样的字符,它们对css选择器有特殊的意义,jQuery模仿它的选择逻辑。您可以通过各种方式定位此类元素。

//personally i would avoid this one as it will do a dom scan
console.log( $( '[id="view:_id1:repeat1:0:normalline"]' ).get() );

console.log( $( 'div' ).filter(function(){ return this.id === "view:_id1:repeat1:0:normalline"; }).get() );

//I would probably do this one or the one above if I was forced to.
console.log( $( document.getElementById( 'view:_id1:repeat1:0:normalline' ) ).get() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="view:_id1:repeat1:0:normalline" class="line-normal-wrapper"></div>