(0) 
(0)Posted by 홍반장
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
The full API specification for the localStorage and sessionStorage objects can be found here. At the time of writing, this is how the common Storage interface look:
I’ve put together a quick demo here to illustrate how to detect and use the local and session storage to get, set, remove and clear stored items (well, basically, covers each of the available methods on the Storage interface above).
The page itself is simple and crude, just a couple of <div> and most importantly two tables which I use to show all the key value pairs stored in the local and session storage:
You might have noticed that the two text boxes had placeholder text similar to that familiar search box in Firefox:
This is done using HTML5’s placeholder attribute for the <input> tag:
1 2 | <input id="keyText" placeholder="Enter key"/><input id="valueText" placeholder="Enter value"/> |
Nice and easy, eh? 
To add a new key value pair or update the value associated with an existing key, you just have to call the setItem method on the intended storage object:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // adds a new key to both local and session storagefunction setKey() { var key = $("#keyText").val(); var value = $("#valueText").val(); if (Modernizr.localstorage) { localStorage.setItem(key, value); } if (Modernizr.sessionstorage) { sessionStorage.setItem(key, value); } showKeys();} |
Earlier in the showStorageKeys(type, table) function, I added a row to the relevant table for each key value pair in the storage including a button with a handler for the onclick event. The handlers are created with the correct storage type (“local” or “session”) and key for the current row baked in already so that they will call the removeItem(type, key) function with the correct parameters:
1 2 3 4 5 6 7 | // removes an item with the specified key from the specified type of storagefunction removeItem(type, key) { // get the specified type of storage, i.e. local or session var storage = window[type + 'Storage']; storage.removeItem(key); showKeys();} |
Finally, the ’”Clear” buttons underneath the tables call the clearLocalKeys() and clearSessionKeys() function to remove all the key value pairs in the corresponding storage:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function clearLocalKeys() { clearKeys("local");}function clearSessionKeys() { clearKeys("session");}// clear all the held keys in the specified type of storagefunction clearKeys(type) { // get the specified type of storage, i.e. local or session var storage = window[type + 'Storage']; // clear the keys storage.clear(); showKeys();} |
(0) (0)Posted by 홍반장
Description: Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three "status" variables are here for that purpose. Some highlights of this script:
Contents for the Step Carousel Viewer can be defined either directly inline on the page or via Ajax and extracted from an external file instead.
Ability to specify whether panels should wrap after reaching the two ends, or stop at the first/last panel.
Panel persistence supported, so the last viewed panel can be remembered and recalled within the same browser session.
Ability for Carousel to auto rotate as dictated by the new
parameter: autostep: {enable:true, moveby:1, pause:3000} During
this mode, Carousel pauses onMouseover, resumes onMouseout, and clicking
Carousel halts auto rotation altogether.
Option to specify two navigational images that's automatically positioned to the left and right of the Carousel Viewer to move the panels back and forth.
Ability to auto generate pagination images based on the total number of panels within a Carousel and positioned anywhere on the page. v1.8 feature
The contents of a Carousel can be updated on demand after the page has loaded with new contents from an external file. v1.8 feature
Demo #1: Auto rotation enabled (every 3 seconds, 1 panel each time), left/right nav buttons enabled, pagination buttons enabled.
Demo #2: Wrap around enabled ("slide"), left/right nav buttons enabled, pagination buttons enabled, status variables enabled.
 
|
Demo #3: Wrap around enabled ("pushpull"), variable content widths, moves 2 panels at a time, illustration of new content loaded on demand.
|
1
2
3
4
5
|
(0) (0)Posted by 홍반장
 |  |  |
 |  |
(0) (0)Posted by 홍반장
- 홍반장
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
