총 게시물 62건, 최근 0 건 안내 RSS 글쓰기
이전글  다음글  목록 글쓰기
[강좌]

Html5) LocalStorage를 이용한 Tabs 입니다.

글쓴이 : 집게사장 날짜 : 2013-10-08 (화) 10:48 조회 : 6015
글주소 : http://www.androidside.com/B57/719
 
  영화 매니아라면 oksusu
무료 영화부터 최신 영화까지! 보는 재미가 우수수, oksusu
www.oksusu.com
  안전하고 빠른속도 파일캐스트
언제 어디서나 방송직후 다시보기, 최신영화,TV방송, 애니, 스마트폰 감상
filecast.kr
  애니메이션영화사이트 예스파일
최신영화, TV방송, 애니 무료다운, 웹툰 웹소설 모바일100%지원 애니메이션영화
www.yesfile.co
신청하기




1. 기본 Tabs의 Index를 로컬스토리지를 이용하여, 사용자가 마지막에 사용한 Index를 기억시키고, 화면에 보여줍니다.


기본 Tabs 화면 ::

) 현재 사진이 추가 되지 않아서.. 화면은 나중에 올리도록 하겟습니다.

주요 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//로컬디비 지원 확인
    if(window.localStorage) {
        alert('localStorage가 지원되는 브라우저입니다.');
    } else {
        alert('localStorage가 지원되지 않는 브라우저입니다');
    }
 
// Log 내용
console.log('Log 내용')
 
//Tabs,  Bind Event, UnBind Event
    $( ".selector" ).tabs({
        active: active,
        activate: function( event, ui ) {
            //Event
        }
    });


실제 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Tabs - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        var active="";
        $(document).ready(function(){
 
            //로컬디비 지원 확인
            if(window.localStorage) {
                alert('localStorage가 지원되는 브라우저입니다.');
 
                active = localStorage.activeIdx;
                //if index가 없는 경우
                if(active == undefined){
                    active=1;
                }
 
                $( ".selector" ).tabs({
                    // 로컬 디비에 데이터 있는경우 자동으로 tabs Idx 구성
                    active: active,
                    // 로컬 디비에 tabs 클릭했을 경우 event
                    activate: functionevent, ui ) {
                        // getter Idx
                        active = $( ".selector" ).tabs( "option""active");
                        // 로컬 디비에 idx 저장
                        localStorage.activeIdx = active;
                    }
                });
                console.log('localStorage : 저장 후 : activeIdx : ' + localStorage.activeIdx);
 
            } else {
                alert('localStorage가 지원되지 않는 브라우저입니다');
            }
        });
    </script>
</head>
<body>
<div id="tabs" class="selector">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
    </div>
</div>
 
 
</body>
</html>


확인 방법 : 구글 크롬 > 개발자 도구( F12 ) > 
Resources > Local Storage > 
추가한 데이터 확인 및 마지막 선택한 Index확인



등푸른_망둥어

집게사장 님의 웹(WEB) 최신글 [더보기]


추천/비추천 클릭하면 추천받으신 분, 추천하신 분 모두에게 포인트가 지급됩니다.

크로이스터 2014-11-26 (수) 12:24
요즘 한참 정보를 찾아 줏어담고 있는데..좋은 정보네요...ㅎㅎ
감사합니다.
댓글주소
이전글  다음글  목록 글쓰기

