Question

我在XSLT的帮助下有一个XML我为XML代码创建了手风琴应用样式

现在我正在尝试创建Jquery Accordian。

这是我的XML代码

<NavItem id="client1" ImageURL="/cs/PADEV/cache/AGL_NAV_COL_PERSON_21.GIF" Name="ADMN_F201312300957205437788018" SequenceNumber="3" Label="My Information"  TargetPortal="EMPLOYEE" Type="Folder" isVirtual="False">
<NavItem Label="Personal Information" Name="ADMN_S201312300957415580614642" SequenceNumber="4" isNewWindow="False" isTopWindow="True"/>
<NavItem Label="Mailing Address" Name="ADMN_S201312300957415580614642" SequenceNumber="4" isNewWindow="False" isTopWindow="True"/>
</NavItem>

<NavItem id="client2" ImageURL="/cs/PADEV/cache/AGL_NAV_COL_PERSON_21.GIF" Name="ADMN_F201312300957205437788018" SequenceNumber="3" Label="My Contact"  TargetPortal="EMPLOYEE" Type="Folder" isVirtual="False">
<NavItem Label="Phone" Name="ADMN_S201312300957415580614642" SequenceNumber="4" isNewWindow="False" isTopWindow="True"/>
<NavItem Label="Email" Name="ADMN_S201312300957415580614642" SequenceNumber="4" isNewWindow="False" isTopWindow="True"/>
</NavItem>

这是我的XSLT代码

<div id="accordian">
<xsl:if test="position() mod 5 = 0">
    <h3 title="{@Description}" id="check1">
        <!--<img src="{$imgSrc}" />-->
        <xsl:value-of select="@Label"/>
    </h3>
</xsl:if>

<xsl:if test="position() mod 5 = 1">
    <h3 title="{@Description}" id = "check2" >
        <!--<img src="{$imgSrc}" />-->
        <a href="#" style="color:white;text-decoration:none;"><xsl:value-of select="@Label"/></a>
    </h3>
</xsl:if>

</div>
<div id="test1">
  <xsl:apply-templates select="./NavItem[@Type='Folder' and @SequenceNumber]"/>
  <xsl:apply-templates select="./NavItem[@Type='Shortcut']"/>
  <xsl:apply-templates select="./NavItem[@Type='Folder' and not(@SequenceNumber)]"/>
</div>

这是我的CSS

 #<xsl:value-of select="$selector"/> h3,  #<xsl:value-of select="$selector"/> 
       {

        width:200px;
        font-family:calibri;
        white-space:nowrap;
        background-color:#f2f2f2;
        font-size:15px;         
        padding:5px;
        margin:3px;
        text-decoration:none;

       }
      #<xsl:value-of select="$selector"/> div a {
        display: none;
        text-decoration: none;
        width:270px;
        padding:5px;
        margin:3px;
        font-family:calibri;
        color:white;
        white-space:nowrap;
        background-color:#f2f2f2;
        font-size:15px;
        letter-spacing:1px;

      }
      #<xsl:value-of select="$selector"/> div a:hover {
        text-decoration: none;
        background-color:#d2d2d2;
      }
    #check1
    {
        background:url('blue_1.png') repeat-x center; 
        font-family:Calibri !important;
        font-size:14px !important;
        color:white;
        letter-spacing:2px;
        padding:5px;
        height:22px;            
        vertical-align:middle;
    }
    #check2
    {
        background:url('pink_2.png') repeat-x center; 
        font-family:Calibri !important;
        font-size:14px !important;
        color:white;
        letter-spacing:2px;
        padding:5px;
        height:22px;            
        vertical-align:middle;
    }

请帮助我如何申请Jquery Accordian。

1）我的信息 2）我的联系

当用户点击第一个我的信息

时

在子手风琴菜单中，这些是值个人信息＆amp;邮寄地址

当用户点击第二个手风琴菜单我的联系人时在子手风琴菜单中，这些是值电话＆amp;电子邮件。

很抱歉这个长问题。

请帮助我如何将Jquery手风琴应用于上面的代码

谢谢＆amp;问候 Mahadevan

Answer 1

你看过http://jqueryui.com/accordion/吗？

将XSL代码更改为：

<div id="accordion">
<xsl:if test="position() mod 5 = 0">
    <h3 title="{@Description}" id="check5">
        <!--<img src="{$imgSrc}" />-->
        <xsl:value-of select="@Label"/>
    </h3>
</xsl:if>

<xsl:if test="position() mod 5 = 1">
    <h3 title="{@Description}" id = "check1" >
        <!--<img src="{$imgSrc}" />-->
        <a href="#" style="color:white;text-decoration:none;"><xsl:value-of select="@Label"/></a>
    </h3>
</xsl:if>
</div>

将以下内容添加到标题中：

<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
</script>

将Jquery Accordion应用于XML标记

1 个答案: