Archifau Tagiau: jQuery

XSLT a Samplau jQuery

Rwyf wedi bod yn gwneud llawer o o XSLT a jQuery a meddwl y byddwn i'n rhannu pytiau ychydig y gallai eraill fod yn ddefnyddiol yn y dyfodol.

Enghraifft 1: Allyrru JavaScript syml / jQuery yn XSLT:

<XSL:templed cyfatebol = "rhywbeth" xml:gofod = "cadw">

  <!– Blank allan y maes hidlwyr ymholiad gyfeillgar cudd –>
  <sgript math = "testun/javascript">
    $(dogfen).barod(swyddogaeth(){
      $("#QueryFriendlyFilters").val("gwag");
    });
  </sgript>

</XSL:templed>

Ychydig yn allyrru rhai sy'n aros JavaScript ar gyfer y dudalen i orffen llwytho (oherwydd y $(dogfen).barod(...)) ac yna gosod y gwerth o gae cudd a enwir QueryFriendlyFilters i'r gwerth llythrennol "gwag".

Enghraifft 2: Defnyddio <XSL:os> i wirio "yn fwy na",  "Llai na", ac ati.

<XSL:templed cyfatebol = "rhywbeth" xml:gofod = "cadw">

  <DIV id = "fdcAllFilters">
 
    <XSL:Os test="@Count>0">
      <rhychwantu dosbarth = "fdcFilterLabel">Hidlwyr cyfredol:</span>
    </XSL:os>

    <!– mwy o bethau yn digwydd yma. –>

</XSL:templed>

Mae'r snippet uchod yn gwirio i weld os yw priodoledd o'r enw "Cyfrif" y "rhywbeth" elfen yn fwy na sero.  Byddai'r XML tu ôl i hyn fod yn rhywbeth fel:"

<rhywbeth Cyfrif = "5" />

Enghraifft 3: Ailadrodd trwy'r holl elfennau, thraw galwadau jQuery.

<!– Ailadrodd drwy'r holl hidlwyr ac yn arddangos y cywir  cysylltiadau. –>
<XSL:= dethol ar gyfer-pob un "UserFilter">

  <dosbarth = "FilterHref" href = "javascript:mySubmitPage('RemoveUserFilter','{@ ID}')">[X]</1>

  <rhychwantu dosbarth = "fdcFilterLabel"><XSL:gwerth o select="@FilterValue"/></span>

  <sgript math = "testun/javascript">

    $(dogfen).barod(swyddogaeth(){
        <XSL:testun><![CDATA[$("#QueryFriendlyFilters").val( ($("#QueryFriendlyFilters").val() + " ]]></XSL:testun>\"<XSL:gwerth o select="@FilterValue"/>\"<XSL:testun><![CDATA["));]]></XSL:testun>
    });

  </sgript>

</XSL:am-bob>

Mae'r snippet uchod yw'r mwyaf cymhleth ac efallai y bydd ffyrdd haws o wneud hynny.

Mae'r XML tu ôl i hyn yn edrych yn fras fel hyn:

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

Mae hyn yn snippet yn ailadrodd trwy <Hidlo Defnyddiwr> nodau. 

Mae'n allyrru tag angor pan glicio ennyn swyddogaeth JavaScript sydd eisoes ar y dudalen gyntaf, "MySubmitPage" ac yn pasio y gwerth priodoledd ar y <Hidlo Defnyddiwr> nod o'r enw "ID". 

Yna mae'n allyrru rhywfaint o jQuery sy'n aros am y dudalen ei lwytho.  Bod diweddariadau jQuery maes cudd o'r enw "QueryFriendlyFilters" drwy ychwanegu gwerth y briodoledd FilterValue.  Nodwch yr holl crazy <XSL:testun> a <![CDATA[ ... ]]> pethau.

Dyna ni, gobeithio y bydd yn helpu i!

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin

Lists.asmx, GetListItems a Folders

Roeddwn yn gwneud rhywfaint o waith ymchwil i rywun heddiw o amgylch y gwasanaeth we list.asmx a ddarperir fel rhan o SharePoint 2010 (ac yn gynharach).  Roedd hi'n gallu cael yr eitemau rhestr ar y ffolder wraidd (gan gynnwys enwau is-ffolderi), ond ni allai gael eitemau yn is-ffolderi.  I ddim yn rhai edrych o gwmpas ar y internets ac mae'n gwestiwn rhyfeddol o gyffredin.  Eto, Nid oeddwn yn gallu cael ateb da i'r cwestiwn syml, "Os wyf yn gwybod y ffolder, sut ydw i'n cael y eitemau yn y ffolder?"  I fod yn onest, Doeddwn i ddim yn ceisio bob un sy'n caled ers i mi wedi bod eisiau i ffigur hwn allan ar fy mhen fy hun am gyfnod Smile.

I osod hyn i fyny, Yr wyf yn creu safle o'r enw "Senarios Blogio" a rhestr arfer o'r enw "Rhestr Custom gyda Is Folders".  Yna greu ffolderi a enwir:

  • Blwyddyn 2005
  • Blwyddyn 2006
  • Blwyddyn 2007

I ychwanegu ychydig o eitemau at 'r folder "Blwyddyn 2006".  Dyma sut mae'n edrych:

image

Nid yw fy ffrind yn ysgrifennu C # cod, ond yn hytrach gan ddefnyddio Java, felly yr amlen SOAP oedd beth oedd gwir angen.  Er mwyn cael y, Ysgrifennais ychydig o jQuery ac a ddefnyddir wedyn ffidlwr i gael y sgwrs HTTP gwirioneddol.

Dyma y jQuery perthnasol (I gopïo y cod i lawr isod os ydych am gopi / past):

image

Maent yn allweddol cyntaf yw cynnwys ill dau <queryOptions> a <QueryOptions> nod.  Yr ail allweddol yw bod y <Folder> nod yw URL y mae gan y cleient fynediad.

Gall fod ffyrdd eraill o gael y, ond mae hyn yn gweithio'n dda i mi wrth ddefnyddio jQuery.

Dyma'r amlen SOAP ar gyfer yr uchod:

<soapenv:Xmlns Amlen:soapenv =’http://schemas.xmlsoap.org / sebon / amlen /’>                
  <soapenv:Corff>
    <Xmlns GetListItems =’
http://schemas.microsoft.com / sharepoint / sebon /’>
      <Collddail>Rhestr Custom gyda Is-Folders</Collddail>
      <viewFields>  
        <ViewFields>
          <FieldRef Enw = 'Teitl’ />
          <FieldRef Enw = 'EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Folder>
http://demoserver1/Blogging Senarios / rhestrau / Rhestr Custom gyda Is Folders / Flwyddyn 2006</Folder>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Corff>
</soapenv:Amlen>

Mae llawer o enghreifftiau a thrafodaeth o gwmpas hyn fy arwain i gredu bod yr holl ei angen arnaf yn <QueryOptions> ac yn nodi enw ffolder.  I mi, Mae angen i'r ddau lapio y tu mewn i <queryOptions> yn ogystal â nodi URL hollol gymwys ar gyfer y <Folder> nod.

Dyma y setup AJAX jQuery:

$(dogfen).barod(swyddogaeth() {
       Roedd soapEnv =
           "<soapenv:Xmlns Amlen:soapenv =’http://schemas.xmlsoap.org / sebon / amlen /’> \
               <soapenv:Corff> \
                    <Xmlns GetListItems =’http://schemas.microsoft.com / sharepoint / sebon /’> \
                       <Collddail>Rhestr Custom gyda Is-Folders</Collddail> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Enw = 'Teitl’ /> \
                              <FieldRef Enw = 'EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Folder>http://demoserver1/Blogging Senarios / rhestrau / Rhestr Custom gyda Is Folders / Flwyddyn 2006</Folder> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Corff> \
           </soapenv:Amlen>";

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin

Ddiddiwedd nythu <div> Tagiau a jQuery

Mae hyn yn ymddangos fel pwnc mor oddball, Dydw i ddim yn siwr ei fod yn blogio wir werth tua, ond nad ydynt erioed wedi rhoi'r gorau i mi o'r blaen, felly dyma ni Smile

Dw i'n gweithio ar brosiect lle rwy'n tynnu rhywfaint o ddata o chwiliad, becynnu i fyny i mewn neges XML ac yna XML yn cael ei drawsnewid i mewn i HTML yn y pen draw drwy XSLT.  Mae yna lawer o jQuery sy'n ymwneud, un rhan sy'n gweithredu rhai swyddogaethau Tabio.  Pan fyddwch yn clicio ar y tab (mewn gwirionedd, 1 <div>), jQuery ennyn. cuddio() a. yn dangos() ar wahanol divs (y llwyth dudalen gychwynnol lawrlwytho holl gynnwys felly nid oes unrhyw postbacks yn yr achos hwn).

Mae criw o awr yn ôl, dechreuodd y rhesymeg newid tab i ymddwyn erratically ac ni fyddai'n dangos un o fy tabs.  Yr wyf yn y pen draw olrhain i lawr at y ffaith bod rhyngrwyd fforiwr (o leiaf) yn credu bod y <div> tagiau nythu ymhell, Byddai llawer dyfnach na bar offer datblygwr intended.The dangos:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Yn olaf yn dangos iddo gael ei gau yr holl ffordd i lawr yma!

Felly, os Fe wnes i $("# Tab1Content").cuddio(), Hoffwn hefyd guddio Tab2 ac ni allwn ddangos Tab2 os nad oeddwn yn hefyd yn dangos Tab1.  I gopïo a gludo y cod i fyny i mewn stiwdio weledol a dangosodd pob un o'r leinin y div i fyny 'n glws, union fel y maent i fod i fod yn ei wneud, edrych fel hyn:

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

Rwy'n curo fy mhen yn erbyn y wal am ychydig a sylwi bod yn y cod HTML wirioneddol yn cynhyrchu llawer o gwag <div> tagiau, fel:

<corff>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</corff>

(Mae'r uchod yn waaaaaaaaaaaay gorsymleiddio.  Mae'r tagiau div gwag yn gwbl ddilys. Mae rhai o fy <div> tagiau yn llawn o gynnwys, ond nid yw llawer mwy yn.  Deuthum i sylweddoli bod fy <XSL:am-bob> cyfarwyddebau yn allyrru y tagiau div ffurf-fer pan fydd y xsl:ar gyfer pob un-nid oedd 'dod o hyd i unrhyw ddata.  I gorfodi yn sylw HTML i mewn i'r allbwn, fel y dangosir:

image

 

Ar ôl i mi wneud hynny, holl div ei leinio i fyny 'n glws a dechreuodd fy newid tab gweithio.

Fel bob amser, Rwy'n gobeithio y mae hyn yn helpu rhywun mewn phinsied.

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin

JQuery Mwy Eto–Newid Maint 1 Enghraifft Delwedd

Rwy'n etifeddu rhan o we gwerthwr y cleient hen ac mae ganddo broblem delwedd maint.  Dylai'r delweddau fod yn 60×50 ond am ryw reswm od, y gwerthwr gwreiddiol yn eu gorfodi yn 42×42, fel eu bod yn edrych yn gwasgu:

 

Delwedd Da

Delwedd wael

Heres '' r xml (symleiddio braidd yn):

<tabl dosbarth = 'estynedig-rhagolygon'>
  <thead>
    <tr>
      <th  width = '100′>3 Dydd Mawrth</th>
    </tr>
  </thead>

  <tbody>
    <ddosbarth tr = 'rhagolwg'>
      <td width = '100′>
        <st>
          <li class = 'uchel'>Uchel: 72&i chi;F</li>
          <ddosbarth li = 'isel'>Isel: 44&i chi;F</li>
          <li class = 'cyflwr'>Sunny
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ uchder = '42’ alt =” />
          </li>
        </st>
      </TD>
    </tr>

  </tbody>

</tabl>

Byddwch yn nodi, er bod y llwybr i'r ddelwedd ei hun yn dangos y dimensiwn priodol (60×50) y gwerthwr gwreiddiol gorfodi yn 42×42.  Pam?  Crazy.

Beth bynnag, Roeddwn i eisiau ateb cyflym a hawdd at y mater hwn ac yr wyf yn troi i jQuery.  Y gamp oedd i ddod o hyd pob un o'r briodol <img> tagiau.  Doeddwn i ddim eisiau tail am ag unrhyw tagiau img eraill (ac y mae llawer o).  Mae hyn yn dipyn o jQuery wnaeth y tric:

<SGRIPT math = testun/javascript"" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></sgript>

<sgript math = "testun/javascript">
     $(dogfen).barod(swyddogaeth () {

         $(' li.condition > img ').bob(swyddogaeth (mynegai, eitem)
           
{
             $(eitem).css("lled", "60"); 
             $(eitem).css("uchder", "50");
            });
     }); // ar y llwyth ddogfen
</sgript>

Mae hynny'n dipyn o cod dod o hyd i'r casgliad <li> tagiau eu dosbarth yw "cyflwr" ac <img> plant.  Mae wedyn yn ailadrodd trwy hynny i gyd.  Wedi gweithio fel swyn.

Gallwn i yn ôl pob tebyg symleiddio, ond yr wyf byth yn y math o unix guy a datrys π i 18 digid manwl gan ddefnyddio sed a awk ac nid wyf yn fath, os guy jQuery naill ai Smile.

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin

Cymerwch Rheoli eich OK a Diddymu Botymau

Ysgrifennais yr erthygl hon ychydig yn ôl, ond yn edrych fel doeddwn i ddim yn cysylltu ag ef o fy blog ar y pryd, felly dyma fynd:

image

Mae'r erthygl hon yn disgrifio sut i orfodi newform.aspx i ailgyfeirio i un dudalen pan fydd y defnyddiwr yn clicio OK a thudalen gwahanol pan yn clicio canslo.

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin

'N chwim Blaen: Ychwanegu jQuery i MOSS Tudalennau Cyhoeddi

Wrth wella tudalennau MOSS publising ddefnyddio jQuery, Wnes i daro y gwrthdrawiadau cyflymder canlynol:

Gwall gweinydd yn ' /’ Cais.


Gwall gramadegydd

Disgrifiad: Mae gwall wedi digwydd yn ystod y dosrannu o adnoddau sydd eu hangen i wasanaethu y cais hwn. Darllenwch y canlynol manylion dosrannu gwall penodol ac addasu eich ffeil ffynhonnell briodol.

Parser Neges Gwall: Caniateir rheolaethau Cynnwys yn unig yn uniongyrchol mewn tudalen gynnwys sy'n cynnwys rheolaethau Cynnwys.

Ffynhonnell Gwall:

 
Line 10: 
Line 11: 
Line 12: <script 
Line 13:     type="text/javascript" 
Line 14:     src="/jQuery/jquery-1.4.min.js"> 

Ffynhonnell File: /_catalogs / masterpage / KCC_FacultyMember.aspx    Llinell: 12


Gwybodaeth Fersiwn: Microsoft. Fersiwn Fframwaith NET:2.0.50727.4927; ASP.NET Fersiwn:2.0.50727.4927

Roedd yn ddigon hawdd i'w datrys (h / t at fy nghydweithiwr, Uday Ethirajulu).  Byddwch yn siŵr bod y cod jQuery yn byw y tu mewn i'r "PlaceHolderAdditionalPageHead" fel y dangosir:

<asp:Cynnwys ContentPlaceholderID = "PlaceHolderAdditionalPageHead" runat = "gweinydd">

<sgript

    math = testun/javascript""

    SRC="/jQuery/jquery-1.4.min.JS">

</sgript>

<sgript math = "testun/javascript">

  $(dogfen).barod(swyddogaeth() {

   // Stwff jQuery Brilliant yn mynd yma.

   });

</sgript>

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin