Tag Archives: XSLT

XSLT og jQuery Sýnishorn

2 Svör

Ég hef verið að gera mikið af af XSLT og jQuery og hélt ég myndi deila sýnishorn sem aðrir geta fundið gagnlegar í framtíðinni.

Dæmi 1: Senda frá sér einfalda JavaScript / jQuery í XSLT:

<XSL:Snið passa = "eitthvað" XML:rúm = "varðveita">

  <!– Núllstillt út fyrirspurn vingjarnlegur síur falinn sviði –>
  <handrit type = "text / javascript">
    $(skjal).tilbúinn(virka(){
      $("# QueryFriendlyFilters").Val("Tóm");
    });
  </handrit>

</XSL:sniðmát>

Það bita gefur frá sér smá JavaScript sem bíður fyrir the blaðsíða til ljúka lestun (vegna þess að $(skjal).tilbúinn(...)) og þá setur gildi falinn sviði heitir QueryFriendlyFilters í bókstaflegri gildi "tómur".

Dæmi 2: Nota <XSL:ef> til að athuga með "meira en",  "Minna en", o.fl..

<XSL:Snið passa = "eitthvað" XML:rúm = "varðveita">

  <div id = "fdcAllFilters">
 
    <XSL:Ef próf = "@ Count>0">
      <span class = "fdcFilterLabel">Núverandi síur:</span>
    </XSL:ef>

    <!– meira dót gerist hér. –>

</XSL:sniðmát>

Hér að ofan seðillinn ávísanir til að sjá hvort eiginleiki sem heitir "Count" á "eitthvað" þáttur er meiri en núll.  XML bak við þetta væri eitthvað eins og:"

<eitthvað Count = "5" />

Dæmi 3: Iterate gegnum alla þætti, interspersing jQuery símtöl.

<!– Iterate í gegnum allar síur og sýna rétt  tenglar. –>
<XSL:fyrir-hvern Veldu = "UserFilter">

  <a class = "FilterHref" href = "javascript:mySubmitPage(‘RemoveUserFilter’,"{@ ID}")">[X]</a>

  <span class = "fdcFilterLabel"><XSL:gildi-af select = "@ FilterValue" /></span>

  <handrit type = "text / javascript">

    $(skjal).tilbúinn(virka(){
        <XSL:texta><![CDATA[$("# QueryFriendlyFilters").Val( ($("# QueryFriendlyFilters").Val() + " ]]></XSL:texta>\"<XSL:gildi-af select = "@ FilterValue" />\"<XSL:texta><![CDATA["));]]></XSL:texta>
    });

  </handrit>

</XSL:fyrir-hvern>

Hér að ofan seðillinn er flóknasta og það getur verið auðveldara leiðir til að gera það.

XML bak við þetta lítur u.þ.b. svona út:

<UserFilter ID = "123" FilterValue = "xyzzy" />

Þetta seðillinn iterating gegnum <UserFilter> hnúður. 

Það gefur fyrsta akkeri tag sem þegar smellt afturvekur á JavaScript fall sem er nú þegar á síðu, "MySubmitPage" og fer verðmæti eigindi á <UserFilter> hnúturinn heitir "ID". 

Það gefur þá sumir jQuery sem bíður fyrir síðu til að hlaða.  Það jQuery uppfærslur falinn sviði sem heitir "QueryFriendlyFilters" með því að bæta verðmæti FilterValue eiginleiki.  Athugið allar brjálaður <XSL:texta> og <![CDATA[ ... ]]> efni.

Það er það, vona að það hjálpar!

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Endalaust hreiður <div> Tags og jQuery

Skildu eftir skilaboð

Þetta virðist eins og svo Oddball efni, Ég er ekki viss um að það er virkilega þess virði að blogga um, en það er aldrei hætt mér áður, svo hér við fara bros

