묻고답하기
여러개 중 한개의 스타일시트를 불러와 쿠키까지 구워주기
2013.02.22 05:44
http://elkha.kr/xe/graystyle2
위 페이지에서 preview 항목에서 design 중,
type1~5까지 누르면 쿠키까지 구워지면서 스타일시트가 변경되는 소스를 알고 싶습니다.
소스 보기
view-source:http://elkha.kr/xe/graystyle2
1. 쿠기로 굽는 것은 요기고
| <script type="text/javascript"> | |
| (function($){ | |
| $.cookie = function(key, value, options) { | |
| if(arguments.length > 1) { | |
| var o = $.extend({}, $.cookieOptions, options); | |
| if (value === null || value === undefined) { | |
| value = ''; | |
| o.expires = -1; | |
| } | |
| if (o.expires.constructor != Date) { | |
| var today = new Date(); | |
| today.setDate(today.getDate() + o.expires); | |
| o.expires = today; | |
| } | |
| // Create the cookie string | |
| document.cookie = | |
| key + '=' + value + | |
| '; expires=' + o.expires.toUTCString() + | |
| (o.path? '; path=' + (o.path) : '') + | |
| (o.domain? '; domain=' + (o.domain) : '') + | |
| (o.secure? '; secure' : ''); | |
| } else { | |
| if(result = new RegExp(key+"=(.*?)(?:;|$)").exec(document.cookie)) | |
| return decodeURIComponent(result[1]); | |
| return false; | |
| } | |
| }; | |
| $.cookieOptions = { | |
| expires: 365, | |
| path: '/' | |
| } | |
| })(jQuery); | |
</script>
|
2. 구동되는 부분은 요기입니다.
| <dt>Design (5)</dt> | |
| <dd class="design"> | |
| <span class="button small"><button type="button" title="default">Type 1</button></span> | |
| </dd> | |
| <dd class="design"> | |
| <span class="button small"><button type="button" title="t2">Type 2</button></span> | |
| </dd> | |
| <dd class="design"> | |
| <span class="button small"><button type="button" title="t3">Type 3</button></span> | |
| </dd> | |
| <dd class="design"> | |
| <span class="button small"><button type="button" title="t4">Type 4</button></span> | |
| </dd> | |
| <dd class="design"> | |
| <span class="button small"><button type="button" title="t5">Type 5</button></span> | |
| </dd> |
3. 그럼 나머지 title에 해당하는 default, t2, t3~5 이건 어디에서 찾아볼 수 있나요?
위 코드에서 type1~5에 해당하는 스타일시트를 불러오는 방법을 모르겠네요.
코드가 복잡해 어렵겠지만 꼭 좀 알고 싶습니다. ^^;;
XE에서 사용가능한 다양한 소스를 판매하고 있습니다.
선택적으로 css 파일을 불러오는 것은 굳이 자바스크립트를 사용하지 않아도 됩니다.......
선택하는 버튼은
폼으로 작성하고, (버튼이 5개면 폼이 5개가 되는 것이죠)
값은 hidden 으로 넘기되,각 버튼들의 name 값은 똑같이 하지만 value는 다르게......
이렇게 해서 클릭을 하게되면
넘겨온 값을 비교해서
각각의 css 파일을 불러오게 하면 됩니다......
아래 화면은
예를 든 것인데 자바스크립트 사용 0%입니다......
처음 페이지 열릴때 css 미적용
그리고
test1, test2 버튼을 클릭때마다 다른 css를 불러와 적용.......