Tag Archives: jQuery

XSLT와 jQuery 예제

XSLT와 Jquery와 다른 미래에 유용 하 게 찾을 수 있습니다 몇 가지 단편을 공유 하는 것 이라고 생각 많이 하고있다.

예제 1: 간단한 자바 스크립트를 방출 / XSLT에 jQuery:

<xsl:템플릿 일치 "뭔가 =" xml:공간 = "preserve">

  <!– 빈 쿼리 친화적인 필터 숨겨진 필드 –>
  <스크립트 유형 = "텍스트/자바 스크립트">
    $(문서).준비(함수(){
      $("#QueryFriendlyFilters").발("빈");
    });
  </스크립트>

</xsl:서식 파일>

그 비트 페이지 로딩 완료를 기다리는 몇 가지 Javascript를 방출 (때문에 $(문서).준비(…)) 다음 설정 숨겨진된 필드의 값 이름 QueryFriendlyFilters "empty" 리터럴 값을.

예제 2: 사용 <xsl:만약> "보다 큼" 확인 하려면,  "보다 작음", 등.

<xsl:템플릿 일치 "뭔가 =" xml:공간 = "preserve">

  <div id = "fdcAllFilters">
 
    <xsl:만약 test="@Count>0">
      <클래스를 스팬 = "fdcFilterLabel">현재 필터:</범위>
    </xsl:만약>

    <!– 더 많은 물건을 여기 발생. –>

</xsl:서식 파일>

위의 코드는 "뭔가" 요소 "개수" 라는 특성이 0 보다 큰 경우 확인 합니다.  이 뒤에 XML 처럼 뭔가 있을 것 이라고:”

<뭔가 Count = "5" />

예제 3: 모든 요소를 반복, jQuery 호출 interspersing.

<!– 모든 필터를 통해 반복 하 고 올바른 표시  링크. –>
<xsl:에 대 한 각 선택 = "UserFilter">

  <클래스 = "FilterHref" href = "자바 스크립트:mySubmitPage(' RemoveUserFilter','{@ ID}’)">[X]</는>

  <클래스를 스팬 = "fdcFilterLabel"><xsl:값의 select="@FilterValue"/></범위>

  <스크립트 유형 = "텍스트/자바 스크립트">

    $(문서).준비(함수(){
        <xsl:텍스트><![CDATA[$("#QueryFriendlyFilters").발( ($("#QueryFriendlyFilters").발() + " ]]></xsl:텍스트>\"<xsl:값의 select="@FilterValue"/>\"<xsl:텍스트><![CDATA["));]]></xsl:텍스트>
    });

  </스크립트>

</xsl:각각에 대 한>

위의 코드는 가장 복잡 하 고 그것을 더 쉬운 방법이 있을 수 있습니다..

이 뒤에 XML 같은 약이:

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

이 코드 조각은 반복 <UserFilter> 노드입니다. 

먼저 앵커를 방출 하는 태그를 클릭 하면 페이지에 이미 있는 JavaScript 함수를 호출, "mySubmitPage" 있는 특성의 값을 전달 합니다 <UserFilter> 노드 "ID" 라는입니다. 

다음 페이지가 로드 될 때까지 대기 하는 일부 Jquery를 내보냅니다.  그 jQuery FilterValue 속성의 값을 추가 하 여 "QueryFriendlyFilters" 라는 숨겨진된 필드를 업데이트 합니다.  참고 모든 미친 <xsl:텍스트> 그리고 <![CDATA[ … ]]> 물건.

그건, 희망은 도움이 됩니다!

</끝>

내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin

Lists.asmx, GetListItems 및 폴더

Sharepoint의 일환으로 제공 하는 list.asmx 웹 서비스 오늘 주위 사람에 대 한 몇 가지 연구 있었는데 2010 (이전 버전).  그녀는 루트 폴더에서 목록 항목을 얻을 수 있었습니다. (하위 폴더의 이름을 포함 하 여), 하지만 하위 폴더에서 항목을 가져올 수 없습니다.  일부 internets에 구경을 했 고 그것은 놀라울 정도로 공통 질문 이다.  아직, 간단한 질문에 좋은 답변을 얻을 수 없습니다., 폴더를 알고 있는 경우 ", 폴더에 항목을 얻을 하는 방법?”  솔직히 말해서, 이후 한 동안 내 자신에 밖으로이 하나 내려고 싶었던 난을 모두 열심히 시도 하지 않았다 미소.

이것을 설정 하려면, "블로깅 시나리오" 라고 하는 사이트 및 "사용자 지정 목록 함께 Sub Folders" 라는 사용자 지정 목록을 만들었습니다.  그런 다음 폴더를 생성:

  • 올해 2005
  • 올해 2006
  • 올해 2007

"2006 년" 폴더에 몇 가지 항목을 추가 합니다.  이것은 그것 처럼 보이는:

