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

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

글쓴이 : 집게사장 날짜 : 2013-10-08 (화) 10:48 조회 : 5926
글주소 : http://www.androidside.com/B57/719
 
  노트북lcd교체전문점 메티스
노트북 액정 lcd 교체 전문점 도소매 , 노트북수리 쿨러교체 메인보드수리 전문점
notelcd.com
  부천 중동 아스텍 전자수리
산업용 컴퓨터, 서버PC, 모니터, 메인보드수리, PCB 기판, SMPS 파워수리
www.astec.co.kr
  산업용장비의 모든 것 MET
빠른수리, 예산절감, 자격보유, 1년보증 M.E.T 수리는 물론 구매까지 한번에!
metkorea.kr
신청하기




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 1153
61 소스코드
감사합니다.
우리큰형님 07-08 3 1 2138
60 강좌
Store에 저장된 Model 객체를 each()메소드로  Model객체당 패널를 하나씩 만드는 방법도 있지만 DataView(Ext.dataview.Dat…
이카루스031 06-02 5 0 3833
59 강좌
Store에 저장할 Model 객체 타입을 정의하고 프록시 Ext.data.proxy.Memory를 사용해서 인라인 데이터를 읽고 인라인 데이…
이카루스031 06-02 3 0 3575
58 강좌
스토어는(Ext.data.Store)는  클라이언트측 데이터 캐쉬 저장소 역할을 한다. Store는 처음 생성될 때만 서버나 HTML5…
이카루스031 06-02 1 0 3463
57 소스코드
페이지 링크 : https://github.com/Flipboard/react-canvas 사용언어 : javascript Introductory blog post Flipboard는 모바일 웹 앱…
카이로 03-18 2 0 3968
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 5971
55 TIP&TECH
IO.JS 링크 : https://github.com/iojs/io.js io.js 는 node.js의 커미터들이 대거 이동해서 만든 npm compatible platform 입니다.…
카이로 03-18 1 0 4344
54 TIP&TECH
아래 사이트에서 퍼온 자료입니다. http://blackfrost.blog.me/40210784439 필자가 최근 php에서 좀 깔끔한 그래프를 …
카이로 03-05 5 0 18463
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 5545
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 5276
51 TIP&TECH
구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다. CSS 관련 해서 참고 하시고 많은…
등푸른망둥어 06-24 4 0 9421
50 TIP&TECH
젠 코딩 정말 나이스 하네요. 긴 HTML 등들은 TAG, CLASS, ID 속명만으로 html tag를 자동으로 한방에 생성해주…
등푸른망둥어 06-24 2 0 5951
49 강좌
출처 http://sir.co.kr/bbs/board.php?bo_table=wa_forum&wr_id=110 웹 접근성 이슈 정리 목차 들어가기 장차법과 웹 접…
카이로 01-05 2 0 6958
48 소스코드
크롬의 실험정신이 돋보이는 테스트 사이트입니다. 제가 보기엔 무조건 신기할 따름이네요!  근처에 갈 수…
집게사장 10-08 4 0 12647
47 강좌
1. 기본 Tabs의 Index를 로컬스토리지를 이용하여, 사용자가 마지막에 사용한 Index를 기억시키고, 화면에 보여줍…
집게사장 10-08 1 0 5927
46 TIP&TECH
http://dsiol.blog.me/120177646288 강력한 기능을 제공합니다.. 프리웨어이고 전 불법적인(?) 용도로 사용하고 있…
은빛파도 09-17 1 0 5396
45 자료
일단 소스 함 보세요
레오니아 08-23 6 0 7992
44 강좌
10년it트렌드 View more presentations from Kim jeehyun 온오프융합 View more presentations from Kim jeehyun
카이로 07-13 2 0 7052
43 강좌
Building HTML based mobile phone applications View more presentations from Mikko Ohtamaa
카이로 07-12 1 0 6610
 1  2  3  4  맨끝
 


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