총 게시물 62건, 최근 0 건 안내 RSS
번호 분류 제목 글쓴이 날짜 추천 비추천 조회
62 소스코드
 $scope.page = 0;   $scope.total = 1;   $scope.restaurants = [];   $scope.getRestaurants = function () {     $scop…
조각 08-10 2 0 1271
61 소스코드
감사합니다.
우리큰형님 07-08 3 1 2240
60 강좌
Store에 저장된 Model 객체를 each()메소드로  Model객체당 패널를 하나씩 만드는 방법도 있지만 DataView(Ext.dataview.Dat…
이카루스031 06-02 5 0 3964
59 강좌
Store에 저장할 Model 객체 타입을 정의하고 프록시 Ext.data.proxy.Memory를 사용해서 인라인 데이터를 읽고 인라인 데이…
이카루스031 06-02 3 0 3681
58 강좌
스토어는(Ext.data.Store)는  클라이언트측 데이터 캐쉬 저장소 역할을 한다. Store는 처음 생성될 때만 서버나 HTML5…
이카루스031 06-02 1 0 3554
57 소스코드
페이지 링크 : https://github.com/Flipboard/react-canvas 사용언어 : javascript Introductory blog post Flipboard는 모바일 웹 앱…
카이로 03-18 2 0 4083
56 TIP&TECH
A self-hosted chat app for small teams built by Security Compass. Features and Stuff BYOS (bring your own server) Persistent messages M…
카이로 03-18 3 0 6114
55 TIP&TECH
IO.JS 링크 : https://github.com/iojs/io.js io.js 는 node.js의 커미터들이 대거 이동해서 만든 npm compatible platform 입니다.…
카이로 03-18 1 0 4484
54 TIP&TECH
아래 사이트에서 퍼온 자료입니다. http://blackfrost.blog.me/40210784439 필자가 최근 php에서 좀 깔끔한 그래프를 …
카이로 03-05 5 0 19162
53 TIP&TECH
$sudo apt-get install python-software-properties python g++ make  $sudo add-apt-repository ppa:chris-lea/node.js  $sudo apt-get update…
카이로 12-18 4 0 5692
52 소스코드
50+ FREE BEAUTIFUL JQUERY CSS3 MENU PLUGINS & TUTORIALS Free beautiful jQuery CSS3 menu navigation plugin and tutorials that it is an important…
카이로 11-28 3 0 5402
51 TIP&TECH
구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다. CSS 관련 해서 참고 하시고 많은…
등푸른망둥어 06-24 4 0 9757
50 TIP&TECH
젠 코딩 정말 나이스 하네요. 긴 HTML 등들은 TAG, CLASS, ID 속명만으로 html tag를 자동으로 한방에 생성해주…
등푸른망둥어 06-24 2 0 6084
49 강좌
출처 http://sir.co.kr/bbs/board.php?bo_table=wa_forum&wr_id=110 웹 접근성 이슈 정리 목차 들어가기 장차법과 웹 접…
카이로 01-05 2 0 7081
48 소스코드
크롬의 실험정신이 돋보이는 테스트 사이트입니다. 제가 보기엔 무조건 신기할 따름이네요!  근처에 갈 수…
집게사장 10-08 4 0 12781
47 강좌
1. 기본 Tabs의 Index를 로컬스토리지를 이용하여, 사용자가 마지막에 사용한 Index를 기억시키고, 화면에 보여줍…
집게사장 10-08 1 0 6016
46 TIP&TECH
http://dsiol.blog.me/120177646288 강력한 기능을 제공합니다.. 프리웨어이고 전 불법적인(?) 용도로 사용하고 있…
은빛파도 09-17 1 0 5477
45 자료
일단 소스 함 보세요
레오니아 08-23 6 0 8125
44 강좌
10년it트렌드 View more presentations from Kim jeehyun 온오프융합 View more presentations from Kim jeehyun
카이로 07-13 2 0 7166
43 강좌
Building HTML based mobile phone applications View more presentations from Mikko Ohtamaa
카이로 07-12 1 0 6721
 1  2  3  4  맨끝
 


Copyright ⓒ www.androidside.com. All rights reserved.
채팅 권한: 글쓰기 1개
2레벨 이상만 대화 가능
공개 채팅: 평일 !(9시 ~ 17시),토,일
안사2 변경사항 보러가기 챗방이 잘 안보이면 크롬에서 접속해주세요
챗방 숨기기 |  챗방 보이기