image

내 친구는 C# 코드 작성 아니지만 오히려 자바를 사용 하 여, 그래서 SOAP 봉투 그녀가 정말로 필요 했다.  그, Jquery의 비트를 작성 하 고 fiddler를 사용 하는 실제 HTTP 대화.

여기 관련 jQuery입니다. (복사 코드 아래로 아래 복사/붙여넣기를 하는 경우):

image

그들은 둘 다 포함 하는 첫 번째 키를 <queryOptions> 그리고 <QueryOptions> 노드입니다.  두 번째 키는 그는 <폴더> 노드는 클라이언트는 액세스할 수 있는 URL.

이 다른 방법이 있을 수 있습니다., 하지만이 나를 위해 잘 일했다 Jquery를 사용 하는 경우.

여기는 위의 대 한 SOAP 봉투:

<soapenv:봉투 xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’>                
  <soapenv:바디>
    <GetListItems xmlns =’
http://schemas.microsoft.com/sharepoint/soap/’>
      <listName>하위 폴더를 사용 하 여 사용자 지정 목록</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef 이름 =' 제목’ />
          <FieldRef 이름 ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <폴더>
http://demoserver1/블로그 사용자 정의 시나리오/목록/목록 하위 폴더/Year 2006</폴더>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:바디>
</soapenv:봉투>

예제와 주변이 토론을 많이 모든 필요는 믿고 나를 이끌고 <QueryOptions> 폴더 이름을 지정 하 고 있습니다.  나를 위해, 내가 필요 모두 래핑 내부 <queryOptions> 뿐만 아니라에 대 한 정규화 된 URL을 지정 합니다 <폴더> 노드.

여기 jQuery AJAX 설정이입니다.:

$(문서).준비(함수() {
       var soapEnv =
           "<soapenv:봉투 xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’> \
               <soapenv:바디> \
                    <GetListItems xmlns =’http://schemas.microsoft.com/sharepoint/soap/’> \
                       <listName>하위 폴더를 사용 하 여 사용자 지정 목록</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef 이름 =' 제목’ /> \
                              <FieldRef 이름 ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <폴더>http://demoserver1/Blogging 사용자 정의 시나리오/목록/목록 하위 폴더/Year 2006</폴더> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:바디> \
           </soapenv:봉투>";

</끝>

내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin

끝없이 중첩 <div> 태그와 jQuery

이것은 같은 괴짜 주제 처럼 보인다, 그것은 정말 블로깅에 대 한 가치가 있는지 아니에요, 하지만 저 전에 중단 적이 있다, 그래서 여기에 우리가 간다 미소

검색에서 몇 가지 데이터를 당기 거 나 프로젝트에 밖으로 일하고 있어요, XML 메시지 그리고 그 XML 포장 궁극적으로 XSLT 통해 HTML로 변환 됩니다.  포함 된 jQuery 많이 있다, 1 비트의 일부 탭 이동 기능을 구현합니다.  탭을 클릭할 때 (정말, 는 <div>), jQuery 호출 숨기기() 그리고.show() 다양 한 div에 (그래서 아무 포스트백이 경우에 모든 콘텐츠를 다운로드 하는 초기 페이지 로드).

전 무리, 탭 전환 논리 이상 하 게 동작 하기 시작 하 고 그것은 내 탭 중 하나를 표시 하지 않을.  내가 궁극적으로 추적 그것 사실 아래는 인터넷 익스플로러 (적어도) 생각 하는 <div> 지금까지 중첩 된 태그, 의도 보다 훨씬 더 깊은.개발자 도구 모음 표시:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <-마지막으로 보여주는 폐쇄 되었습니다 모든 방법 여기!

그래서, 만약 내가 한 $("#Tab1Content").숨기기(), 나 또한 Tab2 숨길 것이 고 내가 결코 보여 Tab2 나 또한 Tab1 표시 하지 않았다.  복사 하 고 붙여넣은 코드 visual studio와 모든 div의 일렬로 늘어선 멋지게 보여 그것은, 마찬가지로 그들은 일을 했는데, 이 처럼 보이는:

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

잠시 동안 벽에 내 머리를 이길 하 고 실제 html에서 코드 빈을 많이 생성 됐다 것으로 나타났습니다. <div> 태그, 같은:

<바디>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</바디>

(너무 간략하게 waaaaaaaaaaaay 위 이다입니다.  빈 div 태그는 완전히 유효. 일부 내 <div> 태그 된 콘텐츠 전체, 하지만 더 많은 했다.  실현에와 서는 내 <xsl:각각에 대 한> 지시문 짧은 형태로 방출 했다 div 태그 때 xsl:에 대 한 각 하지 않았다 ' 어떤 데이터를 찾을 합니다.  출력에는 HTML 주석을 강제, 같이:

image

 

후 내가 그 랬 어, 모든 div 멋지게 늘어서 고 일 하기 시작 했다 내 탭 전환.

언제나 처럼, 이 핀치에 누군가가 도움이 희망.

</끝>

내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin

아직 더 많은 jQuery–크기 조정 이미지 예

클라이언트의 오래 된 공급 업체에서 웹 파트를 상속 하 고 이미지 크기 문제.  이미지 60 되어야 합니다.×50 하지만 어떤 이상한 이유로, 원래 공급 업체 42에 그들을 강제로×42, 그래서 그들은 찌그러져 보이는:

 

좋은 이미지

나쁜 이미지

여기 태그가입니다. (다소 단순화):

<클래스 표 ' 확장 outlook'=>
  <thead>
    <tr>
      <th  폭 = 100'′>3 화요일</th>
    </tr>
  </thead>

  <tbody>
    <tr 클래스 '예측' =>
      <td 폭 = 100'′>
        <ul>
          <리 클래스 '높은' =>높은: 72&deg;F</리>
          <리 클래스 '낮은' =>낮은: 44&deg;F</리>
          <리 클래스 = '조건'>써니
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ 너비 ='42’ 높이 ='42’ alt =” />
          </리>
        </ul>
      </td>
    </tr>

  </tbody>

</테이블>

비록 유의 거는 이미지 자체에 대 한 경로 적절 한 치수를 보여 줍니다. (60×50) 원래 공급 업체 42에 강제×42.  왜?  미친.

어쨌든, 이 문제에 빠르고 쉬운 솔루션을 원했습니다 및 jQuery 밝혀졌다.  트릭은 모든 적절 한을 찾을 수 <img> 태그입니다.  다른 img 태그에 대해 정처 없이 헤매 다 싶지 않 았 어 (많습니다.).  JQuery의이 비트는 목적을 달성을 했다:

<스크립트 유형 = "텍스트/자바 스크립트" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></스크립트>

<스크립트 유형 = "텍스트/자바 스크립트">
     $(문서).준비(함수 () {

         $(' li.condition > 그림 ').각(함수 (인덱스, 항목)
           
{
             $(항목).css("너비", "60"); 
             $(항목).css("높이", "50");
            });
     }); // 문서 로드에
</스크립트>

코드의 그 비트 컬렉션 발견 <리> 태그의 클래스는 "상태"와 <img> 아이 들.  그것은 그때 모든 것을 반복합니다.  마법 처럼 일했다.

아마 그것을 간소화할 수 있습니다., 하지만 난 결코 한 π 해결 유닉스 사람의 종류 받는 사람 18 sed와 awk를 사용 하 여 숫자 정밀도 아니에요 그런 jQuery가 중 하는 경우 미소.

</끝>

내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin

확인 및 취소 단추를 제어하시오

내가 쓴 이 문서 한참, 내가 시간에 내 블로그에서 그것에 연결 하지 않았다 처럼 보이지만, 그래서 여기는 간다:

image

이 문서에서는 강제로 newform.aspx 그녀 취소를 클릭할 때 사용자 확인을 하 고 다른 페이지 클릭 하면 한 페이지에 리디렉션.

</끝>

내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin

빠른 팁: MOSS 게시 페이지에 Jquery를 추가

Jquery를 사용 하 여 모스 publising 페이지를 향상 하는 때, 다음 속도 범프를 했다:

에 서버 오류 ' /’ 응용 프로그램.


파서 오류

설명: 이 요청을 서비스 하는 데 필요한 리소스를 구문 분석 하는 동안 오류가 발생 했습니다.. 다음 특정 구문 분석 오류 정보를 검토 하 고 소스 파일을 적절 하 게 수정 하십시오.

파서 오류 메시지: 콘텐츠 컨트롤 직접 콘텐츠 컨트롤을 포함 하는 콘텐츠 페이지에에서 허용 되는.

소스 오류:

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

소스 파일: /_catalogs/masterpage/KCC_FacultyMember.aspx    라인: 12


버전 정보: Microsoft.NET Framework 버전:2.0.50727.4927; ASP.NET 버전:2.0.50727.4927

그것은 충분히 쉽게 해결 (내 동료에 게 h/t, 우다 Ethirajulu).  와 같이 jQuery 코드 "PlaceHolderAdditionalPageHead" 안으로 살고 다는 것을 반드시:

<asp:ContentPlaceholderID 콘텐츠 "PlaceHolderAdditionalPageHead =" runat = "server">

<스크립트

    유형 = "텍스트/자바 스크립트"

    src="/jQuery/jquery-1.4.min.js">

</스크립트>

<스크립트 유형 = "텍스트/자바 스크립트">

  $(문서).준비(함수() {

   // 화려한 jQuery 물건 여기가.

   });

</스크립트>

</끝>

내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin