점프 목록에 동적으로 항목 추가

점프 목록에 동적으로 항목 추가

사용자 지정 점프 목록 범주 만들기 작업에서, 사용자 지정 점프 목록 범주를 만들고 보여 주는 방법을 배웠습니다. 이 작업에서는 점프 목록에 동적으로 항목을 추가합니다.

참고  사용자 지정 점프 목록 범주는 주로 시간에 따라 변경되는 작업을 위해 디자인되었습니다. 고정된 사이트 바로 가기가 설치되어 있으면 자주 변경되지 않는 미리 정의된 작업을 만들 수 있습니다. 자세한 내용은 점프 목록에 작업 추가를 참조하세요.
 

이 작업에서 사용되는 메서드

이 항목에서 소개되는 메서드는 다음과 같습니다.

msSiteModeAddJumpListItem(bstrName, bstrActionUri, bstrIconUri [, bstrWindowType])

window.external.msSiteModeAddJumpListItem 메서드는 사용자 지정 점프 목록 범주에 동적으로 항목을 추가합니다.

msSiteModeShowJumpList()

window.external.msSiteModeShowJumpList 메서드는 사용자 지정 점프 목록에 표시되는 항목을 새로 고칩니다.

점프 목록에 항목 추가

개발자의 경우 사용자 지정 점프 목록 범주를 만들면 사이트에서 자주 사용되는 대상에 빨리 액세스할 수 있습니다. 사용자는 이러한 사용자 지정 범주를 통해 쉽게 이전에 표시된 페이지(기록)로 돌아가거나, 사용자 관련 정보(예: 라디오 방송국)에 액세스하거나, 사이트 조작(예: 쇼핑 목록)을 추적할 수 있습니다. 사용자가 점프 목록에서 사용자 지정 항목을 선택하면 고정된 사이트 창이 해당 항목으로 직접 이동합니다. 기본적으로 사용자 지정 항목은 새 탭에서 열리지만 bstrWindowType 매개 변수에 self를 지정하여 현재 탭에서 링크를 열거나 window를 지정하여 새 고정된 사이트 창에서 링크를 열 수 있습니다.

점프 목록 항목을 추가하려면 먼저 사용자 지정 점프 목록 범주를 만들어야 합니다. 자세한 내용은 사용자 지정 점프 목록 범주 만들기를 참조하세요. 범주 목록을 만든 후 msSiteModeAddJumpListItem 메서드를 호출하여 목록에 항목을 추가합니다. 항목은 스크립트에 표시되는 순서와 반대로 목록의 맨 위에 추가됩니다.

다음 예제에서는 onload 이벤트에 대한 응답으로, 페이지가 로드된 후 즉시 사용자 지정 "My Site" 범주 목록에 작업 두 개가 저장됩니다. 점프 목록에 올바른 순서로 표시되도록 Task2가 Task1보다 먼저 정의됩니다.


var g_ext = null;
window.onload = function()
{
    try {
        if (window.external.msIsSiteMode()) {
            g_ext = window.external;
            g_ext.msSiteModeCreateJumpList("My Site");
            g_ext.msSiteModeAddJumpListItem(
                "Task2", "/users/44324847/task2", "img/icon.ico");
            g_ext.msSiteModeAddJumpListItem(
                "Task1", "/users/44324847/task1", "img/icon.ico");
        }
    }
    catch (ex) {
        // Fail silently.
    }
}


점프 목록의 항목은 고정된 사이트를 닫은 후에도 표시됩니다. 메타데이터를 통해 정의하는 사이트 작업과 마찬가지로 동적 항목은 웹 사이트 바로 가기로 작동할 수도 있습니다. 하지만 동적 항목이 응용 프로그램 상태에 따라 달라지는 경우에는 사이트를 닫으면 항목이 유효하지 않습니다. 필요한 경우 응용 프로그램 상태 없이 탐색할 수 있도록 점프 목록의 링크에 충분한 정보가 포함되어 있어야 합니다.

참고  사용자 지정 점프 목록 범주는 응용 프로그램 상태 또는 현재 웹 페이지와는 별도로, 현재 사용자에 대한 동적 대상 집합을 제공해야 합니다. 점프 목록의 항목이 웹 사이트의 의도에 맞고, 고객 요구를 해결하며, 도움이 될만한 충분한 세부 정보를 포함하는지 확인하세요.
 

사용자 지정 점프 목록 범주에는 최대 20개 항목이 포함될 수 있지만 기본적으로 목록의 마지막 10개 항목만 표시됩니다. 표시되는 점프 목록 항목 수는 궁극적으로 작업 표시줄에 의해 제어됩니다.

작업 표시줄의 기본 설정을 변경하려면

  1. 시작 메뉴를 마우스 오른쪽 단추로 클릭한 다음 속성을 클릭합니다.
  2. 시작 메뉴 탭에서 사용자 지정 단추를 클릭하여 시작 메뉴 사용자 지정 대화 상자를 엽니다.
  3. 점프 목록에 표시할 최근 항목 수 옵션을 요구에 맞는 수로 변경합니다.
  4. 확인을 클릭하여 대화 상자를 닫습니다.

필요할 때 점프 목록 항목 업데이트

이전 섹션에서는 onload 이벤트 중에 사용자 지정 점프 목록 범주를 업데이트했습니다. 고정된 사이트 API는 이때 수행된 점프 목록 변경 내용을 수락하도록 디자인되었지만 점프 목록에 대한 이후 변경 내용이 자동으로 표시되지 않습니다. 예를 들어 사용자 작업이나 사이트 구성으로 인해 페이지가 로드된 후 점프 목록에 항목을 추가하는 경우 msSiteModeShowJumpList 메서드를 호출하여 이러한 변경 내용을 점프 목록에 써야 합니다.

다음 스크립트는 단추 클릭에 대한 응답으로 실행됩니다. 이전 섹션의 코드 예제에서 설정된 전역 변수를 사용하여 코드가 간소화되었습니다.


function buttonClick()
{
    if (g_ext) {
        // Optionally, remove and re-create category.
        g_ext.msSiteModeClearJumpList();
        g_ext.msSiteModeCreateJumpList("My Site");

        // Add items to the Jump List here.
        g_ext.msSiteModeAddJumpListItem(
            "Task4", "/users/44324847/task4", "img/icon.ico");
        g_ext.msSiteModeAddJumpListItem(
            "Task3", "/users/44324847/task3", "img/icon.ico");

        // Show updates to the Jump List.
        g_ext.msSiteModeShowJumplist();
    }
}


다시 방문한 점프 목록 지우기

스크립트에서 추가 중인 항목이 사용자가 제거한 항목의 이름 및 URL과 일치하는 경우 이 항목은 목록에 추가되지 않습니다. 하지만 목록을 지우면 사용자가 제거한 항목에 대한 정보도 모두 지워지며 사이트에서 제거된 항목을 다시 만들 수 있습니다.

참고  점프 목록을 업데이트하는 것 외에도 msSiteModeShowJumpList 메서드는 msSiteModeShowJumpList 메서드가 마지막으로 호출된 후 사용자가 제거한 각 항목에 대해 한 번씩 onmssitemodejumplistitemremoved 이벤트를 발생시킵니다. msSiteModeClearJumpList를 호출하는 경우에는 이 이벤트가 발생하지 않습니다.
 

목록 지우기는 선택 사항이며, 사용자 선택을 적용하려는 경우 목록을 지우면 안 됩니다.

요약

TweetFeed 예제 응용 프로그램은 이전 검색 결과를 포함할 사용자 지정 점프 목록 범주를 만듭니다. 사용자가 링크를 클릭하면 사이트에서 다시 검색을 실행합니다. 이렇게 하려면 사이트가 실행 중이 아닌 경우에도 검색을 반복할 수 있도록 링크에 충분한 정보가 포함되어야 합니다. 다음 예제 코드는 이 작업을 수행하는 방법을 보여 줍니다.


tweetQuery = document.getElementById("txtSearch").value;
if (tweetQuery.length > maxTweetSize) {
    tweetQuery = tweetQuery.substr(0, maxTweetSize);
}

try {
    if (window.external.msIsSiteMode()) {
        var itemURL = "http://" + window.location.host 
                       + window.location.pathname 
                       + "?tweet=" + escape(tweetQuery);
        window.external.msSiteModeAddJumpListItem(
                       tweetQuery, itemURL, 
                       "http://twitter.com/favicon.ico");
        window.external.msSiteModeShowJumplist();
    }
}
catch (e) {
    // Fail silently.
}


코드 예제에서는 다음 단계를 수행합니다.

  1. 양식 필드에서 쿼리를 읽습니다.
  2. 검색 쿼리를 반복하는 데 사용할 수 있는 URL을 생성합니다.
  3. 마지막으로 msSiteModeAddJumpListItem 메서드를 호출하여 URL을 점프 목록에 추가하고, msSiteModeShowJumpList 메서드를 호출하여 목록을 업데이트합니다.

다음 단계

이 시나리오를 마쳤습니다. TweetFeed 예제 응용 프로그램이 아이콘 오버레이를 사용하여 작업 표시줄 단추에 사이트 활동을 시각적으로 나타내는 방법을 알아보려면 TweetFeed 샘플: 알림 시나리오로 계속 진행하세요.

추가 예제

이 섹션에서는 미국 내 일부 인기 웹 사이트에서 사용자 지정 점프 목록 범주를 사용하여 Windows Internet Explorer 9의 사용자 환경을 어떻게 개선했는지를 보여 줍니다.

Amazon.com

Amazon.com 점프 목록에는 작업과 즐겨찾기가 포함되어 있습니다.

Amazon.com은 작업(동사)과 대상(명사)을 효율적으로 구분합니다. 페이지가 로드되는 동안 사용자 지정 점프 목록 범주가 만들어지기 때문에 msSiteModeShowJumpList 메서드는 필요하지 않습니다. 항목은 점프 목록에 표시되는 순서와 반대로 추가됩니다.


<script type='text/javascript'>
try {
window.external.msSiteModeCreateJumplist('Amazon Favorites');
window.external.msSiteModeAddJumpListItem 
    ('Amazon Wish List' , 
     'http://www.amazon.com/wishlist?tag=amzn-ie9-jl-wl-20',
     'http://www.amazon.com/favicon.ico');
window.external.msSiteModeAddJumpListItem 
    ('Amazon Prime' ,
     'http://www.amazon.com/gp/prime?tag=amzn-ie9-jl-prm-20',
     'http://www.amazon.com/favicon.ico');
// ...

} catch (ex) {
}
</script>


HuffingtonPost.com

HuffingtonPost.com 점프 목록 범주의 스크린샷

HuffingtonPost.com에서는 사용자 지정 동적 점프 목록을 사용하여 오늘의 주요 뉴스를 표시합니다.

관련 항목

작업
점프 목록에 작업 추가
사용자 지정 점프 목록 범주 만들기
개념
배지 알림, Windows 8 고정된 사이트에 직접 표시
새로운 트윗 2.0 - Windows 8용 데모
Windows 8의 고정된 사이트를 위한 고품질 시각 효과
동적 점프 목록을 만드는 방법
고정된 사이트 소개
고정된 사이트
Windows 8의 고정된 사이트

 

 

표시:
© 2016 Microsoft