Ég er að vinna út á verkefni þar sem ég draga nokkur gögn úr leit, pökkun upp í XML skeyti og þá sem XML er á endanum breytt í HTML með XSLT.  Það er mikið af jQuery þátt, einn bita sem útfærir sumir tabbing virkni.  Þegar þú smellir á flipa (í raun, a <div>), jQuery vekur. fela() og. sýna() á ýmsum divs (fyrstu síðu hlaða niðurhal allt það efni þannig að það eru engar postbacks í þessu tilfelli).

A fullt af klukkustundum, flipann skipta rökfræði byrjaði að hegða sér erratically og það myndi ekki sýna einn af tabs mínum.  Ég fylgst lokum það niður til þess að Internet Explorer (að minnsta kosti) hélt að <div> merki hreiður langt, langt dýpra en intended.The verktaki tækjastika myndi sýna:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Að lokum sýnir það var lokað alla leið niður hér!

Svo, ef ég gerði fyrir $("# Tab1Content").fela(), Ég vil einnig fela Tab2 og ég gæti aldrei sýnt Tab2 ef ég ekki líka að sýna Tab1.  Ég afrita og líma kóðann upp í Visual Studio og það sýndi allt fóður div er allt fallega, bara eins og þeir áttu að vera að gera, útlit eins og this:

-<div id = "Tab1Content">
  +<div>
  +<div>
-<div id = "Tab2Content">
  +<div>
  +<div>

Ég vann höfuð mitt gegn vegg fyrir a á meðan og eftir að í raun HTML kóða var að búa til mikið af tómur <div> merki, eins og:

<líkami>

  <div id = "Tab1Content">

    <div id = "row1" />
    <div id = "row2" />

  </div>

  <div id = "Tab2Content">

    <div id = "row1" />
    <div id = "row2" />

  </div>

</líkami>

(Hér að ofan er waaaaaaaaaaaay yfir einfaldað.  Tóma tags div eru algerlega gildi. Sumir af mínum <div> merki voru full af efni, en margir fleiri voru ekki.  Ég kom til að átta sig á að mínar <XSL:fyrir-hvern> tilskipanir voru emitting skammtíma-mynda div tög þegar XSL:fyrir-hvern ekki "fundið nein gögn.  Ég neyðist HTML stendur í framleiðslu, eins og sýnt:

image

 

Eftir að ég gerði það, allt div er raðað upp fallega og flipi rofi minn byrjaði að vinna.

Eins og alltaf, Ég vona að þetta hjálpar einhverjum í klípa.

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Dæmi: XSLT Búa HTML href er

1 Svara

Ég hef verið að gera svolítið af XSL efni undanfarið og hélt að ég myndi setja saman sýnishorn fyrir framtíð tilvísun minn og sem kunna að vera í gildi til okkar allra XSLT-ers að gera líf í internets.

Skoðið eftirfarandi XML:

<FdcSearchTabsCollection Count="2">
  <SearchTab Label="Industry" SortOrder=”00” Label=”Industries” SearchConstraints="contenttype:Iðnaður" TabID="831b2a74-98c4-4453-8061-86e2fdb22c63"/>
  <SearchTab Label="Practices" SortOrder=”01” Label=”Practices” SearchConstraints="contenttype:PracticeGroups" TabID="678e206b-6996-421f-9765-b0558fe1a9c0"/>
</FdcSearchTabsCollection>

The Eftirfarandi XSL runu vilja búa til raðað lista yfir hrefs tabs:

<XSL:template match="FdcSearchTabsCollection" XML:rúm = "varðveita">
   
    <!– The "all" flipi –>
    <a href="javascript:ViewTab(‘All’)">Skoða allt</a>
   
    <!– Hver einstaklingur flipann –>
    <!– Iterate í gegnum allar Tabs og sýna rétt  tenglar. –>
    <XSL:for-each select="SearchTab">
      <XSL:sort select="@SortOrder"/>

      …
      <a href="javascript:ViewTab('{@ TabID}")"><XSL:value-of select="@Label"/></a>
    </XSL:fyrir-hvern>

    <br /> 
   

   </XSL:sniðmát>

Hér er það sem það lítur út eins og í SharePoint:

SNAGHTML78aa2cb

 

 

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin