블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'web slice'에 해당되는 글 1건

  1. 2009.11.02 IE8 웹조각(Web Slice) 만들기 5


네트웍이 안되는 특수환경에서 프로젝트를 진행하다 복귀해 보니 최신정보에 상당히 둔감해졌다는 생각이 많이 든다.
그래서 꿈춰두었던 내용들을 살포시 꺼내본다.

Internet Explorer 8 출시 이후  이미 모든 포털에서 웹조각(Web Slice)기능들을  많이들 구현해 놓았는데
혹시나 모르시는 분들이 계실것 같아서 웹조각 만드는 방법에 대해서 공유한다.


최종 HTML소스


결과화면 : 로컬에서 해서 안되서 서버를 띄웠답니다. ㅡ.,ㅡ;





웹조각 추가하기



실제 적용예



웹조각 삭제하기




원본소스 나갑니다.

    <div id="bugslice" class="hslice">
     <div class="entry-title">데꾸벅 웹조각 테스트 제목</div>
     <div class="entry-content">
         웹조각 내용이 들어가는곳입니다.<br />
         .entry-title을 display:none이나 화면에 필요한걸로 바꾸면 되겠죠<br />
         <!--[if gte IE 7]>IE8에서 되는기능이므로 로도 처리해 되겠죠<![endif]-->
         아이디값은 나중에 버튼으로 추가하려면 좋아요~
        </div>
    </div> 


<html>
<head>
<title>Web Slice Example</title>
</head>
<body>
   <div class="hslice" id="SliceID">
      <span class="entry-title">Slice Title</span>
      <a rel="entry-content" href="http://techbug.tistory.com/" style="display:none;">
        실시간 웹조각 컨텐츠
      </a>
 
      <a rel="bookmark" href="http://techbug.tistory.com/" style="display:none;">북마크할때</a>
      <a href="http://techbug.tistory.com/" target="_blank">웹조각의 링크를 다른창으로 열때</a>
      <span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때</span>
   </div>
</body>
</html>











이벤트핸들러로 달기

<input type="button" value="웹조각 추가"  
       onclick="external.AddToFavoritesBar('http://localhost/webSlice.html#bugslice','설명','slice')" /> 


DIV대신 a태그 사용시 (웹조각에서 보여줄 페이지 지정하기)

<a rel="entry-content" href="http://techbug.tistory.com"> </a>


<div class="hslice" id="아이디값">
    <span class="entry-title">링크로처리할때</span>
    <a rel="entry-content" href="링크주소.html" style="display:none;"></a>
</div>

Feed용

<a rel="feedUrl" href=http://techbug.tistory.com/script/powerEditor/pages/">

<div class="hslice" id="아이디값">
    <span class="entry-title">링크로처리할때</span>
    <a rel="feedurl" href="피드주소.html" style="display:none;"></a>
</div>


북마크용

<div class="hslice" id="아이디값">
    <span class="entry-title">링크로처리할때</span>
    <a rel="bookmark" href="북마크.html" style="display:none;"></a>
</div>



웹조각 아이콘 바꾸기


원래의 웹조각 아이콘을 바꾸는 방법입니다. 기존 파비콘(favicon)을 바꾸는 방법과 마찬가지로 아래와 같은 방법으로 바꿀수 있습니다.

<link
    rel="default-slice"
    type="application/x-hatom"
    href="#웹조각아이디값" />




웹조각기능끄기
이미지툴바기능끄기와 같은 방법으로 웹조각 기능끄기 태그는 아래와 같습니다.

<meta name="slice" scheme="IE" content="off"/>



웹조각캐쉬없애기  (다음글을 참조하세요)

<span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때쓰기</span>











파이억폭스에서도 IE의 웹조각기능 사용하기
Firefox용 플러그인 WebChunks 3.5에서도 되네요
IE8에 새로 도입되는 WebSlices 기능을 파이어폭스에서 구현한 확장기능입니다.
툴바에서 Webslices 기능이 지원되는 사이트의 업데이트를 보기 좋게 확인 할 수 있습니다.
다운로드
    
 











다음글도 참조하세요 :




즐코딩하시길... 간만에 데꾸벅이였습니다.









Post by 넥스트리소프트 데꾸벅(techbug)
, |