├── images
    ├── sms.png
    ├── blues.png
    ├── ipod.png
    ├── mail.png
    ├── phone.png
    ├── store.png
    ├── itunes.png
    ├── killers.png
    ├── photos.png
    ├── safari.png
    ├── classical.png
    ├── rocknroll.png
    ├── alternative.png
    └── song_images
    │   ├── Todavia.png
    │   ├── Y_Tu_Te_Vas.png
    │   ├── Se_Que_Perdi.png
    │   ├── A_Love_Like_This.png
    │   ├── Amor_Prohibido.png
    │   ├── Como_Dos_Tontos.png
    │   ├── Muy_Lejos_De_Ti.png
    │   ├── La_Locura_Del_Amor.png
    │   ├── Thats_Why_Im_Here.png
    │   ├── Since_You_Brought_It_Up.png
    │   ├── Til_The_Last_Shots_Fired.png
    │   ├── She_Dont_Know_Shes_Beautiful.png
    │   └── I_Wanna_Make_You_Close_Your_Eyes.png
├── song_images
    ├── Todavia.png
    ├── Se_Que_Perdi.png
    ├── Y_Tu_Te_Vas.png
    ├── Amor_Prohibido.png
    ├── Como_Dos_Tontos.png
    ├── Muy_Lejos_De_Ti.png
    ├── A_Love_Like_This.png
    ├── La_Locura_Del_Amor.png
    ├── Thats_Why_Im_Here.png
    ├── Since_You_Brought_It_Up.png
    ├── Til_The_Last_Shots_Fired.png
    ├── She_Dont_Know_Shes_Beautiful.png
    └── I_Wanna_Make_You_Close_Your_Eyes.png
├── icons
    ├── arrow_up.svg
    ├── arrow_down.svg
    ├── arrow_left.svg
    ├── arrow_right.svg
    ├── more.svg
    ├── top_rated.svg
    ├── chat.svg
    ├── downloads.svg
    ├── refresh.svg
    ├── bag.svg
    ├── download.svg
    ├── location_pin.svg
    ├── home.svg
    ├── contacts.svg
    ├── eye.svg
    ├── gift.svg
    ├── files.svg
    ├── action.svg
    ├── film.svg
    ├── cabinet.svg
    ├── search.svg
    ├── lightning_bolt.svg
    ├── chart.svg
    ├── flag.svg
    ├── history.svg
    ├── heart.svg
    ├── minus.svg
    ├── add.svg
    ├── reload.svg
    ├── check_mark.svg
    ├── add_black.svg
    ├── id_card.svg
    ├── chevron.svg
    ├── delete.svg
    ├── bookmarks.svg
    ├── attachement.svg
    ├── head_phones.svg
    ├── delete_check_mark.svg
    ├── info.svg
    ├── target.svg
    ├── todo.svg
    ├── cog.svg
    ├── new_page.svg
    ├── move_indicator.svg
    ├── apple_logo.svg
    ├── badge.svg
    ├── computer.svg
    ├── envelope.svg
    ├── compose.svg
    ├── settings.svg
    ├── shopping_cart.svg
    ├── droid_logo.svg
    ├── calendar.svg
    ├── group.svg
    ├── lock.svg
    └── chat_more.svg
├── examples
    ├── tableview-simple-1.html
    ├── README.markdown
    ├── tableview-simple-grouped-1.html
    ├── tableview-with-tablefooter.html
    ├── tableview-with-tableheader.html
    ├── tableview-simple-4.html
    ├── tableview-simple-grouped-4.html
    ├── tableview-advanced-4.html
    ├── tableview-advanced-grouped-4.html
    ├── tableview-simple-2.html
    ├── tableview-simple-grouped-2.html
    ├── tableview-advanced-2.html
    ├── tableview-advanced-grouped-2.html
    ├── tableview-advanced-1.html
    ├── tableview-advanced-grouped-1.html
    ├── tableview-advanced-10.html
    ├── tableview-simple-3.html
    ├── tableview-simple-grouped-3.html
    ├── tableview-advanced-8.html
    ├── tableview-advanced-grouped-8.html
    ├── tableview-advanced-3.html
    ├── tableview-simple-5.html
    ├── tableview-advanced-grouped-3.html
    ├── deletion_list-images-grouped.html
    ├── tableview-advanced-9.html
    ├── tableview-advanced-grouped-9.html
    ├── deletion_list.html
    ├── progressbar.html
    ├── selection_list.html
    ├── expander.html
    ├── tableview-simple-grouped-5.html
    ├── deletion_list-icons-grouped.html
    ├── deletion_list-images.html
    ├── deletion_list-icons.html
    ├── Ellipsis.html
    ├── deletion_list-grouped.html
    ├── actionsheet.html
    ├── navigation-list-2.html
    ├── navigation-list-3.html
    ├── background-gradient.html
    ├── navigation-list-3a.html
    ├── tableview-advanced-5.html
    ├── tableview-advanced-6.html
    ├── tableview-advanced-grouped-5.html
    ├── tableview-advanced-grouped-6.html
    ├── tableview-advanced-7.html
    ├── tableview-advanced-grouped-7.html
    ├── json_form_target.html
    ├── switch-control-3.html
    └── popup.html
└── README.markdown


/images/sms.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/sms.png


--------------------------------------------------------------------------------
/images/blues.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/blues.png


--------------------------------------------------------------------------------
/images/ipod.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/ipod.png


--------------------------------------------------------------------------------
/images/mail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/mail.png


--------------------------------------------------------------------------------
/images/phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/phone.png


--------------------------------------------------------------------------------
/images/store.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/store.png


--------------------------------------------------------------------------------
/images/itunes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/itunes.png


--------------------------------------------------------------------------------
/images/killers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/killers.png


--------------------------------------------------------------------------------
/images/photos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/photos.png


--------------------------------------------------------------------------------
/images/safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/safari.png


--------------------------------------------------------------------------------
/images/classical.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/classical.png


--------------------------------------------------------------------------------
/images/rocknroll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/rocknroll.png


--------------------------------------------------------------------------------
/images/alternative.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/alternative.png


--------------------------------------------------------------------------------
/song_images/Todavia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Todavia.png


--------------------------------------------------------------------------------
/song_images/Se_Que_Perdi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Se_Que_Perdi.png


--------------------------------------------------------------------------------
/song_images/Y_Tu_Te_Vas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Y_Tu_Te_Vas.png


--------------------------------------------------------------------------------
/images/song_images/Todavia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Todavia.png


--------------------------------------------------------------------------------
/song_images/Amor_Prohibido.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Amor_Prohibido.png


--------------------------------------------------------------------------------
/song_images/Como_Dos_Tontos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Como_Dos_Tontos.png


--------------------------------------------------------------------------------
/song_images/Muy_Lejos_De_Ti.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Muy_Lejos_De_Ti.png


--------------------------------------------------------------------------------
/images/song_images/Y_Tu_Te_Vas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Y_Tu_Te_Vas.png


--------------------------------------------------------------------------------
/song_images/A_Love_Like_This.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/A_Love_Like_This.png


--------------------------------------------------------------------------------
/song_images/La_Locura_Del_Amor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/La_Locura_Del_Amor.png


--------------------------------------------------------------------------------
/song_images/Thats_Why_Im_Here.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Thats_Why_Im_Here.png


--------------------------------------------------------------------------------
/images/song_images/Se_Que_Perdi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Se_Que_Perdi.png


--------------------------------------------------------------------------------
/images/song_images/A_Love_Like_This.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/A_Love_Like_This.png


--------------------------------------------------------------------------------
/images/song_images/Amor_Prohibido.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Amor_Prohibido.png


--------------------------------------------------------------------------------
/images/song_images/Como_Dos_Tontos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Como_Dos_Tontos.png


--------------------------------------------------------------------------------
/images/song_images/Muy_Lejos_De_Ti.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Muy_Lejos_De_Ti.png


--------------------------------------------------------------------------------
/song_images/Since_You_Brought_It_Up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Since_You_Brought_It_Up.png


--------------------------------------------------------------------------------
/images/song_images/La_Locura_Del_Amor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/La_Locura_Del_Amor.png


--------------------------------------------------------------------------------
/images/song_images/Thats_Why_Im_Here.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Thats_Why_Im_Here.png


--------------------------------------------------------------------------------
/song_images/Til_The_Last_Shots_Fired.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/Til_The_Last_Shots_Fired.png


--------------------------------------------------------------------------------
/song_images/She_Dont_Know_Shes_Beautiful.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/She_Dont_Know_Shes_Beautiful.png


--------------------------------------------------------------------------------
/images/song_images/Since_You_Brought_It_Up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Since_You_Brought_It_Up.png


--------------------------------------------------------------------------------
/images/song_images/Til_The_Last_Shots_Fired.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/Til_The_Last_Shots_Fired.png


--------------------------------------------------------------------------------
/song_images/I_Wanna_Make_You_Close_Your_Eyes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/song_images/I_Wanna_Make_You_Close_Your_Eyes.png


--------------------------------------------------------------------------------
/images/song_images/She_Dont_Know_Shes_Beautiful.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/She_Dont_Know_Shes_Beautiful.png


--------------------------------------------------------------------------------
/images/song_images/I_Wanna_Make_You_Close_Your_Eyes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbiggs/chocolatechip-ui-zepto/HEAD/images/song_images/I_Wanna_Make_You_Close_Your_Eyes.png


--------------------------------------------------------------------------------
/icons/arrow_up.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <polygon points="24,14 38,32 10,32 "/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/icons/arrow_down.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <polygon points="24,35 10,17 38,17 "/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/icons/arrow_left.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <polygon points="13,25 31,11 31,39 "/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/icons/arrow_right.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <polygon points="35,25 17,11 17,39 "/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/icons/more.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <circle cx="10" cy="23" r="5.172"/>
6 | <circle cx="24" cy="23" r="5.172"/>
7 | <circle cx="38" cy="23" r="5.172"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/icons/top_rated.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
4 | 	 height="48px">
5 | <polygon
6 |    points="43.667,19.542 32.125,28.75 36.875,42.917 24,35 11.208,42.917 15.792,28.792 4.25,19.583 19,18.958 24,5.083 29,18.958 "
7 |    id="polygon2888"
8 |    transform="translate(0,-4)" />
9 | </svg>


--------------------------------------------------------------------------------
/icons/chat.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <path d="M37.864,9.053H10.216c-2.887,0-5.227,2.341-5.227,5.227v14.357c0,2.888,2.34,5.228,5.227,5.228h2.681v8.388l10.041-8.388
6 | 	h14.926c2.886,0,5.227-2.34,5.227-5.228V14.279C43.091,11.394,40.75,9.053,37.864,9.053z"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/icons/downloads.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <path d="M36.581,5.093H11.419c-1.354,0-2.452,1.098-2.452,2.452v32.929c0,1.354,1.098,2.452,2.452,2.452h25.162
6 | 	c1.354,0,2.452-1.099,2.452-2.452V7.545C39.033,6.191,37.936,5.093,36.581,5.093z M24,34.4l-8.731-9.49h4.708V13.901h8.047V24.91
7 | 	h4.708L24,34.4z"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/icons/refresh.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <path d="M34.15,25C34.149,30.598,29.597,35.15,24,35.15s-10.15-4.554-10.15-10.151c0-5.596,4.553-10.149,10.15-10.149v5.039
6 | 	l12.352-8.439L24,2.99v4.86c-9.457,0-17.15,7.693-17.15,17.149c0,9.457,7.693,17.151,17.15,17.151c9.457,0,17.149-7.693,17.15-17.15
7 | 	H34.15z"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/icons/bag.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 | <g id="Layer_2">
 6 | 	<path d="M4.897,35v0.529c0,2.51,2.035,4.548,4.547,4.548h29.109c2.51,0,4.549-2.038,4.549-4.548V35H4.897z"/>
 7 | 	<path d="M33.147,13.991c-0.624-5.026-4.484-8.911-9.151-8.911c-4.667,0-8.527,3.885-9.151,8.911h-9.95v19.027H43.1V13.991H33.147z
 8 | 		 M23.996,8.58c2.76,0,5.069,2.324,5.622,5.411H18.374C18.927,10.903,21.237,8.58,23.996,8.58z"/>
 9 | </g>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/icons/download.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
5 | <path d="M24,5.994C13.503,5.994,4.994,14.503,4.994,25c0,10.496,8.509,19.006,19.006,19.006c10.496,0,19.006-8.51,19.006-19.006
6 | 	C43.006,14.503,34.496,5.994,24,5.994z M24,37.59L12,24.729h8.273v-1.263v-2.546v-6.405c0-0.844,0.685-1.528,1.529-1.528h4.395
7 | 	c0.846,0,1.529,0.685,1.529,1.528v6.405v2.346v1.463H36L24,37.59z"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/icons/location_pin.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <g id="Layer_2">
 6 | 	<path d="M35.543,16.813c0-6.375-5.168-11.543-11.543-11.543s-11.543,5.168-11.543,11.543c0,2.191,0.622,4.233,1.683,5.979h-0.006
 7 | 		L24,43.5l9.867-20.708H33.86C34.921,21.047,35.543,19.005,35.543,16.813z M24,23.236c-3.728,0-6.75-3.022-6.75-6.75
 8 | 		s3.022-6.75,6.75-6.75c3.729,0,6.75,3.022,6.75,6.75S27.729,23.236,24,23.236z"/>
 9 | </g>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/icons/home.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <g>
 6 | 	<polygon points="24,10.811 10.607,22.61 9.989,22.61 9.989,40.937 19.96,40.937 19.96,27.855 28.039,27.855 28.039,40.937 
 7 | 		38.011,40.937 38.011,22.61 37.538,22.61 	"/>
 8 | 	<polygon points="36,16.46 36,7 29.958,7 29.958,11.165 24.113,6.042 24.057,6.255 24,6.042 5.833,21.964 9.075,21.985 
 9 | 		24.057,9.023 39.039,21.985 42.279,21.964 	"/>
10 | </g>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/icons/contacts.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M35.398,29.729c-3.243-1.927-6.94-2.902-6.94-2.902h-0.006v-3.979c1.4-1.488,2.289-3.66,2.289-6.086
 6 | 	c0-4.485-3.019-8.121-6.742-8.121c-3.723,0-6.74,3.636-6.74,8.121c0,2.427,0.888,4.599,2.289,6.087v3.978H19.49
 7 | 	c0,0-2.826,0.745-6.761,2.902C8.821,31.872,7.068,34.151,7.068,36s0,2.053,0,2.053h33.863c0,0,0-0.144,0-2.053
 8 | 	S38.853,31.781,35.398,29.729z"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/icons/eye.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <ellipse cx="24" cy="23.998" rx="5.008" ry="4.956"/>
 6 | <path d="M24,10.75c-11.191,0-19.025,11.935-19.025,13.113c0,1.179,8.348,13.187,19.025,13.187s19.025-12.159,19.025-13.187
 7 | 	C43.025,22.835,35.191,10.75,24,10.75z M24.026,32.234c-4.58,0-8.295-3.676-8.295-8.21c0-4.533,3.715-8.208,8.295-8.208
 8 | 	c4.581,0,8.295,3.675,8.295,8.208C32.321,28.559,28.607,32.234,24.026,32.234z"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/icons/gift.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <g>
 6 | 	<path d="M37.772,15.987H25.301v11.685h17.702v-6.456C43.003,18.328,40.661,15.987,37.772,15.987z"/>
 7 | 	<path d="M4.997,21.216v6.456h17.804V15.987H10.228C7.339,15.987,4.997,18.328,4.997,21.216z"/>
 8 | 	<path d="M4.997,37.865c0,2.889,2.342,5.23,5.23,5.23h12.573V30.172H4.997V37.865z"/>
 9 | 	<path d="M25.301,43.096h12.472c2.889,0,5.23-2.342,5.23-5.23v-7.693H25.301V43.096z"/>
10 | </g>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/icons/files.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path fill="#020001" d="M36.438,7.008V7H11.563v0.008L5,24.238V40h38V24.238L36.438,7.008z M31.973,15.969H16.027v-2.962h15.945
 6 | 	V15.969z M34.039,16.969v2.956H13.961v-2.956H34.039z M35.984,20.925V24h-4.422l-2.688,4h-9.812l-2.688-4h-4.36v-3.075H35.984z
 7 | 	 M36.984,24v-4.075h-1.945v-3.956h-2.066v-3.962H15.027v3.962h-2.066v3.956h-1.945V24H8.101l5.404-14.188h20.992L39.899,24H36.984z"
 8 | 	/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/icons/action.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M44.242,20.829l-12.484-9.578v5.785c0,0-0.08,0-0.256,0c-2.908,0-6.803-0.21-10.987,2.54
 6 | 	c-5.989,3.936-5.627,10.076-5.627,10.076s1.033-3.406,7.285-5.137c3.833-1.061,6.921-0.702,9.366-0.521c0.143,0.011,0.219,0,0.219,0
 7 | 	v6.193L44.242,20.829z"/>
 8 | <polygon points="35.883,34.75 11.759,34.75 11.759,20.813 14.612,20.813 21.027,15.813 6.759,15.813 6.759,39.75 40.883,39.75 
 9 | 	40.883,28.018 35.883,31.914 "/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/icons/film.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M35,4.938H13H7.822v38.123H13h22h5.178V4.938H35z M35,31h3.178v4H35V31z M38.178,29H35v-4h3.178V29z M13,35H9.822v-4H13V35z
 6 | 	 M13,17H9.822v-4H13V17z M13,19v4H9.822v-4H13z M9.822,29v-4H13v4H9.822z M15,19h18v10H15V19z M35,23v-4h3.178v4H35z M35,17v-4
 7 | 	h3.178v4H35z M38.178,6.938V11H35V6.938H38.178z M33,6.938V17H15V6.938H33z M13,6.938V11H9.822V6.938H13z M9.822,41.062V37H13v4.062
 8 | 	H9.822z M15,41.062V31h18v10.062H15z M35,41.062V37h3.178v4.062H35z"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/icons/cabinet.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <g id="Layer_2">
 6 | 	<path d="M8.015,32.024v10.033h31.969V32.024H8.015z M28.01,37.984h-0.994V36.98h-6.013v1.004h-0.995V35.98h8.002V37.984z"/>
 7 | 	<path d="M8.015,21.023v9.878h31.969v-9.878H8.015z M28.01,26.983h-0.994v-1.004h-6.014v1.004h-0.994v-2.004h8.002V26.983z"/>
 8 | 	<path d="M8.015,10.083v9.831h31.969v-9.831H8.015z M28.01,16.043h-0.994V15.04h-6.014v1.004h-0.994V14.04h8.002V16.043z"/>
 9 | 	<polygon points="11.015,5.037 8.015,8.944 39.984,8.944 36.984,5.037 	"/>
10 | </g>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/icons/search.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M42.71,38.482L32.478,28.208c1.598-2.385,2.532-5.249,2.532-8.329c0-8.273-6.73-15.004-15.004-15.004
 6 | 	S5.001,11.606,5.001,19.879c0,8.274,6.731,15.004,15.004,15.004c3.055,0,5.896-0.923,8.27-2.497l10.236,10.279
 7 | 	c0.858,0.861,2.19,0.927,2.977,0.143l1.354-1.349C43.629,40.678,43.569,39.345,42.71,38.482z M10.001,19.879
 8 | 	c0-5.517,4.488-10.004,10.004-10.004S30.01,14.363,30.01,19.879c0,5.516-4.487,10.004-10.004,10.004S10.001,25.396,10.001,19.879z"
 9 | 	/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/icons/lightning_bolt.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 |   <g
 6 |      id="layer2">
 7 |     <g
 8 |        transform="matrix(1,0,0,-1,-12.491586,1168.9421)"
 9 |        id="g5637">
10 |       <g
11 |          id="g5639" />
12 |       <g
13 |          id="g5641">
14 |         <path
15 |            d="m 44.73394,1163.004 -13.26736,0.278 -4.93185,-14.795 5.97379,0.069 -5.90433,-13.059 6.52949,0.07 0.13893,-10.072 7.29357,13.336 -4.16775,0.139 9.37745,13.823 -5.34862,0"
16 |            id="path5643"
17 |            style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
18 |       </g>
19 |     </g>
20 |   </g>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/icons/chart.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:svg="http://www.w3.org/2000/svg"
 6 |    xmlns="http://www.w3.org/2000/svg"
 7 |    version="1.1"
 8 |    width="48"
 9 |    height="48"
10 |    viewBox="0 0 48 48"
11 |    id="Layer_2"
12 |    xml:space="preserve"><defs
13 |    id="defs8483" />
14 | <path
15 |    d="M 43,38 5,38 5,8 43,8 43,38 z m -36.6599631,-1.340037 35.3994911,-0.0512 0,-27.372969 -35.3994911,0.1042419 0,27.3199261 z"
16 |    id="path8477"
17 |    style="stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none" />
18 | <polygon
19 |    points="7.082,30.554 10.954,28.332 13.667,29.846 23.595,18.454 27.868,23.229 32.96,17.005 35.795,18.809 40.997,13.241 40.963,17.399 36.377,22.735 33.597,20.966 27.97,27.843 23.564,22.919 14.021,33.563 11.193,31.758 7.082,34.589 "
20 |    id="polygon8479" />
21 | </svg>


--------------------------------------------------------------------------------
/icons/flag.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <rect x="12" y="4.975" width="3" height="37.871"/>
 6 | <path fill="#020001" d="M38.52,22.856c-0.33,0.279-1.407,0.409-5.457,0.812c-2.493,0.248-5.025,0.495-9.628,0.199
 7 | 	c-4.463-0.287-7.344-1.231-7.344-1.231V5.868c0,0,0.656,1.159,7.194,1.159c6.762,0,7.286-0.591,9.762-0.591
 8 | 	c4.119,0,6.03,0.882,6.03,0.882s0.417,0.126-0.213,0.742c-0.269,0.262-1.7,1.587-2.938,2.983c-1.45,1.638-2.938,2.66-2.938,3.379
 9 | 	c0,0.302,1.989,1.552,3.378,3.271c1.422,1.76,1.749,2.934,2.152,3.617C38.927,22,38.796,22.623,38.52,22.856z"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/icons/history.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M24,43.3C13.358,43.3,4.7,34.642,4.7,24s8.658-19.3,19.3-19.3c10.643,0,19.301,8.658,19.301,19.3S34.643,43.3,24,43.3z
 6 | 	 M24,10.1c-7.664,0-13.899,6.235-13.899,13.9s6.235,13.9,13.899,13.9c7.665,0,13.9-6.235,13.9-13.9S31.665,10.1,24,10.1z"/>
 7 | <path d="M31.629,29.743l-5.767-5.767v-9.73c0-1.028-0.833-1.862-1.861-1.862s-1.862,0.833-1.862,1.862V24.83
 8 | 	c0,0.689,0.38,1.285,0.938,1.606c0.031,0.037,0.057,0.077,0.091,0.112l5.828,5.827c0.727,0.727,1.905,0.727,2.633,0
 9 | 	C32.355,31.648,32.355,30.47,31.629,29.743z"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/icons/heart.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M33.165,5.556c-0.006,0-0.011,0-0.017,0c-0.004,0-0.009,0-0.013,0c-0.089,0-0.174,0.009-0.262,0.012
 6 | 	c-4.229,0.105-7.103,2.464-8.349,5.786c-0.22,0.539-0.394,1.102-0.51,1.687c-0.117-0.586-0.292-1.151-0.513-1.692
 7 | 	c-1.248-3.318-4.12-5.675-8.347-5.78c-0.087-0.002-0.173-0.012-0.261-0.012c-0.004,0-0.009,0-0.013,0c-0.006,0-0.011,0-0.017,0
 8 | 	c-5.139,0-9.85,4.146-9.85,11.217c0,7.225,2.316,11.098,6.675,15.456C16.05,36.587,24.015,42.6,24.015,42.6
 9 | 	s7.966-6.013,12.325-10.371c4.358-4.358,6.676-8.231,6.676-15.456C43.016,9.702,38.304,5.556,33.165,5.556z"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/icons/minus.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 6 |    xmlns:cc="http://creativecommons.org/ns#"
 7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 8 |    xmlns:svg="http://www.w3.org/2000/svg"
 9 |    xmlns="http://www.w3.org/2000/svg"
10 |    version="1.1"
11 |    width="48"
12 |    height="48"
13 |    viewBox="0 0 48 48"
14 |    id="Layer_2"
15 |    xml:space="preserve"><metadata
16 |    id="metadata9"><rdf:RDF><cc:Work
17 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
18 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
19 |    id="defs7" />
20 | 
21 | <rect
22 |    width="21.527449"
23 |    height="6.155725"
24 |    x="13.144672"
25 |    y="20.922136"
26 |    id="rect3005"
27 |    style="fill:#000000;fill-opacity:1;stroke:none" /></svg>


--------------------------------------------------------------------------------
/icons/add.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M36.729,21.049h-4.475h-2.645H28.17c-0.67,0-1.221-0.561-1.221-1.229v-1.623v-1.856v-5.07c0-0.668-0.541-1.21-1.211-1.21
 6 | 	H22.26c-0.668,0-1.21,0.542-1.21,1.21v5.07v2.016v1.464c0,0.668-0.553,1.229-1.222,1.229h-1.688h-2.396h-4.474
 7 | 	c-0.668,0-1.21,0.542-1.21,1.211v3.479c0,0.668,0.542,1.211,1.21,1.211h4.474h2.637h1.447c0.669,0,1.222,0.531,1.222,1.199v1.678
 8 | 	v1.801v5.102c0,0.668,0.542,1.211,1.21,1.211h3.479c0.67,0,1.211-0.543,1.211-1.211v-5.102v-1.84v-1.639
 9 | 	c0-0.668,0.551-1.199,1.221-1.199h1.799h2.285h4.475c0.668,0,1.211-0.543,1.211-1.211V22.26
10 | 	C37.939,21.591,37.396,21.049,36.729,21.049z"/>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/icons/reload.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M42.807,24.031l0.007-0.212C42.85,13.362,34.342,4.823,23.848,4.785c-5.63,0-10.687,2.487-14.167,6.405l3.563,3.375
 6 | 	c2.591-2.978,6.405-4.873,10.654-4.873c3.749,0.013,7.272,1.489,9.922,4.157c2.647,2.668,4.099,6.203,4.085,9.954l-0.007,0.213
 7 | 	L35.396,24l4.803,6.029l4.889-5.981L42.807,24.031z"/>
 8 | <path d="M4.898,23.893l-0.007,0.212c-0.036,10.458,8.472,18.996,18.966,19.034c5.63,0,10.687-2.487,14.166-6.404l-3.563-3.375
 9 | 	c-2.591,2.979-6.404,4.873-10.653,4.873c-3.749-0.014-7.272-1.489-9.923-4.157c-2.647-2.668-4.099-6.203-4.085-9.954l0.007-0.213
10 | 	l2.503,0.016l-4.803-6.029l-4.889,5.981L4.898,23.893z"/>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/icons/check_mark.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 6 |    xmlns:cc="http://creativecommons.org/ns#"
 7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 8 |    xmlns:svg="http://www.w3.org/2000/svg"
 9 |    xmlns="http://www.w3.org/2000/svg"
10 |    version="1.1"
11 |    width="48"
12 |    height="48"
13 |    viewBox="0 0 48 48"
14 |    id="svg3804"
15 |    xml:space="preserve"><metadata
16 |    id="metadata8"><rdf:RDF><cc:Work
17 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
18 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
19 |   <defs
20 |    id="defs3806" />
21 |   <g
22 |    transform="matrix(2.8817229,0,0,2.9517892,5.3723918,5.2474312)"
23 |    id="layer1">
24 |     <path
25 |    d="M 10.512579,-0.02916556 13.119471,0.02750602 4.8170845,12.891955 0.02833579,7.6781696 1.5868043,5.8363432 4.5337265,8.9532802 10.512579,-0.02916556 z"
26 |    id="path3908"
27 |    style="fill:#000000;fill-opacity:1;stroke:none" />
28 |   </g>
29 | </svg>


--------------------------------------------------------------------------------
/icons/add_black.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M36.886,7.122H11.114c-2.205,0-3.993,1.787-3.993,3.993v25.772c0,2.205,1.789,3.992,3.993,3.992h25.771
 6 | 	c2.206,0,3.993-1.787,3.993-3.992V11.115C40.879,8.909,39.092,7.122,36.886,7.122z M35.939,25.738c0,0.668-0.543,1.211-1.211,1.211
 7 | 	h-2.475h-2.285H28.17c-0.67,0-1.221,0.531-1.221,1.199v1.639v1.84v3.102c0,0.668-0.541,1.211-1.211,1.211H22.26
 8 | 	c-0.668,0-1.21-0.543-1.21-1.211v-3.102v-1.801v-1.678c0-0.668-0.553-1.199-1.222-1.199h-1.447h-2.637h-2.474
 9 | 	c-0.668,0-1.21-0.543-1.21-1.211V22.26c0-0.669,0.542-1.211,1.21-1.211h2.474h2.396h1.688c0.669,0,1.222-0.561,1.222-1.229v-1.464
10 | 	v-2.016v-3.07c0-0.668,0.542-1.21,1.21-1.21h3.479c0.67,0,1.211,0.542,1.211,1.21v3.07v1.856v1.623c0,0.668,0.551,1.229,1.221,1.229
11 | 	h1.439h2.645h2.475c0.668,0,1.211,0.542,1.211,1.211V25.738z"/>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/icons/id_card.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <g id="Layer_2">
 6 | 	<path d="M40.797,10.938H7.14c-1.217,0-2.203,0.986-2.203,2.203v20.61c0,1.217,0.986,2.203,2.203,2.203h33.657
 7 | 		c1.217,0,2.203-0.986,2.203-2.203V13.14C43,11.923,42.014,10.938,40.797,10.938z M15.969,13.938c2.399,0,4.344,2.043,4.344,4.563
 8 | 		s-1.945,4.563-4.344,4.563s-4.344-2.043-4.344-4.563S13.57,13.938,15.969,13.938z M24.129,33.031H7.808
 9 | 		c-0.007-0.146-0.021-0.29-0.021-0.438c0-4.746,3.664-8.594,8.182-8.594s8.182,3.848,8.182,8.594
10 | 		C24.15,32.741,24.137,32.886,24.129,33.031z M40.019,32.975H26.986v-1h13.032V32.975z M40.019,29.981H26.986v-1h13.032V29.981z
11 | 		 M40.019,26.987H26.986v-0.999h13.032V26.987z M40.019,23.994H26.986v-0.999h13.032V23.994z M40.019,21.002H26.986v-1h13.032
12 | 		V21.002z M40.019,18.009H26.986v-1h13.032V18.009z M40.019,15.016H26.986v-1h13.032V15.016z"/>
13 | </g>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/icons/chevron.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 6 |    xmlns:cc="http://creativecommons.org/ns#"
 7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 8 |    xmlns:svg="http://www.w3.org/2000/svg"
 9 |    xmlns="http://www.w3.org/2000/svg"
10 |    version="1.1"
11 |    width="48"
12 |    height="48"
13 |    viewBox="0 0 48 48"
14 |    id="svg2"
15 |    xml:space="preserve"><metadata
16 |    id="metadata8"><rdf:RDF><cc:Work
17 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
18 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
19 |   <defs
20 |    id="defs4" />
21 |   <g
22 |    transform="matrix(0.76271185,0,0,0.76271185,19.695775,18.208103)"
23 |    id="layer2">
24 |     <path
25 |    d="M -2.3429035,-12.884216 -8.4213641,-6.8057547 4.8587627,6.4744128 -8.4214285,19.754506 -2.3429188,25.833035 10.937222,12.552872 17.015686,6.4743806 10.937219,0.39595097 -2.3429035,-12.884216 z"
26 |    id="rect3730"
27 |    style="fill:#000000;fill-opacity:1;stroke:none" />
28 |   </g>
29 | </svg>


--------------------------------------------------------------------------------
/icons/delete.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M30.915,11.913l-3.164,3.164l-1.87,1.87l-1.019,1.018c-0.474,0.475-1.259,0.467-1.731-0.005l-1.147-1.148l-1.313-1.313
 6 | 	l-3.586-3.585c-0.472-0.472-1.238-0.473-1.712,0.001l-2.459,2.459c-0.473,0.472-0.473,1.239,0,1.711l3.585,3.585l1.425,1.425
 7 | 	l1.035,1.035c0.473,0.473,0.479,1.26,0.005,1.733l-1.193,1.193l-1.694,1.695l-3.163,3.163c-0.473,0.473-0.473,1.238,0.001,1.712
 8 | 	l2.459,2.46c0.473,0.472,1.24,0.473,1.712,0l3.164-3.163l1.864-1.864l1.023-1.023c0.473-0.473,1.239-0.488,1.712-0.016l1.186,1.186
 9 | 	l1.273,1.273l3.607,3.607c0.473,0.473,1.239,0.474,1.712,0.001l2.46-2.46c0.474-0.474,0.473-1.24,0-1.712l-3.607-3.607l-1.301-1.301
10 | 	l-1.159-1.16c-0.472-0.473-0.458-1.237,0.016-1.711l1.271-1.272l1.616-1.615l3.164-3.165c0.473-0.472,0.473-1.24,0-1.712
11 | 	l-2.46-2.459C32.154,11.44,31.387,11.44,30.915,11.913z"/>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/icons/bookmarks.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 | 
 6 | <g id="Layer_2">
 7 | 	<path d="M39.355,11.511c-2.815-2.137-6.628-2.729-9.963-1.581c-2.262,0.778-3.691,2.247-5.302,3.898
 8 | 		c-1.229-1.259-2.316-2.5-3.911-3.314c-3.069-1.568-6.817-1.543-9.863,0.071c-2.28,1.208-4.436,3.226-5.125,5.793
 9 | 		c-0.282,1.05-0.135,2.271-0.135,3.347c0,6.307,0,12.613,0,18.92c2.169-3.411,5.759-5.694,9.87-5.918
10 | 		c4.285-0.233,6.791,2.825,9.104,5.918c2.34-2.787,4.469-5.706,8.448-5.918c4.026-0.214,8.72,2.228,10.504,5.918
11 | 		c0-4.306,0-8.61,0-12.916c0-2.457,0-4.914,0-7.372C42.982,15.576,41.655,13.151,39.355,11.511z M21.9,31.09
12 | 		c-0.116-0.091-0.416-0.309-0.448-0.331c-4.066-2.853-9.829-2.498-13.47,0.955c0-3.098,0-6.196,0-9.294
13 | 		c0-2.572-0.393-4.561,1.374-6.627c2.826-3.303,9.885-3.288,11.843,0.986c0.359,0.784,0.702,1.977,0.702,3.121V31.09z
14 | 		 M40.057,22.154c0,3.135,0,6.271,0,9.405c-3.858-3.502-9.941-3.63-13.956-0.316V19.878c0-0.955,0.351-2.003,0.816-3
15 | 		c1.974-4.228,8.944-4.447,11.813-1.108C40.434,17.752,40.057,19.687,40.057,22.154z"/>
16 | </g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/icons/attachement.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M35.014,32.858c0-2.021,0-23.922,0-23.922h-4c0,0,0,22.348,0,24.053s-0.483,2.633-0.845,3.118
 6 | 	c-1.449,1.943-3.621,3.181-6.048,3.181c-2.363,0-4.484-1.174-5.933-3.03C17.778,35.732,17,34.563,17,33.277s0-20.612,0-21.199
 7 | 	c0-0.688,0.873-1.752,1.374-2.111c0.73-0.523,1.622-0.832,2.588-0.832c1.103,0,2.107,0.402,2.887,1.065
 8 | 	C24.221,10.517,25,11.188,25,12.016c0,0.526,0,18.298,0,19.059s0.296,1.922-0.999,1.922s-1.04-1.056-1.04-1.922s0-15.145,0-15.145
 9 | 	h-4c0,0,0,13.676,0,15.014s0.42,2.558,0.637,2.847c1.003,1.335,2.597,2.206,4.403,2.206c1.714,0,3.236-0.784,4.244-2.006
10 | 	C28.529,33.646,29,32.672,29,31.021s0-18.6,0-19.348c0-1.188-0.555-2.053-0.75-2.379c-1.482-2.486-4.189-4.158-7.289-4.158
11 | 	c-3.032,0-5.695,1.598-7.198,3.995C13.343,9.801,13,10.86,13,11.766c0,0.762,0,19.913,0,21.669s0.849,3.162,1.303,3.909
12 | 	c2.1,3.455,5.71,5.744,9.818,5.744c4.373,0,8.188-2.592,10.213-6.423C34.691,35.989,35.014,34.879,35.014,32.858z"/>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/icons/head_phones.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 |   <g
 6 |      id="layer4"
 7 |      style="display:inline">
 8 |     <rect
 9 |        width="6.9639015"
10 |        height="13.952844"
11 |        x="7.1463218"
12 |        y="27.518587"
13 |        id="rect3365"
14 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.14143729;stroke-opacity:1" />
15 |     <use
16 |        transform="translate(26.758431,-8.9949029e-7)"
17 |        id="use4139"
18 |        style="fill:#000000;fill-opacity:1"
19 |        x="0"
20 |        y="0"
21 |        width="48"
22 |        height="48"
23 |        xlink:href="#rect3365" />
24 |   </g>
25 |   <g
26 |      id="layer5">
27 |     <path
28 |        d="m 14.653138,27.518586 -7.0631547,0 3e-6,0 0,0 0,-10.245987 c 0,0 2.5283097,-11.5321623 15.9264757,-11.6145349 13.398166,-0.082372 16.775442,11.6969079 16.775442,11.6969079 l 0.08237,10.163614 -7.000649,0"
29 |        id="path4172"
30 |        style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
31 |   </g>
32 | </svg>
33 | 


--------------------------------------------------------------------------------
/examples/tableview-simple-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Tableviews 1</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tablecell>
29 | 							<celltitle>People</celltitle>
30 | 						</tablecell>
31 | 						<tablecell>
32 | 							<celltitle>Places</celltitle>
33 | 						</tablecell>
34 | 						<tablecell>
35 | 							<celltitle>Things</celltitle>
36 | 						</tablecell>
37 | 						<tablecell>
38 | 							<celltitle>Animals</celltitle>
39 | 						</tablecell>
40 | 						<tablecell>
41 | 							<celltitle>Food</celltitle>
42 | 						</tablecell>
43 | 					</tableview>
44 | 				</scrollpanel>
45 | 			</subview>
46 | 		</view>
47 | 	</app>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/icons/delete_check_mark.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 6 |    xmlns:cc="http://creativecommons.org/ns#"
 7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 8 |    xmlns:svg="http://www.w3.org/2000/svg"
 9 |    xmlns="http://www.w3.org/2000/svg"
10 |    version="1.1"
11 |    width="48"
12 |    height="48"
13 |    viewBox="0 0 48 48"
14 |    id="svg4441"
15 |    xml:space="preserve"><metadata
16 |    id="metadata8"><rdf:RDF><cc:Work
17 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
18 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
19 |   <defs
20 |    id="defs4443" />
21 |   <g
22 |    transform="matrix(3.627675,0,0,4.1708195,-0.38756952,2.0459536)"
23 |    id="layer1">
24 |     <path
25 |    d="m 11.593506,0.85181027 c 0,0 -2.8782812,1.78368203 -4.3315408,3.46282313 C 5.8087055,5.9937746 5.2466215,6.7535798 5.2466215,6.7535798 4.5883903,5.9988655 4.4131283,5.7074764 3.5602554,4.9454794 L 1.6930171,6.6720302 c 0.8705482,0.5389683 1.1118812,0.5228901 1.6820456,0.9472989 0.6284449,0.4677906 1.6685596,1.2039011 2.2759527,2.014857 L 6.65407,7.7313389 C 7.5655527,6.0022084 8.3358445,4.1589192 11.560016,1.9084663 l 0.03349,-1.05665603 z"
26 |    id="rect5112"
27 |    style="fill:#000000;fill-opacity:1;stroke:none" />
28 |   </g>
29 | </svg>


--------------------------------------------------------------------------------
/examples/README.markdown:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: ChocolateChip-UI - A Compact JavaScript Framework for Mobile Webkit Apps
 3 | ---
 4 | #ChocolateChip-UI for Zepto
 5 | 
 6 | ChocolateChip-UI is a mobile Web app framework using HTML5, WAML, CSS and JavaScript. This version runs on top of Zepto. If you have been using Zepto for you mobile Web app needs, this can round out your needs nicely. You can take advantage of the rich feature set of ChocolateChip-UI running on top of Zepto for a complete development framework.
 7 | 
 8 | ChocolateChip-UI uses specially defined markup for clarity and conciseness to construct your app. ChocolateChip-UI's CSS and JavaScript will imbue the app with styling and basic functionality. Using simple one-liners you can active handed coded markup into sophisticated controls. Or with simple initialization routines you can create controls dynamically.
 9 | 
10 | ChocolateChip-UI takes advantage of HTML5, CSS3 and JavaScript to deliver a consistent, focused, easy to use and compact framework for creating mobile apps rivaling native iOS apps. At the same time care was taken to make sure every aspect of it was as transparent and easy to customize as possible so that you can more easily create the mobile Web app you desire.
11 | 
12 | Pleases visit [ChocolateChip-UI's Website](http://chocolatechip-ui.com) to access tutorials and documentation on how to best utilize it for your purposes. The download here also provides you with snippets and examples to help you get going right away.


--------------------------------------------------------------------------------
/examples/tableview-simple-grouped-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Grouped Tableviews 1</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped">
28 | 						<tablecell>
29 | 							<celltitle>People</celltitle>
30 | 						</tablecell>
31 | 						<tablecell>
32 | 							<celltitle>Places</celltitle>
33 | 						</tablecell>
34 | 						<tablecell>
35 | 							<celltitle>Things</celltitle>
36 | 						</tablecell>
37 | 						<tablecell>
38 | 							<celltitle>Animals</celltitle>
39 | 						</tablecell>
40 | 						<tablecell>
41 | 							<celltitle>Food</celltitle>
42 | 						</tablecell>
43 | 					</tableview>
44 | 				</scrollpanel>
45 | 			</subview>
46 | 		</view>
47 | 	</app>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/examples/tableview-with-tablefooter.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Tableviews 1</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tablecell>
29 | 							<celltitle>People</celltitle>
30 | 						</tablecell>
31 | 						<tablecell>
32 | 							<celltitle>Places</celltitle>
33 | 						</tablecell>
34 | 						<tablecell>
35 | 							<celltitle>Things</celltitle>
36 | 						</tablecell>
37 | 						<tablecell>
38 | 							<celltitle>Animals</celltitle>
39 | 						</tablecell>
40 | 						<tablecell>
41 | 							<celltitle>Food</celltitle>
42 | 						</tablecell>
43 | 						<tablefooter>
44 | 							A quick summary about all of the items in this list.
45 | 						</tablefooter>
46 | 					</tableview>
47 | 				</scrollpanel>
48 | 			</subview>
49 | 		</view>
50 | 	</app>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/examples/tableview-with-tableheader.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Tableviews 1</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tableheader>
29 | 							A basic tableheader here to announce what this tableview is about.
30 | 						</tableheader>
31 | 						<tablecell>
32 | 							<celltitle>People</celltitle>
33 | 						</tablecell>
34 | 						<tablecell>
35 | 							<celltitle>Places</celltitle>
36 | 						</tablecell>
37 | 						<tablecell>
38 | 							<celltitle>Things</celltitle>
39 | 						</tablecell>
40 | 						<tablecell>
41 | 							<celltitle>Animals</celltitle>
42 | 						</tablecell>
43 | 						<tablecell>
44 | 							<celltitle>Food</celltitle>
45 | 						</tablecell>
46 | 					</tableview>
47 | 				</scrollpanel>
48 | 			</subview>
49 | 		</view>
50 | 	</app>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/icons/info.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path d="M24,5.688C13.334,5.688,4.688,14.334,4.688,25S13.334,44.313,24,44.313S43.313,35.666,43.313,25S34.666,5.688,24,5.688z
 6 | 	 M28.736,34.5c-1.896,1.786-3.273,2.914-4.208,3.448c-1.065,0.607-1.969,0.903-2.765,0.903c-1.109,0-1.802-0.495-2.188-0.911
 7 | 	c-0.365-0.392-0.803-1.097-0.803-2.218c0-1.316,0.32-2.643,0.618-3.916c0.342-1.465,0.739-2.917,1.153-4.362
 8 | 	c0.28-0.98,0.91-2.095-0.478-2.293c-0.623-0.089-1.841,0.286-2.338-0.202c-0.442-0.434-0.183-1.372,0.178-1.77
 9 | 	c1.426-1.573,2.719-2.675,3.952-3.37c1.315-0.744,2.457-1.105,3.489-1.105c0.771,0,1.414,0.208,1.912,0.616
10 | 	c0.568,0.47,0.88,1.145,0.88,1.904c0,0.318,0,0.798-1.334,5.256c-0.325,1.092-0.645,2.187-0.949,3.284
11 | 	c-0.188,0.678-0.682,1.672-0.722,2.343c-0.06,0.988,0.978,0.599,1.532,0.377c0.544-0.218,0.938-0.509,1.343-0.512
12 | 	c0.235-0.001,0.474,0.096,0.747,0.362c0.292,0.285,0.456,0.678,0.452,1.087C29.204,33.83,29.034,34.22,28.736,34.5z M28.218,15.829
13 | 	c-0.86,0.947-1.809,1.146-2.452,1.146c-0.806,0-1.521-0.303-2.067-0.876c-0.528-0.557-0.806-1.287-0.806-2.114
14 | 	c0-0.96,0.333-1.83,0.964-2.516c0.666-0.722,1.516-1.103,2.459-1.103c0.811,0,1.527,0.295,2.073,0.854
15 | 	c0.536,0.549,0.819,1.268,0.819,2.078C29.208,14.243,28.865,15.118,28.218,15.829z"/>
16 | </svg>
17 | 


--------------------------------------------------------------------------------
/icons/target.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:svg="http://www.w3.org/2000/svg"
 4 |    xmlns="http://www.w3.org/2000/svg"
 5 |    version="1.1"
 6 |    width="64"
 7 |    height="64"
 8 |    id="svg3087">
 9 |   <defs
10 |      id="defs3369" />
11 |   <path
12 |      d="m 6.4340702,57.706556 51.0299998,0 0,-51.0299998 -51.0299998,0 0,51.0299998 z"
13 |      id="path3150"
14 |      style="fill:#000000;fill-opacity:0;fill-rule:nonzero;stroke:none" />
15 |   <g
16 |      id="layer1">
17 |     <path
18 |        d="m 57.488018,32.21965 a 25.70767,25.70767 0 1 1 -51.4153404,0 25.70767,25.70767 0 1 1 51.4153404,0 z"
19 |        transform="matrix(0.9,0,0,0.9,3.1780348,3.221965)"
20 |        id="path4239"
21 |        style="fill:none;stroke:#000000;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
22 |     <path
23 |        d="m 29.958546,17.037956 a 13.157469,13.157469 0 1 1 -26.3149379,0 13.157469,13.157469 0 1 1 26.3149379,0 z"
24 |        transform="translate(15.080484,15.586539)"
25 |        id="path4243"
26 |        style="fill:none;stroke:#000000;stroke-width:5.69999981;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
27 |     <path
28 |        d="m 32.488828,28.576046 a 3.4411843,3.4411843 0 1 1 -6.882369,0 3.4411843,3.4411843 0 1 1 6.882369,0 z"
29 |        transform="translate(2.8339164,4.3520859)"
30 |        id="path4245"
31 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:5.69999981;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
32 |   </g>
33 | </svg>
34 | 


--------------------------------------------------------------------------------
/icons/todo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 6 |    xmlns:cc="http://creativecommons.org/ns#"
 7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 8 |    xmlns:svg="http://www.w3.org/2000/svg"
 9 |    xmlns="http://www.w3.org/2000/svg"
10 |    version="1.1"
11 |    width="48"
12 |    height="48"
13 |    viewBox="0 0 48 48"
14 |    id="Layer_2"
15 |    xml:space="preserve"><metadata
16 |    id="metadata9"><rdf:RDF><cc:Work
17 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
18 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
19 |    <defs
20 |    id="defs9" />
21 | 
22 | <g
23 |    transform="matrix(2.0592368,0,0,1.9976273,5.9134652,4.5396248)"
24 |    id="g2819"><path
25 |      d="m 14,11.249 v 4.333 C 14,16.364 13.356,17 12.564,17 H 3.436 C 2.644,17 2,16.364 2,15.582 V 6.417 C 2,5.636 2.644,5 3.436,5 H 8.988 L 10.843,3 H 3.436 C 1.541,3 0,4.533 0,6.417 v 9.165 C 0,17.467 1.541,19 3.436,19 h 9.129 C 14.459,19 16,17.467 16,15.582 v -6.49 l -2,2.157 z"
26 |      id="path3" /><path
27 |      d="M 9.503,13.681 C 9.11,13.681 8.62,13.422 8.615,13.419 L 4.418,9.842 4.243,9.7 C 4.197,9.45 4.083,8.5 4.812,7.666 5.147,7.284 5.54,7.09 5.981,7.09 c 0.338,0 0.584,0.119 0.586,0.12 L 6.79,7.42 9.064,9.463 9.194,9.28 C 11.654,5.816 15.4,0.575 15.637,0.335 15.74,0.232 15.888,0.18 16.076,0.18 c 0.331,0 0.766,0.16 1.257,0.464 0.835,0.515 0.488,1.792 0.484,1.805 l -7.66,10.886 c 0,0 -0.263,0.327 -0.618,0.344 l -0.036,0.002 z"
28 |      id="path5" /></g>
29 | </svg>


--------------------------------------------------------------------------------
/icons/cog.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <g id="Layer_2">
 6 | 	<path d="M42.38,21.005h-3.682c-0.395-1.938-1.165-3.741-2.229-5.331l2.618-2.619c0.229-0.229,0.229-0.6,0-0.828l-3.353-3.353
 7 | 		c-0.229-0.229-0.601-0.229-0.829,0l-2.628,2.628c-1.589-1.056-3.387-1.818-5.32-2.207V5.581c0-0.323-0.262-0.585-0.586-0.585
 8 | 		h-4.742c-0.323,0-0.585,0.262-0.585,0.585v3.715c-1.934,0.388-3.733,1.151-5.322,2.207l-2.629-2.629
 9 | 		c-0.228-0.229-0.599-0.229-0.828,0l-3.353,3.353c-0.229,0.229-0.228,0.599,0,0.828l2.619,2.619
10 | 		c-1.065,1.59-1.835,3.393-2.229,5.331H5.619c-0.323,0-0.585,0.262-0.585,0.586v4.742c0,0.323,0.262,0.585,0.585,0.585H9.29
11 | 		c0.386,1.948,1.15,3.761,2.212,5.359l-2.591,2.591c-0.229,0.229-0.229,0.599,0,0.828l3.353,3.354c0.229,0.229,0.599,0.229,0.828,0
12 | 		l2.582-2.582c1.601,1.072,3.417,1.844,5.37,2.235v3.639c0,0.323,0.262,0.586,0.585,0.586h4.742c0.324,0,0.586-0.263,0.586-0.586
13 | 		v-3.639c1.952-0.393,3.769-1.164,5.368-2.235l2.581,2.581c0.229,0.229,0.6,0.229,0.828,0l3.353-3.353
14 | 		c0.229-0.229,0.229-0.601,0-0.829l-2.59-2.59c1.063-1.599,1.827-3.411,2.213-5.359h3.67c0.323,0,0.586-0.262,0.586-0.585v-4.742
15 | 		C42.966,21.267,42.703,21.005,42.38,21.005z M23.999,33.131c-5.035,0-9.131-4.097-9.131-9.131c0-5.035,4.096-9.132,9.131-9.132
16 | 		c5.036,0,9.133,4.097,9.133,9.132C33.132,29.034,29.035,33.131,23.999,33.131z"/>
17 | </g>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/icons/new_page.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:svg="http://www.w3.org/2000/svg"
 6 |    xmlns="http://www.w3.org/2000/svg"
 7 |    xmlns:xlink="http://www.w3.org/1999/xlink"
 8 |    version="1.1"
 9 |    width="64"
10 |    height="64"
11 |    id="svg7013">
12 |   <defs
13 |      id="defs7015" />
14 |   <g
15 |      id="layer1">
16 |     <path
17 |        d="m 46.026223,53.09372 0,3.192388 -35.998163,0 0,-46.283353 23.655936,0 12.342227,9.5138 0,8.2486"
18 |        id="path7031"
19 |        style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
20 |     <g
21 |        transform="matrix(1.5185114,0,0,1.5413457,-40.767092,-16.901701)"
22 |        id="g7547">
23 |       <path
24 |          d="m 52.852116,30.77867 0.09438,12.741135"
25 |          id="path7543"
26 |          style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
27 |       <use
28 |          transform="matrix(0.00832577,-0.99996534,0.99996534,0.00832577,15.310928,89.643035)"
29 |          id="use7545"
30 |          x="0"
31 |          y="0"
32 |          width="64"
33 |          height="64"
34 |          xlink:href="#path7543" />
35 |     </g>
36 |     <path
37 |        d="m 33.787603,9.6378236 -10e-7,9.8334384 11.702969,0.09438 -11.702968,-9.9278174 z"
38 |        id="path7607"
39 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
40 |   </g>
41 | </svg>
42 | 


--------------------------------------------------------------------------------
/examples/tableview-simple-4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Tableviews 4</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
29 | 							<img src="../images/blues.png">
30 | 							<celltitle>Song 1</celltitle>
31 | 						</tablecell>
32 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
33 | 							<img src="../images/classical.png">
34 | 							<celltitle>Song 2</celltitle>
35 | 						</tablecell>
36 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
37 | 							<img src="../images/itunes.png">
38 | 							<celltitle>Song 3</celltitle>
39 | 						</tablecell>
40 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
41 | 							<img src="../images/killers.png">
42 | 							<celltitle>Song 4</celltitle>
43 | 						</tablecell>
44 | 					</tableview>
45 | 				</scrollpanel>
46 | 			</subview>
47 | 		</view>
48 | 	</app>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/examples/tableview-simple-grouped-4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Grouped Tableviews 4</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped">
28 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
29 | 							<img src="../images/blues.png">
30 | 							<celltitle>Song 1</celltitle>
31 | 						</tablecell>
32 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
33 | 							<img src="../images/classical.png">
34 | 							<celltitle>Song 2</celltitle>
35 | 						</tablecell>
36 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
37 | 							<img src="../images/itunes.png">
38 | 							<celltitle>Song 3</celltitle>
39 | 						</tablecell>
40 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
41 | 							<img src="../images/killers.png">
42 | 							<celltitle>Song 4</celltitle>
43 | 						</tablecell>
44 | 					</tableview>
45 | 				</scrollpanel>
46 | 			</subview>
47 | 		</view>
48 | 	</app>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/examples/tableview-advanced-4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 4</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-tablecell-order="centered">
28 | 						<tablecell>
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 						</tablecell>
32 | 						<tablecell >
33 | 							<celltitle>Places</celltitle>
34 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
35 | 						</tablecell>
36 | 						<tablecell>
37 | 							<celltitle>Funny Animals</celltitle>
38 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
39 | 						</tablecell>
40 | 						<tablecell>
41 | 							<celltitle>Food</celltitle>
42 | 							<cellsubtitle>Recipes</cellsubtitle>
43 | 						</tablecell>
44 | 						<tablecell>
45 | 							<celltitle>Good Eats</celltitle>
46 | 							<cellsubtitle>Restaurants</cellsubtitle>
47 | 						</tablecell>
48 | 					</tableview>				
49 | 				</scrollpanel>
50 | 			</subview>
51 | 		</view>
52 | 	</app>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 4</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped" ui-tablecell-order="centered">
28 | 						<tablecell>
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 						</tablecell>
32 | 						<tablecell >
33 | 							<celltitle>Places</celltitle>
34 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
35 | 						</tablecell>
36 | 						<tablecell>
37 | 							<celltitle>Funny Animals</celltitle>
38 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
39 | 						</tablecell>
40 | 						<tablecell>
41 | 							<celltitle>Food</celltitle>
42 | 							<cellsubtitle>Recipes</cellsubtitle>
43 | 						</tablecell>
44 | 						<tablecell>
45 | 							<celltitle>Good Eats</celltitle>
46 | 							<cellsubtitle>Restaurants</cellsubtitle>
47 | 						</tablecell>
48 | 					</tableview>				
49 | 				</scrollpanel>
50 | 			</subview>
51 | 		</view>
52 | 	</app>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/examples/tableview-simple-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Tableviews 2</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tablecell>
29 | 							<celltitle>People</celltitle>
30 | 						</tablecell>
31 | 						<tablecell ui-implements="disclosure">
32 | 							<celltitle>Places</celltitle>
33 | 						</tablecell>
34 | 						<tablecell ui-implements="disclosure">
35 | 							<celltitle>This is an example of a very long item that will be truncated because it does fit.</celltitle>
36 | 						</tablecell>
37 | 						<tablecell ui-implements="detail-disclosure">
38 | 							<celltitle>Food</celltitle>
39 | 						</tablecell>
40 | 						<tablecell ui-implements="detail-disclosure" class="green">
41 | 							<celltitle>Food</celltitle>
42 | 						</tablecell>
43 | 						<tablecell ui-implements="add">
44 | 							<celltitle>Food</celltitle>
45 | 						</tablecell>
46 | 						<tablecell ui-implements="add" class="green">
47 | 							<celltitle>Food</celltitle>
48 | 						</tablecell>
49 | 					</tableview>
50 | 				</scrollpanel>
51 | 			</subview>
52 | 		</view>
53 | 	</app>
54 | </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/README.markdown:
--------------------------------------------------------------------------------
 1 | #ChocolateChip-UI for Zepto
 2 | 
 3 | ##Notice: All work on this repository has been terminated!
 4 | 
 5 | ###October 30, 2012
 6 | 
 7 | **There is now a new version of [ChocolateChip-UI 2.0](https://github.com/rbiggs/chocolatechip-ui) that works for ChocolateChip.js, jQuery and Zepto. As such, there is no longer any need for separate versions for jQuery and Zepto. The new version contains a magical abstraction layer to make this possible. This means that with only one version, everyone gets the same features, behaviors, widgets and bug fixes at the same time.**
 8 | 
 9 | ChocolateChip-UI is a mobile Web app framework using HTML5, WAML, CSS and JavaScript. This version runs on top of Zepto. If you have been using Zepto for you mobile Web app needs, this can round out your needs nicely. You can take advantage of the rich feature set of ChocolateChip-UI running on top of Zepto for a complete development framework.
10 | 
11 | ChocolateChip-UI uses specially defined markup for clarity and conciseness to construct your app. ChocolateChip-UI's CSS and JavaScript will imbue the app with styling and basic functionality. Using simple one-liners you can active handed coded markup into sophisticated controls. Or with simple initialization routines you can create controls dynamically.
12 | 
13 | ChocolateChip-UI takes advantage of HTML5, CSS3 and JavaScript to deliver a consistent, focused, easy to use and compact framework for creating mobile apps rivaling native iOS apps. At the same time care was taken to make sure every aspect of it was as transparent and easy to customize as possible so that you can more easily create the mobile Web app you desire.
14 | 
15 | Pleases visit [ChocolateChip-UI's Website](http://chocolatechip-ui.com) to access tutorials and documentation on how to best utilize it for your purposes. The download here also provides you with snippets and examples to help you get going right away.
16 | 


--------------------------------------------------------------------------------
/examples/tableview-simple-grouped-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Grouped Tableviews 2</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |        
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped">
28 | 						<tablecell>
29 | 							<celltitle>People</celltitle>
30 | 						</tablecell>
31 | 						<tablecell ui-implements="disclosure">
32 | 							<celltitle>Places</celltitle>
33 | 						</tablecell>
34 | 						<tablecell ui-implements="disclosure">
35 | 							<celltitle>This is an example of a very long item that will be truncated because it does fit.</celltitle>
36 | 						</tablecell>
37 | 						<tablecell ui-implements="detail-disclosure">
38 | 							<celltitle>Food</celltitle>
39 | 						</tablecell>
40 | 						<tablecell ui-implements="detail-disclosure" class="green">
41 | 							<celltitle>Food</celltitle>
42 | 						</tablecell>
43 | 						<tablecell ui-implements="add">
44 | 							<celltitle>Food</celltitle>
45 | 						</tablecell>
46 | 						<tablecell ui-implements="add" class="green">
47 | 							<celltitle>Food</celltitle>
48 | 						</tablecell>
49 | 					</tableview>
50 | 				</scrollpanel>
51 | 			</subview>
52 | 		</view>
53 | 	</app>
54 | </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/examples/tableview-advanced-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 2</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-tablecell-order="stacked">
28 | 						<tablecell  ui-implements="disclosure">
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 						</tablecell>
32 | 						<tablecell  ui-implements="disclosure">
33 | 							<celltitle>Places</celltitle>
34 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
35 | 						</tablecell>
36 | 						<tablecell  ui-implements="disclosure">
37 | 							<celltitle>Funny Animals</celltitle>
38 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
39 | 						</tablecell>
40 | 						<tablecell  ui-implements="disclosure">
41 | 							<celltitle>Food</celltitle>
42 | 							<cellsubtitle>Recipes</cellsubtitle>
43 | 						</tablecell>
44 | 						<tablecell ui-implements="disclosure">
45 | 							<celltitle>Good Eats</celltitle>
46 | 							<cellsubtitle>Restaurants</cellsubtitle>
47 | 						</tablecell>
48 | 					</tableview>				
49 | 				</scrollpanel>
50 | 			</subview>
51 | 		</view>
52 | 	</app>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 2</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped" ui-tablecell-order="stacked">
28 | 						<tablecell  ui-implements="disclosure">
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 						</tablecell>
32 | 						<tablecell  ui-implements="disclosure">
33 | 							<celltitle>Places</celltitle>
34 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
35 | 						</tablecell>
36 | 						<tablecell  ui-implements="disclosure">
37 | 							<celltitle>Funny Animals</celltitle>
38 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
39 | 						</tablecell>
40 | 						<tablecell  ui-implements="disclosure">
41 | 							<celltitle>Food</celltitle>
42 | 							<cellsubtitle>Recipes</cellsubtitle>
43 | 						</tablecell>
44 | 						<tablecell ui-implements="disclosure">
45 | 							<celltitle>Good Eats</celltitle>
46 | 							<cellsubtitle>Restaurants</cellsubtitle>
47 | 						</tablecell>
48 | 					</tableview>				
49 | 				</scrollpanel>
50 | 			</subview>
51 | 		</view>
52 | 	</app>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/icons/move_indicator.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 6 |    xmlns:cc="http://creativecommons.org/ns#"
 7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 8 |    xmlns:svg="http://www.w3.org/2000/svg"
 9 |    xmlns="http://www.w3.org/2000/svg"
10 |    version="1.1"
11 |    width="48"
12 |    height="48"
13 |    viewBox="0 0 48 48"
14 |    id="Layer_2"
15 |    xml:space="preserve"><metadata
16 |    id="metadata12"><rdf:RDF><cc:Work
17 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
18 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
19 |    id="defs4447" />
20 | <rect
21 |    width="34.417259"
22 |    height="2.2182176"
23 |    x="6.2072716"
24 |    y="6.5302854"
25 |    id="rect4433"
26 |    style="opacity:0.4262295;fill:#323232;fill-opacity:1" />
27 | <rect
28 |    width="34.417259"
29 |    height="2.2182176"
30 |    x="6.2072716"
31 |    y="19.655834"
32 |    id="rect4435"
33 |    style="opacity:0.4262295;fill:#323232;fill-opacity:1" />
34 | <rect
35 |    width="34.417259"
36 |    height="2.2182176"
37 |    x="6.2072716"
38 |    y="32.781387"
39 |    id="rect4437"
40 |    style="opacity:0.4262295;fill:#323232;fill-opacity:1" />
41 | <rect
42 |    width="34.417259"
43 |    height="6.5977755"
44 |    x="6.2072716"
45 |    y="8.7156897"
46 |    id="rect4439"
47 |    style="opacity:0.7786885;fill:#646464;fill-opacity:1" />
48 | <rect
49 |    width="34.417259"
50 |    height="6.5977755"
51 |    x="6.2072716"
52 |    y="21.841242"
53 |    id="rect4441"
54 |    style="opacity:0.7786885;fill:#646464;fill-opacity:1" />
55 | <rect
56 |    width="34.417259"
57 |    height="6.5977755"
58 |    x="6.2072716"
59 |    y="34.966789"
60 |    id="rect4443"
61 |    style="opacity:0.7786885;fill:#646464;fill-opacity:1" />
62 | </svg>


--------------------------------------------------------------------------------
/examples/tableview-advanced-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 1</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tablecell ui-implements="detail-disclosure" class="green">
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 						</tablecell>
32 | 						<tablecell ui-implements="detail-disclosure" class="green">
33 | 							<celltitle>Places</celltitle>
34 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
35 | 						</tablecell>
36 | 						<tablecell ui-implements="detail-disclosure" class="green">
37 | 							<celltitle>Animals are a lot of fun</celltitle>
38 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
39 | 						</tablecell>
40 | 						<tablecell ui-implements="detail-disclosure" class="green">
41 | 							<celltitle>Food</celltitle>
42 | 							<cellsubtitle>Recipes</cellsubtitle>
43 | 						</tablecell>
44 | 						<tablecell ui-implements="detail-disclosure" class="green">
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Restaurants</cellsubtitle>
47 | 						</tablecell>
48 | 					</tableview>				
49 | 				</scrollpanel>
50 | 			</subview>
51 | 		</view>
52 | 	</app>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 1</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped">
28 | 						<tablecell ui-implements="detail-disclosure" class="green">
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 						</tablecell>
32 | 						<tablecell ui-implements="detail-disclosure" class="green">
33 | 							<celltitle>Places</celltitle>
34 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
35 | 						</tablecell>
36 | 						<tablecell ui-implements="detail-disclosure" class="green">
37 | 							<celltitle>Animals are a lot of fun</celltitle>
38 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
39 | 						</tablecell>
40 | 						<tablecell ui-implements="detail-disclosure" class="green">
41 | 							<celltitle>Food</celltitle>
42 | 							<cellsubtitle>Recipes</cellsubtitle>
43 | 						</tablecell>
44 | 						<tablecell ui-implements="detail-disclosure" class="green">
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Restaurants</cellsubtitle>
47 | 						</tablecell>
48 | 					</tableview>				
49 | 				</scrollpanel>
50 | 			</subview>
51 | 		</view>
52 | 	</app>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/icons/apple_logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 |   <defs
 6 |      id="defs3195" />
 7 |   <g
 8 |      id="layer1"
 9 |      style="display:none">
10 |     <image
11 |        xlink:href="file:///Users/rbiggs/chocolatechip-ui-03/examples/icons/apple-logo.jpg"
12 |        x="-62"
13 |        y="-53"
14 |        width="172"
15 |        height="154"
16 |        id="image3320" />
17 |   </g>
18 |   <g
19 |      id="layer2">
20 |     <path
21 |        d="m 24.14482,14.339862 c 2.442688,0.06068 3.872553,-1.941915 6.791863,-1.820545 2.91931,0.121369 6.287582,2.824015 7.328063,3.88383 0.178734,0.182055 -2.948891,1.237653 -3.991709,5.097528 -1.789912,6.625158 5.123686,9.952316 5.123686,9.952316 0,0 -0.164112,1.889068 -2.680999,5.097528 -2.526408,3.220598 -3.69382,4.672734 -5.898196,4.794103 -2.026187,0.111558 -4.349176,-1.820546 -6.374819,-1.88123 -2.147178,-0.06433 -4.349176,2.306024 -6.553553,2.0026 C 15.68478,41.162567 12.467581,41.223252 9.7865825,33.8197 7.105584,26.416148 6.3222114,21.563133 9.5482717,16.767256 c 2.0826733,-3.096112 3.9321313,-4.12657 7.5067963,-4.12657 3.574665,0 4.706642,1.820546 7.089752,1.699176 z"
22 |        id="path3325"
23 |        style="fill:#000000;stroke:#000000;stroke-width:0.42090127px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
24 |     <path
25 |        d="m 24.740597,6.8149412 c 2.4129,-2.5487643 5.481153,-2.7915034 5.481153,-2.7915034 0,0 0.442151,3.5863401 -1.84691,6.1291692 -2.162553,2.402299 -5.302419,2.852189 -5.302419,2.852189 0,0 -0.8043,-3.4286942 1.668176,-6.1898548 z"
26 |        id="path3327"
27 |        style="fill:#000000;stroke:#000000;stroke-width:0.42090127px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
28 |   </g>
29 | </svg>
30 | 


--------------------------------------------------------------------------------
/examples/tableview-advanced-10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 2</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-tablecell-order="stacked">
28 | 						<tablecell  ui-implements="disclosure">
29 | 							<cellcounter>22</cellcounter>
30 | 							<celltitle>People</celltitle>
31 | 							<cellsubtitle>Your Friends</cellsubtitle>
32 | 						</tablecell>
33 | 						<tablecell  ui-implements="disclosure">
34 | 							<cellcounter>32</cellcounter>
35 | 							<celltitle>Places</celltitle>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 						</tablecell>
38 | 						<tablecell  ui-implements="disclosure">
39 | 							<cellcounter>5</cellcounter>
40 | 							<celltitle>Funny Animals</celltitle>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 						</tablecell>
43 | 						<tablecell  ui-implements="disclosure">
44 | 							<cellcounter>43</cellcounter>
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 						</tablecell>
48 | 						<tablecell ui-implements="disclosure">
49 | 							<cellcounter>129</cellcounter>
50 | 							<celltitle>Good Eats</celltitle>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 						</tablecell>
53 | 					</tableview>				
54 | 				</scrollpanel>
55 | 			</subview>
56 | 		</view>
57 | 	</app>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/examples/tableview-simple-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Tableviews 3</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
29 | 							<img src="../images/ipod.png">
30 | 							<celltitle>People</celltitle>
31 | 						</tablecell>
32 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
33 | 							<img src="../images/phone.png">
34 | 							<celltitle>Places</celltitle>
35 | 						</tablecell>
36 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
37 | 							<img src="../images/mail.png">
38 | 							<celltitle>This is an example of a very long item that will be truncated because it does not fit.</celltitle>
39 | 						</tablecell>
40 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
41 | 							<img src="../images/safari.png">
42 | 							<celltitle>Animals</celltitle>
43 | 						</tablecell>
44 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
45 | 							<img src="../images/sms.png">
46 | 							<celltitle>Food</celltitle>
47 | 						</tablecell>
48 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
49 | 							<img src="../images/store.png">
50 | 							<celltitle>Stuff</celltitle>
51 | 						</tablecell>
52 | 					</tableview>				
53 | 				</scrollpanel>
54 | 			</subview>
55 | 		</view>
56 | 	</app>
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/examples/tableview-simple-grouped-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Grouped Tableviews 3</title>
 8 |     <link rel="stylesheet" href="chui/chui.css">
 9 |     <script src="chui/chocolatechip.js" type="text/javascript"></script>
10 |     <script src="chui/chui.js" type="text/javascript"></script>
11 |     <script type="text/javascript">
12 |         $(function() {
13 |         
14 | 		});
15 |     </script>
16 |     
17 | </head>
18 | <body>
19 | 	<app>
20 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
21 | 			<navbar>
22 | 				<h1>Tableview</h1>
23 | 			</navbar>
24 | 			<subview ui-associations="withNavBar">
25 | 				<scrollpanel>
26 | 					<tableview ui-kind="grouped">
27 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
28 | 							<img src="../images/ipod.png">
29 | 							<celltitle>People</celltitle>
30 | 						</tablecell>
31 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
32 | 							<img src="../images/phone.png">
33 | 							<celltitle>Places</celltitle>
34 | 						</tablecell>
35 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
36 | 							<img src="../images/mail.png">
37 | 							<celltitle>This is an example of a very long item that will be truncated because it does not fit.</celltitle>
38 | 						</tablecell>
39 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
40 | 							<img src="../images/safari.png">
41 | 							<celltitle>Animals</celltitle>
42 | 						</tablecell>
43 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
44 | 							<img src="../images/sms.png">
45 | 							<celltitle>Food</celltitle>
46 | 						</tablecell>
47 | 						<tablecell ui-usage="icon" ui-implements="disclosure">
48 | 							<img src="../images/store.png">
49 | 							<celltitle>Stuff</celltitle>
50 | 					</tableview>
51 | 				</scrollpanel>
52 | 			</subview>
53 | 		</view>
54 | 	</app>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/icons/badge.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 |   <g
 6 |      id="layer2">
 7 |     <g
 8 |        transform="matrix(1,0,0,-1,-0.98531869,1184.6178)"
 9 |        id="g6187">
10 |       <g
11 |          id="g6189" />
12 |       <g
13 |          id="g6191">
14 |         <path
15 |            d="m 37.49576,1157.087 -7.51062,-5.333 2.78988,-8.779 -7.39329,5.495 -7.48724,-5.367 2.94132,8.73 -7.41725,5.462 9.21113,-0.099 2.90312,8.742 2.75147,-8.791 9.21148,-0.06 z"
16 |            id="path6193"
17 |            style="fill:#373737;fill-opacity:1;fill-rule:nonzero;stroke:none" />
18 |         <g
19 |            transform="matrix(1,0,0,-1,0,1191.97)"
20 |            id="g6195">
21 |           <path
22 |              d="m 37.49576,34.88318 -7.51062,5.33349 2.78988,8.77906 -7.39329,-5.495 -7.48724,5.36621 2.94132,-8.72937 -7.41725,-5.46264 9.21113,0.09985 2.90312,-8.74219 2.75147,8.79114 9.21148,0.05945 z"
23 |              id="path6197"
24 |              style="fill:none;stroke:#373737;stroke-width:2.24299097;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
25 |         </g>
26 |         <path
27 |            d="m 38.0308,1180.665 -6.13008,0.018 0.0521,-20.092 2.2749,-0.018 3.75098,3.769 0.0521,16.323 z"
28 |            id="path6199"
29 |            style="fill:#9d9d9d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
30 |         <path
31 |            d="m 12.93742,1180.665 6.13008,0.018 -0.0521,-20.092 -2.2749,-0.018 -3.75098,3.769 -0.0521,16.323 z"
32 |            id="path6201"
33 |            style="fill:#9d9d9d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
34 |         <path
35 |            d="m 22.47116,1180.7 6.13009,0 0,-15.907 -3.17792,8.561 -2.95217,-8.561 0,15.907 z"
36 |            id="path6203"
37 |            style="fill:#9d9d9d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
38 |       </g>
39 |     </g>
40 |   </g>
41 | </svg>
42 | 


--------------------------------------------------------------------------------
/examples/tableview-advanced-8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 7</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-tablecell-order="stacked">
28 | 						<tablecell ui-implements="disclosure">
29 | 							<celltitle>People</celltitle>
30 | 							<celldatetime>Monday</celldatetime>
31 | 							<cellsubtitle>Your Friends</cellsubtitle>
32 | 						</tablecell>
33 | 						<tablecell ui-implements="disclosure">
34 | 							<celltitle>Places</celltitle>
35 | 							<celldatetime>3/14/10</celldatetime>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 						</tablecell>
38 | 						<tablecell ui-implements="disclosure">
39 | 							<celltitle>Funny Animals</celltitle>
40 | 							<celldatetime>12:30 PM</celldatetime>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 						</tablecell>
43 | 						<tablecell ui-implements="disclosure">
44 | 							<celltitle>Food</celltitle>
45 | 							<celldatetime>Noon</celldatetime>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 						</tablecell>
48 | 						<tablecell ui-implements="disclosure">
49 | 							<celltitle>Good Eats</celltitle>
50 | 							<celldatetime>Next Week</celldatetime>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 						</tablecell>
53 | 					</tableview>				
54 | 				</scrollpanel>
55 | 			</subview>
56 | 		</view>
57 | 	</app>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 7</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped" ui-tablecell-order="stacked">
28 | 						<tablecell ui-implements="disclosure">
29 | 							<celltitle>People</celltitle>
30 | 							<celldatetime>Monday</celldatetime>
31 | 							<cellsubtitle>Your Friends</cellsubtitle>
32 | 						</tablecell>
33 | 						<tablecell ui-implements="disclosure">
34 | 							<celltitle>Places</celltitle>
35 | 							<celldatetime>3/14/10</celldatetime>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 						</tablecell>
38 | 						<tablecell ui-implements="disclosure">
39 | 							<celltitle>Funny Animals</celltitle>
40 | 							<celldatetime>12:30 PM</celldatetime>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 						</tablecell>
43 | 						<tablecell ui-implements="disclosure">
44 | 							<celltitle>Food</celltitle>
45 | 							<celldatetime>Noon</celldatetime>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 						</tablecell>
48 | 						<tablecell ui-implements="disclosure">
49 | 							<celltitle>Good Eats</celltitle>
50 | 							<celldatetime>Next Week</celldatetime>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 						</tablecell>
53 | 					</tableview>				
54 | 				</scrollpanel>
55 | 			</subview>
56 | 		</view>
57 | 	</app>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 3</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-tablecell-order="stacked">
28 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
29 | 							<img src="../images/alternative.png">
30 | 							<celltitle>People</celltitle>
31 | 							<cellsubtitle>Your Friends</cellsubtitle>
32 | 						</tablecell>
33 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
34 | 							<img src="../images/blues.png">
35 | 							<celltitle>Places</celltitle>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 						</tablecell>
38 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
39 | 							<img src="../images/classical.png">
40 | 							<celltitle>Funny Animals</celltitle>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 						</tablecell>
43 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
44 | 							<img src="../images/itunes.png">
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 						</tablecell>
48 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
49 | 							<img src="../images/killers.png">
50 | 							<celltitle>Good Eats</celltitle>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 						</tablecell>
53 | 					</tableview>				
54 | 				</scrollpanel>
55 | 			</subview>
56 | 		</view>
57 | 	</app>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/examples/tableview-simple-5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Tableviews 5</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tablecell class="ui-no-hover">
29 | 							<celltitle>People</celltitle>
30 | 							<switchcontrol class="off" id="sleepSwitch" ui-value="ZZZZZZZZ!">
31 | 								<label ui-implements="on">ON</label>
32 | 								<thumb><thumbprop></thumbprop></thumb>
33 | 								<label ui-implements="off">OFF</label>
34 | 							</switchcontrol>
35 | 						</tablecell>
36 | 						<tablecell class="ui-no-hover"">
37 | 							<celltitle>Places</celltitle>
38 | 							<switchcontrol class="on" id="eatSwitch" ui-value="Yummy!">
39 | 								<label ui-implements="on">ON</label>
40 | 								<thumb><thumbprop></thumbprop></thumb>
41 | 								<label ui-implements="off">OFF</label>
42 | 							</switchcontrol>
43 | 						</tablecell>
44 | 						<tablecell ui-implements="celltitle-with-button" class="ui-no-hover">
45 | 							<celltitle>Things</celltitle>
46 | 							<uibutton>
47 | 								<label>View</label>
48 | 							</uibutton>
49 | 						</tablecell>
50 | 						<tablecell ui-implements="celltitle-with-button" class="ui-no-hover">
51 | 							<celltitle>Animals</celltitle>
52 | 							<uibutton>
53 | 								<label>See</label>
54 | 							</uibutton>
55 | 						</tablecell>
56 | 						<tablecell>
57 | 							<celltitle>Food</celltitle>
58 | 						</tablecell>
59 | 					</tableview>
60 | 				</scrollpanel>
61 | 			</subview>
62 | 		</view>
63 | 	</app>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 3</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped" ui-tablecell-order="stacked">
28 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
29 | 							<img src="../images/alternative.png">
30 | 							<celltitle>People</celltitle>
31 | 							<cellsubtitle>Your Friends</cellsubtitle>
32 | 						</tablecell>
33 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
34 | 							<img src="../images/blues.png">
35 | 							<celltitle>Places</celltitle>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 						</tablecell>
38 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
39 | 							<img src="../images/classical.png">
40 | 							<celltitle>Funny Animals</celltitle>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 						</tablecell>
43 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
44 | 							<img src="../images/itunes.png">
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 						</tablecell>
48 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
49 | 							<img src="../images/killers.png">
50 | 							<celltitle>Good Eats</celltitle>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 						</tablecell>
53 | 					</tableview>				
54 | 				</scrollpanel>
55 | 			</subview>
56 | 		</view>
57 | 	</app>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/icons/computer.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:svg="http://www.w3.org/2000/svg"
 6 |    xmlns="http://www.w3.org/2000/svg"
 7 |    version="1.1"
 8 |    width="64"
 9 |    height="64"
10 |    id="svg2878">
11 |   <defs
12 |      id="defs2880" />
13 |   <g
14 |      id="layer1">
15 |     <g
16 |        transform="matrix(1.25,0,0,-1.25,5.6879862,1497.8505)"
17 |        id="g2958">
18 |       <g
19 |          id="g2960" />
20 |       <g
21 |          id="g2962">
22 |         <g
23 |            transform="matrix(1,0,0,-1,0,1191.97)"
24 |            id="g2964">
25 |           <path
26 |              d="m 4.806353,28.30078 c -1.02147,0 -1.849551,-0.828 -1.849551,-1.84949 l 0,-22.630489 c 0,-1.021485 0.828081,-1.84961 1.849551,-1.84961 l 32.486517,0 c 1.02147,0 1.84955,0.828125 1.84955,1.84961 l 0,22.630489 c 0,1.02149 -0.82808,1.84949 -1.84955,1.84949 l -32.486517,0 z"
27 |              id="path2966"
28 |              style="fill:none;stroke:#000000;stroke-width:2.24299097;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
29 |         </g>
30 |         <path
31 |            d="m 17.03681,1155.644 8.166405,0 0,4.928 -8.166405,0 0,-4.928 z"
32 |            id="path2968"
33 |            style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
34 |         <g
35 |            transform="matrix(1,0,0,-1,0,1191.97)"
36 |            id="g2970">
37 |           <path
38 |              d="m 17.03681,31.39844 8.166405,0 0,4.927979 -8.166405,0 0,-4.927979 z"
39 |              id="path2972"
40 |              style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
41 |         </g>
42 |         <g
43 |            transform="matrix(1,0,0,-1,0,1191.97)"
44 |            id="g2974">
45 |           <path
46 |              d="m 13.02401,35.97449 15.98081,0 0,0.633545 -15.98081,0 0,-0.633545 z"
47 |              id="path2976"
48 |              style="fill:none;stroke:#000000;stroke-width:2.24299097;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
49 |         </g>
50 |       </g>
51 |     </g>
52 |   </g>
53 | </svg>
54 | 


--------------------------------------------------------------------------------
/examples/deletion_list-images-grouped.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Deletion List - Images</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 | 		$(function() {
14 | 			$("tableview:first-of-type").UIIdentifyChildNodes();
15 | 			var deleteItem = function(item) {
16 | 				$("tablefooter").append("<p>あなたは、テーブルのセルを削除 " +  (parseInt(item.getAttribute("ui-child-position"),10)+1) + "</p>");
17 | 			};
18 | 			$.UIDeleteTableCell({selector:"tableview", toolbar: "#toolbar1", callback: deleteItem, editButton: ["編集","既成"], deleteButton: "削除"});
19 | 		});
20 | 	</script>
21 | </head>
22 | <body>
23 | 	<app>
24 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
25 | 			<navbar id="toolbar1">
26 | 				<h1>日本</h1>
27 | 			</navbar>
28 | 			<subview ui-associations="withNavBar">
29 | 				<scrollpanel>
30 | 					<tableview ui-kind="grouped" ui-tablecell-order="stacked">
31 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
32 | 							<img src="../images/alternative.png">
33 | 							<celltitle>重要な人々</celltitle>
34 | 							<cellsubtitle>あなたの友人</cellsubtitle>
35 | 						</tablecell>
36 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
37 | 							<img src="../images/blues.png">
38 | 							<celltitle>場所</celltitle>
39 | 							<cellsubtitle>興味深い目的地</cellsubtitle>
40 | 						</tablecell>
41 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
42 | 							<img src="../images/classical.png">
43 | 							<celltitle>面白い動物</celltitle>
44 | 							<cellsubtitle>世界中からクリッター</cellsubtitle>
45 | 						</tablecell>
46 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
47 | 							<img src="../images/itunes.png">
48 | 							<celltitle>良い食品</celltitle>
49 | 							<cellsubtitle>レシピ</cellsubtitle>
50 | 						</tablecell>
51 | 						<tablefooter></tablefooter>
52 | 					</tableview>						
53 | 				</scrollpanel>
54 | 			</subview>
55 | 		</view>
56 | 	</app>
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/examples/tableview-advanced-9.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 9</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-tablecell-order="stacked">
28 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
29 | 							<img src="../images/ipod.png">
30 | 							<cellcounter>2</cellcounter>
31 | 							<celltitle>People</celltitle>
32 | 							<cellsubtitle>Your Friends</cellsubtitle>
33 | 						</tablecell>
34 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
35 | 							<img src="../images/phone.png">
36 | 							<cellcounter>14</cellcounter>
37 | 							<celltitle>Places</celltitle>
38 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
39 | 						</tablecell>
40 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
41 | 							<img src="../images/mail.png">
42 | 							<cellcounter>83</cellcounter>
43 | 							<celltitle>Funny Animals</celltitle>
44 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
45 | 						</tablecell>
46 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
47 | 							<img src="../images/safari.png">
48 | 							<cellcounter>22</cellcounter>
49 | 							<celltitle>Food</celltitle>
50 | 							<cellsubtitle>Recipes</cellsubtitle>
51 | 						</tablecell>
52 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
53 | 							<img src="../images/sms.png">
54 | 							<cellcounter>19</cellcounter>
55 | 							<celltitle>Good Eats</celltitle>
56 | 							<cellsubtitle>Restaurants</cellsubtitle>
57 | 						</tablecell>
58 | 					</tableview>					
59 | 				</scrollpanel>
60 | 			</subview>
61 | 		</view>
62 | 	</app>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-9.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 9</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped" ui-tablecell-order="stacked">
28 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
29 | 							<img src="../images/ipod.png">
30 | 							<celltitle>People</celltitle>
31 | 							<cellcounter>2</cellcounter>
32 | 							<cellsubtitle>Your Friends</cellsubtitle>
33 | 						</tablecell>
34 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
35 | 							<img src="../images/phone.png">
36 | 							<celltitle>Places</celltitle>
37 | 							<cellcounter>14</cellcounter>
38 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
39 | 						</tablecell>
40 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
41 | 							<img src="../images/mail.png">
42 | 							<celltitle>Funny Animals</celltitle>
43 | 							<cellcounter>83</cellcounter>
44 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
45 | 						</tablecell>
46 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
47 | 							<img src="../images/safari.png">
48 | 							<celltitle>Food</celltitle>
49 | 							<cellcounter>22</cellcounter>
50 | 							<cellsubtitle>Recipes</cellsubtitle>
51 | 						</tablecell>
52 | 						<tablecell  ui-usage="icon" ui-implements="disclosure">
53 | 							<img src="../images/sms.png">
54 | 							<celltitle>Good Eats</celltitle>
55 | 							<cellcounter>19</cellcounter>
56 | 							<cellsubtitle>Restaurants</cellsubtitle>
57 | 						</tablecell>
58 | 					</tableview>					
59 | 				</scrollpanel>
60 | 			</subview>
61 | 		</view>
62 | 	</app>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/examples/deletion_list.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" id="htmlID" class="htmlClass">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<link rel="apple-touch-startup-image" href="startup.png">
 8 | 	<link rel="apple-touch-icon" href="chocolatechip-icon.png"/>
 9 | 	<link rel="shortcut icon" href="favicon.ico">
10 | 	<title>ChocolateChip Mobile</title>
11 | 	<link rel="stylesheet" href="../chui/chui.css">
12 | 	<style type="text/css">
13 | 		/* Local Styles Here */
14 | 		#selection_list_response {
15 | 			background-color: #fff;
16 | 			border: solid 1px #D9D9D9;
17 | 			border-left: none;
18 | 			border-right: none;
19 | 			margin: 20px 0;
20 | 			padding: 14px 10px;
21 | 		}
22 | 	</style>
23 |     <script src="../chui/zepto.js"></script>
24 |     <script src="../chui/chui.js"></script>
25 |     <script src="../chui/iscroll.js"></script>
26 | 	<script type="text/javascript">
27 | 		$(function() {
28 | 			var firstTime = true;
29 | 			var deleteItem = function(item) {
30 | 				var comma = firstTime ? "" : ", ";
31 | 				var text = item.querySelector("celltitle").innerText;
32 | 				$("#selection_list_response > span").append(comma + text);
33 | 				firstTime = false;
34 | 			};
35 | 			$.UIDeleteTableCell({selector: "tableview", toolbar: "navbar", callback: deleteItem, editButton: ["Yes","No"], deleteButton: "Delete"});
36 | 		});
37 | 	</script>
38 | </head>
39 | <body class="bodyClass" id="bodyID">
40 | 	<app id="appID" class="appClass">
41 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
42 | 			<navbar>
43 | 				<h1 ui-bar-align="center">Deletion List</h1>
44 | 			</navbar>
45 | 			<subview ui-associations="withNavBar">
46 | 				<scrollpanel>
47 | 					<tableview>
48 | 						<tablecell>
49 | 							<celltitle>People</celltitle>
50 | 						</tablecell>
51 | 						<tablecell>
52 | 							<celltitle>Places</celltitle>
53 | 						</tablecell>
54 | 						<tablecell>
55 | 							<celltitle>Things</celltitle>
56 | 						</tablecell>
57 | 						<tablecell>
58 | 							<celltitle>Animals</celltitle>
59 | 						</tablecell>
60 | 						<tablecell>
61 | 							<celltitle>Food</celltitle>
62 | 						</tablecell>
63 | 					</tableview>
64 | 					<p id="selection_list_response">You just deleted: <span></span></p>
65 | 				</scrollpanel>
66 | 			</subview>
67 | 		</view>
68 | 		
69 | 	</app>
70 | </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/examples/progressbar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<title>CSS3 Progress Bar</title>
 8 | 	<style type="text/css">
 9 | 		scrollpanel > section {
10 | 			padding: 20px;
11 | 		}
12 | 		progressbar.black {
13 | 			background-color: rgb(0,0,0);
14 | 		}
15 | 		progressbar.red {
16 | 			background-color: red;
17 | 		}
18 | 		progressbar.green {
19 | 			background-color: green;
20 | 		}
21 | 		progressbar.gold {
22 | 			background-color: gold;
23 | 		}
24 | 	</style>
25 | 	<link rel="stylesheet" href="../chui/chui.css">
26 |     <script src="../chui/zepto.js"></script>
27 |     <script src="../chui/iscroll.js"></script>
28 |     <script src="../chui/chui.js"></script>
29 | 	<script type="text/javascript">
30 | 		
31 | 		$(function() {
32 | 			$("section").UIProgressBar({speed: 1});
33 | 			$("section").UIProgressBar({className : "black", speed: 2.5});
34 | 			$("section").UIProgressBar({className : "red", width: 200, speed: 10});
35 | 			$("section").UIProgressBar({className : "green", width: 280, speed: 8});
36 | 			$("section").UIProgressBar({className : "gold", width: 160, speed: 2});
37 | 			$(".toggleProgressBar").bind("click", function() {
38 | 				if ($(this).text() == "Show") {
39 | 					$(this).UIToggleButtonLabel("Show", "Hide");
40 | 					$(this).removeClass("Show");
41 | 					$(this).addClass("Hide");
42 | 					$("navbar > h1").hide();
43 | 					$("navbar").UIProgressBar({margin: "0px auto", speed: 2, width: 160});
44 | 					
45 | 				} else if ($(this).text() == "Hide") {
46 | 					$(this).UIToggleButtonLabel("Show", "Hide");
47 | 					$(this).removeClass("Hide");
48 | 					$(this).addClass("Show");
49 | 					$("navbar > h1").show();
50 | 					$("navbar > progressbar").remove();
51 | 				}
52 | 			});
53 | 			
54 | 		});
55 | 	</script>
56 | </head>
57 | <body>
58 | 	<app>
59 | 	<view id="main" ui-navigation-status="current">
60 | 		<navbar>
61 | 			<h1>Progress Bar</h1>
62 | 			<uibutton ui-bar-align="right" class="toggleProgressBar"><label>Show</label></uibutton>
63 | 		</navbar>
64 | 		<subview ui-associations="withNavBar">
65 | 			<scrollpanel>
66 | 				<section>
67 | 					<p class="rounded">Examples of custom progress bars with varying widths, background colors and animation speeds.</p>
68 | 				</section>
69 | 			</scrollpanel>
70 | 		</subview>
71 | 	</view>
72 | 	</app>
73 | </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/examples/selection_list.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" id="htmlID" class="htmlClass">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<link rel="apple-touch-startup-image" href="startup.png">
 8 | 	<link rel="apple-touch-icon" href="chocolatechip-icon.png"/>
 9 | 	<link rel="shortcut icon" href="favicon.ico">
10 | 	<title>ChocolateChip Mobile</title>
11 | 	<link rel="stylesheet" href="../chui/chui.css">
12 | 	<style type="text/css">
13 | 		/* Local Styles Here */
14 | 		
15 | 	</style>
16 |     <script src="../chui/zepto.js"></script>
17 |     <script src="../chui/chui.js"></script>
18 |     <script src="../chui/iscroll.js"></script>
19 | 	<script type="text/javascript">
20 | 		
21 | 		$(function() {
22 | 			$("#activityChoices").UISelectionList(function(item){
23 | 				$("#selectionResponse.response").text(item.val());
24 | 			});
25 | 			
26 | 		});
27 | 	</script>
28 | </head>
29 | <body class="bodyClass" id="bodyID">
30 | 	<app id="appID" class="appClass">
31 | 		<view title="Main" class="mainView" id="main" ui-background-style="striped" ui-navigation-status="current">
32 | 			<navbar id="segmentedToolbar">
33 | 				<h1 ui-bar-align="center">Select List</h1>
34 | 			</navbar>
35 | 			<subview id="subview1" class="mySubView" ui-associations="withNavBar">
36 | 				<scrollpanel>
37 | 					<tableview ui-kind=grouped id="activityChoices" ui-implements="selection-list">	
38 | 						<tableheader>
39 | 							Choose one of the following:
40 | 						</tableheader>
41 | 						<tablecell>
42 | 							<celltitle>Go eat something</celltitle> 
43 | 							<input type="radio" name="activity" value="Go eat something">
44 | 						</tablecell>
45 | 						<tablecell>
46 | 							<celltitle>Take a nap</celltitle> 
47 | 							<input type="radio" name="activity" value="Take a nap">
48 | 						</tablecell>
49 | 						<tablecell>
50 | 							<celltitle>Get some work done</celltitle> 
51 | 							<input type="radio" name="activity" value="Get some work done">
52 | 						</tablecell>
53 | 						<tablecell>
54 | 							<celltitle>Play a game</celltitle> 
55 | 							<input type="radio" name="activity" value="Play a game">
56 | 						</tablecell>
57 | 					</tableview>
58 | 					<p ui-kind="grouped"><strong>You are going to: </strong><span id="selectionResponse" class="response"></span></p>
59 | 				</scrollpanel>
60 | 			</subview>
61 | 		</view>
62 | 		
63 | 	</app>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/examples/expander.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" id="htmlID" class="htmlClass">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<link rel="apple-touch-startup-image" href="startup.png">
 8 | 	<link rel="apple-touch-icon" href="chocolatechip-icon.png"/>
 9 | 	<link rel="shortcut icon" href="favicon.ico">
10 | 	<title>ChocolateChip Mobile</title>
11 | 	<link rel="stylesheet" href="../chui/chui.css">
12 |     <script src="../chui/zepto.js"></script>
13 |     <script src="../chui/chui.js"></script>
14 |     <script src="../chui/iscroll.js"></script>
15 | 	<script type="text/javascript">
16 | 		/* Local JavaScript Here */
17 | 
18 | 		$(function() {
19 | 			var opts = {
20 | 				status: "collapsed",
21 | 				title: "Open",
22 | 				altTitle: "Close"
23 | 			};	
24 | 			$("expander").UIExpander(opts);
25 | 		});
26 | 		
27 | 	</script>
28 | </head>
29 | <body>
30 | 	<app>
31 | 		<view title="Main" class="mainView" id="main" ui-background-style="striped" ui-navigation-status="current">
32 | 			<navbar id="segmentedToolbar">
33 | 				<h1 ui-bar-align="center">Expander </h1>
34 | 			</navbar>
35 | 			<subview id="subview1" class="mySubView" ui-associations="withNavBar">
36 | 				<scrollpanel>
37 | 					<tableview ui-kind="grouped">
38 |                     	<tablecell>
39 |                         	<celltitle>Wake Up</celltitle>
40 |                     	</tablecell>
41 |                     </tableview>
42 |                     <expander>
43 |                     	<panel>
44 | 							<tableview ui-kind="grouped">
45 | 								<tablecell>
46 | 									<celltitle>Breakfast</celltitle>
47 | 								</tablecell>
48 | 								<tablecell>
49 | 									<celltitle>Lunch</celltitle>
50 | 								</tablecell>
51 | 								<tablecell>
52 | 									<celltitle>Dinner</celltitle>
53 | 								</tablecell>
54 | 								<tablecell>
55 | 									<celltitle>Munchies</celltitle>
56 | 								</tablecell>
57 | 							</tableview>
58 | 						</panel>
59 |                     </expander>
60 | 					<tableview  ui-kind="grouped">
61 | 						<tablecell>
62 | 							<celltitle>Sleep</celltitle>
63 | 						</tablecell>
64 | 						<tablecell>
65 | 							<celltitle>Eat</celltitle>
66 | 						</tablecell>
67 | 						<tablecell>
68 | 							<celltitle>Work</celltitle>
69 | 						</tablecell>
70 | 					</tableview>
71 | 				</scrollpanel>
72 | 			</subview>
73 | 		</view>
74 | 	</app>
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/examples/tableview-simple-grouped-5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Grouped Tableviews 5</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped">
28 | 						<tablecell class="ui-no-hover">
29 | 							<celltitle>People</celltitle>
30 | 							<div class="rounded">
31 | 								<switchcontrol class="off" id="sleepSwitch">
32 | 									<label ui-implements="on">ON</label>
33 | 									<thumb><thumbprop></thumbprop></thumb>
34 | 									<label ui-implements="off">OFF</label>
35 | 									<input type="checkbox" value="ZZZZZZZZ!">
36 | 								</switchcontrol>
37 | 							</div>
38 | 						</tablecell>
39 | 						<tablecell class="ui-no-hover" ui-implements="titleWithButton">
40 | 							<celltitle>Places</celltitle>
41 | 							<div class="rounded">
42 | 								<switchcontrol class="on" id="eatSwitch">
43 | 									<label ui-implements="on">ON</label>
44 | 									<thumb><thumbprop></thumbprop></thumb>
45 | 									<label ui-implements="off">OFF</label>
46 | 									<input type="checkbox" value="Yummy!">
47 | 								</switchcontrol>
48 | 							</div>
49 | 						</tablecell>
50 | 						<tablecell class="ui-no-hover" ui-implements="celltitle-with-button">
51 | 							<celltitle>Things</celltitle>
52 | 							<uibutton ui-bar-align="right">
53 | 								<label>View</label>
54 | 							</uibutton>
55 | 						</tablecell>
56 | 						<tablecell class="ui-no-hover" ui-implements="celltitle-with-button">
57 | 							<celltitle>Animals</celltitle>
58 | 							<uibutton ui-bar-align="right">
59 | 								<label>See</label>
60 | 							</uibutton>
61 | 						</tablecell>
62 | 						<tablecell>
63 | 							<celltitle>Food</celltitle>
64 | 						</tablecell>
65 | 					</tableview>
66 | 				</scrollpanel>
67 | 			</subview>
68 | 		</view>
69 | 	</app>
70 | </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/examples/deletion_list-icons-grouped.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Deletion List - Images</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 | 		$(function() {
14 | 			$("tableview:first-of-type").UIIdentifyChildNodes();
15 | 			var deleteItem = function(item) {
16 | 				$("tablefooter").append("<p>Usted eliminó la celda " +  (parseInt(item.getAttribute("ui-child-position"),10)+1) + "</p>");
17 | 			};
18 | 			$.UIDeleteTableCell({selector: "tableview", toolbar: "#toolbar1", callback: deleteItem, deleteButton: "Eliminar", editButton: ["Editar","OK"]});
19 | 		});
20 | 	</script>
21 | </head>
22 | <body>
23 | 	<app>
24 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
25 | 			<navbar id="toolbar1">
26 | 				<h1>Español</h1>
27 | 			</navbar>
28 | 			<subview ui-associations="withNavBar">
29 | 				<scrollpanel>
30 | 						<tableview  ui-kind="grouped" ui-tablecell-order="stacked">
31 | 							<tablecell ui-implements="add" ui-usage="icon">
32 | 								<img src="../images/ipod.png">
33 | 								<celltitle>Gente</celltitle>
34 | 							</tablecell>
35 | 							<tablecell ui-implements="add" ui-usage="icon">
36 | 								<img src="../images/phone.png">
37 | 								<celltitle>Lugares</celltitle>
38 | 							</tablecell>
39 | 							<tablecell ui-implements="add" ui-usage="icon">
40 | 								<img src="../images/mail.png">
41 | 								<celltitle>Esto es un ejemplo de texto muy largo que será truncado porque no cabe.</celltitle>
42 | 							</tablecell>
43 | 							<tablecell ui-implements="add" ui-usage="icon">
44 | 								<img src="../images/safari.png">
45 | 								<celltitle>Animales</celltitle>
46 | 							</tablecell>
47 | 							<tablecell ui-implements="add" ui-usage="icon">
48 | 								<img src="../images/sms.png">
49 | 								<celltitle>Alimento</celltitle>
50 | 							</tablecell>
51 | 							<tablecell ui-implements="add" ui-usage="icon">
52 | 								<img src="../images/store.png">
53 | 								<celltitle>Cosas</celltitle>
54 | 							</tablecell>
55 | 							<tablefooter></tablefooter>
56 | 						</tableview>			
57 | 				</scrollpanel>
58 | 			</subview>
59 | 		</view>
60 | 	</app>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/examples/deletion_list-images.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Deletion List - Images</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 | 		$(function() {
14 | 			$("tableview:first-of-type").UIIdentifyChildNodes();
15 | 			var deleteItem = function(item) {
16 | 				$("tablefooter").append("<p>你删除表格单元格 " +  (parseInt(item.getAttribute("ui-child-position"),10)+1) + "</p>");
17 | 				
18 | 			};
19 | 			$.UIDeleteTableCell({selector:"tableview", toolbar: "navbar", callback: deleteItem, deleteButton: "删除", editButton: ["修改","完成"]});
20 | 		});
21 | 	</script>
22 | </head>
23 | <body>
24 | 	<app>
25 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
26 | 			<navbar id="toolbar1">
27 | 				<h1>中国</h1>
28 | 			</navbar>
29 | 			<subview ui-associations="withNavBar">
30 | 				<scrollpanel>
31 | 					<tableview ui-tablecell-order="stacked">
32 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
33 | 							<img src="../images/alternative.png">
34 | 							<celltitle>人民</celltitle>
35 | 							<cellsubtitle>您的朋友</cellsubtitle>
36 | 						</tablecell>
37 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
38 | 							<img src="../images/blues.png">
39 | 							<celltitle>邻居</celltitle>
40 | 							<cellsubtitle>有趣的目的地</cellsubtitle>
41 | 						</tablecell>
42 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
43 | 							<img src="../images/classical.png">
44 | 							<celltitle>有趣的动物</celltitle>
45 | 							<cellsubtitle>生物从世界各地</cellsubtitle>
46 | 						</tablecell>
47 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
48 | 							<img src="../images/itunes.png">
49 | 							<celltitle>烹饪</celltitle>
50 | 							<cellsubtitle>食谱</cellsubtitle>
51 | 						</tablecell>
52 | 						<tablecell  ui-usage="image" ui-implements="detail-disclosure">
53 | 							<img src="../images/killers.png">
54 | 							<celltitle>食品</celltitle>
55 | 							<cellsubtitle>餐厅</cellsubtitle>
56 | 						</tablecell>
57 | 						</tablecell>
58 | 						<tablefooter></tablefooter>
59 | 					</tableview>				
60 | 				</scrollpanel>
61 | 			</subview>
62 | 		</view>
63 | 	</app>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/examples/deletion_list-icons.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Deletion List - Images</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 | 		$(function() {
14 | 			$("tableview:first-of-type").UIIdentifyChildNodes();
15 | 			var deleteItem = function(item) {
16 | 				$("tablefooter").append("<p>Vous avez supprimé la cellule " +  (parseInt(item.getAttribute("ui-child-position"),10)+1) + "</p>");
17 | 			};
18 | 			$.UIDeleteTableCell({selector:"#deletable-items1",toolbar: "#toolbar1", callback: deleteItem, deleteButton: "Supprimer", editButton: ["Modifier","OK"]});
19 | 		});
20 | 	</script>
21 | </head>
22 | <body>
23 | 	<app>
24 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
25 | 			<navbar id="toolbar1">
26 | 				<h1>Tableview</h1>
27 | 			</navbar>
28 | 			<subview ui-associations="withNavBar">
29 | 				<scrollpanel>
30 | 						<tableview  id="deletable-items1" ui-tablecell-order="stacked">
31 | 							<tablecell ui-implements="add" ui-usage="icon">
32 | 								<img src="../images/ipod.png">
33 | 								<celltitle>Les gens</celltitle>
34 | 							</tablecell>
35 | 							<tablecell ui-implements="add" ui-usage="icon">
36 | 								<img src="../images/phone.png">
37 | 								<celltitle>Places</celltitle>
38 | 							</tablecell>
39 | 							<tablecell ui-implements="add" ui-usage="icon">
40 | 								<img src="../images/mail.png">
41 | 								<celltitle>Ceci est un exemple d'un texte très long qui sera tronquée car elle ne forme.</celltitle>
42 | 							</tablecell>
43 | 							<tablecell ui-implements="add" ui-usage="icon">
44 | 								<img src="../images/safari.png">
45 | 								<celltitle>Animaux</celltitle>
46 | 							</tablecell>
47 | 							<tablecell ui-implements="add" ui-usage="icon">
48 | 								<img src="../images/sms.png">
49 | 								<celltitle>Alimentaires</celltitle>
50 | 							</tablecell>
51 | 							<tablecell ui-implements="add" ui-usage="icon">
52 | 								<img src="../images/store.png">
53 | 								<celltitle>Choses</celltitle>
54 | 							</tablecell>
55 | 						<tablefooter></tablefooter>
56 | 						</tableview>			
57 | 				</scrollpanel>
58 | 			</subview>
59 | 		</view>
60 | 	</app>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/icons/envelope.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 |    
 6 |   <g
 7 |      id="layer2">
 8 |     <g
 9 |        transform="matrix(0.8,0,0,-0.8,-7.2789444,942.64808)"
10 |        id="g5964">
11 |       <g
12 |          id="g5966" />
13 |       <g
14 |          id="g5968">
15 |         <g
16 |            transform="matrix(1,0,0,-1,0,1191.97)"
17 |            id="g5970">
18 |           <path
19 |              id="path5972"
20 |              style="fill:none;stroke:#000000;stroke-width:2.24299097;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none"
21 |              d="m 15.97641,28.34082 47.92922,0 0,31.95276 -47.92922,0 0,-31.95276 z" />
22 |         </g>
23 |         <g
24 |            transform="matrix(1,0,0,-1,0,1191.97)"
25 |            id="g5974">
26 |           <path
27 |              id="path5976"
28 |              style="fill:none;stroke:#000000;stroke-width:2.24299097;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none"
29 |              d="M 15.90695,28.41028 40.42726,48.97119" />
30 |         </g>
31 |         <g
32 |            transform="matrix(1,0,0,-1,0,1191.97)"
33 |            id="g5978">
34 |           <path
35 |              id="path5980"
36 |              style="fill:none;stroke:#000000;stroke-width:2.24299097;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none"
37 |              d="M 39.10747,49.11011 63.34994,28.41028" />
38 |         </g>
39 |         <g
40 |            transform="matrix(1,0,0,-1,0,1191.97)"
41 |            id="g5982">
42 |           <path
43 |              id="path5984"
44 |              style="fill:none;stroke:#000000;stroke-width:2.24299097;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none"
45 |              d="M 15.83748,60.36304 33.27261,42.99744" />
46 |         </g>
47 |         <g
48 |            transform="matrix(1,0,0,-1,0,1191.97)"
49 |            id="g5986">
50 |           <path
51 |              id="path5988"
52 |              style="fill:none;stroke:#000000;stroke-width:2.24299097;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none"
53 |              d="M 64.04456,59.87683 46.81782,43.20581" />
54 |         </g>
55 |       </g>
56 |     </g>
57 |   </g>
58 | </svg>
59 | 


--------------------------------------------------------------------------------
/examples/Ellipsis.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" id="htmlID" class="htmlClass">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<link rel="apple-touch-startup-image" href="startup.png">
 8 | 	<link rel="apple-touch-icon" href="chocolatechip-icon.png"/>
 9 | 	<link rel="shortcut icon" href="favicon.ico">
10 | 	<title>Application of Ellipsis to a Paragraph</title>
11 | 	<link rel="stylesheet" href="../chui/chui.css">
12 | 	<style type="text/css">
13 | 		/* Local Styles Here */
14 | 		p#clip {
15 | 			display: -webkit-box;
16 | 			-webkit-box-orient: vertical;
17 | 			overflow : hidden;
18 | 			text-overflow: ellipsis;
19 | 			height: 200px;
20 | 		}
21 | 		p {
22 | 			font-size: 14px;
23 | 			line-height: 20px;
24 | 		}
25 | 		panel {
26 | 			padding: 20px;
27 | 		}		
28 | 	</style>
29 |     <script src="../chui/zepto.js"></script>
30 |     <script src="../chui/chui.js"></script>
31 |     <script src="../chui/iscroll.js"></script>
32 | 	<script type="text/javascript">
33 | 		$(function() {
34 | 			$("#clip").UIParagraphEllipsis();
35 | 		});
36 | 	</script>
37 | </head>
38 | <body>
39 | 	<app>
40 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
41 | 			<navbar id="toolbar_01">
42 | 				<h1 ui-bar-align="center">Ellipsis is very long too just to see what happens</h1>
43 | 			</navbar>
44 | 			<subview ui-associations="withNavBar">
45 | 				<scrollpanel>
46 | 					<panel>
47 | 						<p id="clip">
48 | 						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
49 | 						</p>
50 | 					</panel>
51 | 				</scrollpanel>
52 | 			</subview>
53 | 		</view>
54 | 		
55 | 	</app>
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/examples/deletion_list-grouped.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" id="htmlID" class="htmlClass">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<link rel="apple-touch-startup-image" href="startup.png">
 8 | 	<link rel="apple-touch-icon" href="chocolatechip-icon.png"/>
 9 | 	<link rel="shortcut icon" href="favicon.ico">
10 | 	<title>ChocolateChip Mobile</title>
11 | 	<link rel="stylesheet" href="../chui/chui.css">
12 | 	<style type="text/css">
13 | 		/* Local Styles Here */
14 | 	</style>
15 |     <script src="../chui/zepto.js"></script>
16 |     <script src="../chui/chui.js"></script>
17 |     <script src="../chui/iscroll.js"></script>
18 | 	<script type="text/javascript">
19 | 	
20 | 			$(function() {
21 | 				$("tableview:first-of-type").UIIdentifyChildNodes();
22 | 				var firstTime = true;
23 | 				var deleteItem = function(item) {
24 | 				var comma = firstTime ? "" : ", ";
25 | 					$("#selection_list_response > span").append(comma + $(item).children().last().text());
26 | 					firstTime = false;
27 | 				};
28 | 				$.UIDeleteTableCell({selector: "tableview", toolbar: "#toolbar_01", callback: deleteItem});
29 | 				$("#resetDeleteState").bind("click", function() {
30 | 					$.UIResetDeletionList("tableview", "navbar");
31 | 				});
32 | 			});
33 | 	</script>
34 | </head>
35 | <body class="bodyClass" id="bodyID">
36 | 	<app id="appID" class="appClass">
37 | 		<view title="Main" class="mainView" id="main" ui-background-style="striped" ui-navigation-status="current">
38 | 			<navbar id="toolbar_01">
39 | 				<h1 ui-bar-align="center">Deletion List</h1>
40 | 			</navbar>
41 | 			<subview id="subview1" class="mySubView" ui-associations="withNavBar">
42 | 				<scrollpanel>
43 | 					<tableview ui-kind="grouped">
44 | 						<tablecell>
45 | 							<celltitle>People</celltitle>
46 | 						</tablecell>
47 | 						<tablecell>
48 | 							<celltitle>Places</celltitle>
49 | 						</tablecell>
50 | 						<tablecell>
51 | 							<celltitle>Things</celltitle>
52 | 						</tablecell>
53 | 						<tablecell>
54 | 							<celltitle>Animals</celltitle>
55 | 						</tablecell>
56 | 						<tablecell>
57 | 							<celltitle>Food</celltitle>
58 | 						</tablecell>
59 | 					</tableview>
60 | 					<p id="selection_list_response" ui-kind="grouped">You just deleted: <span></span></p>
61 | 					<uibutton id="resetDeleteState" ui-kind="action">Reset Delete List</uibutton>
62 | 				</scrollpanel>
63 | 			</subview>
64 | 		</view>
65 | 		
66 | 	</app>
67 | </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/examples/actionsheet.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<title>Actionsheet</title>
 8 | 	<link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 | 	<style type="text/css">
13 | 	
14 | 	</style>
15 | 
16 | 	<script type="text/javascript">
17 | 		
18 | 		$(function() {
19 | 			var opts = {
20 | 				id : "actionsheet_01",
21 | 				title : "This is an Annoucement!",
22 | 				color : "blue",
23 | 				uiButtons : [
24 | 					{ title : "Delete", uiButtonImplements : "delete", callback : "respondToDeleteButton" },
25 | 					{ title : "Save", uiButtonImplements : "save", callback : "respondToSaveButton"
26 | 					}
27 | 				]
28 | 			};
29 | 			$.body.UIActionSheet(opts);
30 | 						
31 | 			$("#displayActionSheet").bind("click", function() {
32 | 				$.UIShowActionSheet("#actionsheet_01");
33 | 			});
34 | 			
35 | 		}); 
36 | 		
37 | 		var actionSheetButtonResponse = function(text) {
38 | 			$.UIHideActionSheet();
39 | 			return console.log("You pressed the " + text + " uibutton.");
40 | 		};
41 | 		var respondToDeleteButton = function(actionSheetID) {
42 | 			actionSheetButtonResponse("Delete");
43 | 		};
44 | 		var respondToSaveButton = function(actionSheetID) {
45 | 			actionSheetButtonResponse("Save");
46 | 		};
47 | 			
48 | 	</script>
49 | </head>
50 | <body>
51 | <app ui-background-style="striped">
52 | 	<view>
53 | 		<navbar>
54 | 			<h1>Action Sheet</h1>
55 | 			<uibutton id="displayActionSheet" ui-implements="done" ui-bar-align="right">
56 | 				<label>Edit</label>
57 | 			</uibutton>
58 | 		</navbar>
59 | 		<subview ui-associations="withNavBar">
60 | 			<scrollpanel>
61 | 				<tableview ui-kind="grouped">
62 | 					<tablecell ui-implements="add">
63 | 						<celltitle>People</celltitle>
64 | 					</tablecell>
65 | 					<tablecell ui-implements="add">
66 | 						<celltitle>Places</celltitle>
67 | 					</tablecell>
68 | 					<tablecell ui-implements="add">
69 | 						<celltitle>Entertainment</celltitle>
70 | 					</tablecell>
71 | 					<tablecell ui-implements="add">
72 | 						<celltitle>Exercise</celltitle>
73 | 					</tablecell>
74 | 					<tablecell ui-implements="add">
75 | 						<celltitle>Food</celltitle>
76 | 					</tablecell>
77 | 					<tablecell ui-implements="add">
78 | 						<celltitle>Sleep</celltitle>
79 | 					</tablecell>
80 | 				</tableview>
81 | 			</scrollpanel>
82 | 		</subview>
83 | 	</view>
84 | </app>
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/icons/compose.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 |    version="1.1"
11 |    id="Layer_2"
12 |    x="0px"
13 |    y="0px"
14 |    width="48px"
15 |    height="48px"
16 |    viewBox="0 0 48 48"
17 |    enable-background="new 0 0 48 48"
18 |    xml:space="preserve"
19 |    inkscape:version="0.47 r22583"
20 |    sodipodi:docname="compose.svg"><metadata
21 |    id="metadata13"><rdf:RDF><cc:Work
22 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
23 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
24 |    id="defs11"><inkscape:perspective
25 |      sodipodi:type="inkscape:persp3d"
26 |      inkscape:vp_x="0 : 24 : 1"
27 |      inkscape:vp_y="0 : 1000 : 0"
28 |      inkscape:vp_z="48 : 24 : 1"
29 |      inkscape:persp3d-origin="24 : 16 : 1"
30 |      id="perspective15" /></defs><sodipodi:namedview
31 |    pagecolor="#ffffff"
32 |    bordercolor="#666666"
33 |    borderopacity="1"
34 |    objecttolerance="10"
35 |    gridtolerance="10"
36 |    guidetolerance="10"
37 |    inkscape:pageopacity="0"
38 |    inkscape:pageshadow="2"
39 |    inkscape:window-width="1125"
40 |    inkscape:window-height="569"
41 |    id="namedview9"
42 |    showgrid="false"
43 |    inkscape:zoom="4.9166667"
44 |    inkscape:cx="7.0677966"
45 |    inkscape:cy="24"
46 |    inkscape:window-x="0"
47 |    inkscape:window-y="0"
48 |    inkscape:window-maximized="0"
49 |    inkscape:current-layer="Layer_2" />
50 | <path
51 |    d="m 29.559322,28.072051 v 7.207 c 0,0.389 -0.315,0.704 -0.704,0.704 h -18.592 c -0.388,0 -0.704,-0.315 -0.704,-0.704 v -18.592 c 0,-0.388 0.316,-0.704 0.704,-0.704 h 15.546 l 4.097,-3.872 c -0.339,-0.078 -0.689,-0.128 -1.051,-0.128 h -18.592 c -2.594,0 -4.704,2.11 -4.704,4.704 v 18.592 c 0,2.594 2.11,4.704 4.704,4.704 h 18.592 c 2.594,0 4.704,-2.11 4.704,-4.704 v -10.987 l -4,3.78 z"
52 |    id="path3" />
53 | <rect
54 |    x="31.668943"
55 |    y="-23.549715"
56 |    transform="matrix(0.68342202,0.73002352,-0.73002352,0.68342202,0,0)"
57 |    width="6.7587819"
58 |    height="3.7748785"
59 |    id="rect5" />
60 | <path
61 |    d="m 34.414322,11.164051 -15.704,14.692 -2.946,7.389 7.566,-2.451 15.702,-14.694 -4.618,-4.936 z m -12.816,16.624 -1.171,-1.252 13.715,-12.834 1.17,1.249 -13.714,12.837 z"
62 |    id="path7" />
63 | </svg>


--------------------------------------------------------------------------------
/examples/navigation-list-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<link rel="apple-touch-startup-image" href="startup.png">
 8 | 	<link rel="apple-touch-icon" href="app-icon.png"/>
 9 | 	<link rel="shortcut icon" href="favicon.ico">
10 | 	<title>Title</title>
11 | 	<link rel="stylesheet" href="../chui/chui.css">
12 | 	<style>
13 | 		/* Local Styles Here */
14 | 		
15 | 	</style>
16 |     <script src="../chui/zepto.js"></script>
17 |     <script src="../chui/iscroll.js"></script>
18 |     <script src="../chui/chui.js"></script>
19 | 	<script>
20 | 		/* Local JavaScript Here */
21 | 		
22 | 	</script>
23 | </head>
24 | <body>
25 | 	<app>
26 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
27 | 			<navbar>
28 | 				<h1>Main</h1>
29 | 			</navbar>
30 | 			<subview id="subview_01" ui-associations="withNavBar">
31 | 				<scrollpanel>
32 | 					<tableview>
33 | 						<tablecell href="#item_01_view" ui-implements="disclosure">
34 | 							<celltitle>Item</celltitle>
35 | 						</tablecell>
36 | 					</tableview>
37 | 				</scrollpanel>
38 | 			</subview>
39 | 		</view>
40 | 		<view id="item_01_view" ui-navigation-status="upcoming" ui-background-style="slanted-right">
41 | 			<navbar>
42 | 				<uibutton ui-implements="back" ui-bar-align="left">
43 | 					<label>Back</label>
44 | 				</uibutton>
45 | 				<h1>Second View</h1>
46 | 			</navbar>
47 | 			<subview id="subview_01" ui-associations="withNavBar">
48 | 				<scrollpanel>
49 | 					<tableview ui-tablecell-order="stacked">
50 | 						<tablecell href="#item_01_detail_view" ui-implements="detail-disclosure">
51 | 							<cellcounter>1</cellcounter>
52 | 							<celltitle>Item</celltitle>
53 | 							<cellsubtitle>Item Subtitle</cellsubtitle>
54 | 						</tablecell>
55 | 					</tableview>
56 | 				</scrollpanel>
57 | 			</subview>
58 | 		</view>
59 | 		<view id="item_01_detail_view" ui-navigation-status="upcoming" ui-background-style="squared">
60 | 			<navbar>
61 | 				<uibutton ui-implements="back" ui-bar-align="left">
62 | 					<label>Back</label>
63 | 				</uibutton>
64 | 				<h1>Third View</h1>
65 | 			</navbar>
66 | 			<subview id="subview_01" ui-associations="withNavBar">
67 | 				<scrollpanel>
68 | 					<tableview ui-tablecell-order="stacked">
69 | 						<tablecell class="ui-no-hover">
70 | 							<celltitle>Item</celltitle>
71 | 							<cellsubtitle>Item Subtitle</cellsubtitle>
72 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
73 | 							</celldetail>
74 | 						</tablecell>
75 | 					</tableview>
76 | 				</scrollpanel>
77 | 			</subview>
78 | 		</view>
79 | 	</app>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/icons/settings.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 5 | <path fill="#060007" d="M41.442,32.744h-1.505c-0.162-0.792-0.475-1.529-0.91-2.178l1.068-1.07c0.095-0.094,0.095-0.245,0-0.339
 6 | 	l-1.369-1.369c-0.094-0.095-0.245-0.094-0.339,0l-1.073,1.074c-0.649-0.433-1.385-0.744-2.174-0.902v-1.519
 7 | 	c0-0.133-0.107-0.238-0.239-0.238h-1.938c-0.132,0-0.239,0.105-0.239,0.238v1.519c-0.79,0.158-1.525,0.47-2.174,0.902l-1.074-1.074
 8 | 	c-0.094-0.095-0.245-0.095-0.339,0l-1.369,1.369c-0.095,0.094-0.094,0.245,0,0.339l1.07,1.068c-0.437,0.65-0.75,1.388-0.912,2.18
 9 | 	h-1.505c-0.133,0-0.239,0.107-0.239,0.239v1.938c0,0.131,0.106,0.238,0.239,0.238h1.499c0.16,0.796,0.472,1.536,0.905,2.188
10 | 	l-1.058,1.061c-0.095,0.092-0.095,0.243,0,0.339l1.369,1.369c0.094,0.094,0.245,0.094,0.339,0l1.055-1.055
11 | 	c0.655,0.438,1.396,0.753,2.193,0.913v1.487c0,0.133,0.107,0.239,0.239,0.239h1.938c0.132,0,0.239-0.106,0.239-0.239v-1.487
12 | 	c0.797-0.16,1.538-0.476,2.193-0.913l1.055,1.055c0.093,0.094,0.244,0.094,0.338,0l1.369-1.369c0.095-0.096,0.095-0.247,0-0.339
13 | 	l-1.058-1.061c0.436-0.652,0.747-1.393,0.906-2.188h1.498c0.132,0,0.239-0.107,0.239-0.238v-1.938
14 | 	C41.682,32.852,41.574,32.744,41.442,32.744z M33.932,36.936c-1.645,0-2.982-1.338-2.982-2.982s1.338-2.982,2.982-2.982
15 | 	s2.982,1.338,2.982,2.982S35.576,36.936,33.932,36.936z"/>
16 | <path fill="#060007" d="M30.022,16.448h-2.349c-0.253-1.236-0.744-2.387-1.422-3.4l1.67-1.671c0.146-0.146,0.146-0.382,0-0.528
17 | 	l-2.139-2.139c-0.146-0.147-0.383-0.146-0.528,0l-1.678,1.676c-1.014-0.673-2.161-1.16-3.394-1.407V6.608
18 | 	c0-0.206-0.167-0.373-0.374-0.373h-3.026c-0.205,0-0.373,0.167-0.373,0.373v2.37c-1.234,0.248-2.382,0.734-3.396,1.408l-1.676-1.677
19 | 	c-0.146-0.146-0.382-0.146-0.528,0l-2.14,2.139c-0.146,0.146-0.146,0.382,0,0.528l1.671,1.671c-0.68,1.014-1.171,2.165-1.422,3.401
20 | 	h-2.35c-0.206,0-0.374,0.167-0.374,0.374v3.026c0,0.206,0.167,0.374,0.374,0.374h2.342c0.246,1.243,0.734,2.398,1.411,3.419
21 | 	L8.67,25.294c-0.146,0.145-0.146,0.381,0,0.528l2.14,2.139c0.146,0.146,0.382,0.146,0.528,0l1.646-1.647
22 | 	c1.022,0.685,2.18,1.176,3.426,1.427v2.32c0,0.208,0.167,0.374,0.373,0.374h3.026c0.206,0,0.374-0.166,0.374-0.374v-2.32
23 | 	c1.245-0.251,2.404-0.742,3.424-1.427l1.648,1.647c0.145,0.146,0.381,0.146,0.527,0l2.139-2.139c0.146-0.147,0.146-0.384,0-0.528
24 | 	l-1.653-1.654c0.679-1.021,1.166-2.176,1.413-3.419h2.341c0.207,0,0.373-0.168,0.373-0.374v-3.026
25 | 	C30.396,16.616,30.229,16.448,30.022,16.448z M18.303,24.235c-3.271,0-5.907-2.637-5.907-5.908c0-3.256,2.636-5.893,5.907-5.893
26 | 	c3.256,0,5.894,2.636,5.894,5.893C24.196,21.598,21.559,24.235,18.303,24.235z"/>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/examples/navigation-list-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<link rel="apple-touch-startup-image" href="startup.png">
 8 | 	<link rel="apple-touch-icon" href="app-icon.png"/>
 9 | 	<link rel="shortcut icon" href="favicon.ico">
10 | 	<title>Title</title>
11 | 	<link rel="stylesheet" href="../chui/chui.css">
12 | 	<style>
13 | 		/* Local Styles Here */
14 | 		
15 | 	</style>
16 |     <script src="../chui/zepto.js"></script>
17 |     <script src="../chui/iscroll.js"></script>
18 |     <script src="../chui/chui.js"></script>
19 | 	<script>
20 | 		/* Local JavaScript Here */
21 | 		$(function() {
22 | 		 	
23 | 		});
24 | 		
25 | 	</script>
26 | </head>
27 | <body>
28 | 	<app ui-kind="navigation-with-one-navbar">
29 | 		<navbar>
30 | 			<uibutton ui-implements="back" ui-bar-align="left"><label>Back</label></uibutton>
31 | 			<h1>Single Navbar</h1>
32 | 		</navbar>
33 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current" ui-subview-navigation="false">
34 | 			<subview id="subview_01" ui-associations="withNavBar">
35 | 				<scrollpanel>
36 | 					<tableview>
37 | 						<tableheader>This is an example of a layout with a single navbar and navigation to different views using drilldown list. The Back button is there but hidden when on the main view, thereafter it appears until the user returns to the main view.</tableheader>
38 | 						<tablecell href="#item_01_view" ui-implements="disclosure">
39 | 							<celltitle>Item</celltitle>
40 | 						</tablecell>
41 | 					</tableview>
42 | 				</scrollpanel>
43 | 			</subview>
44 | 		</view>
45 | 		<view id="item_01_view" ui-navigation-status="upcoming" ui-background-style="slanted-right">
46 | 			<subview id="subview_01" ui-associations="withNavBar">
47 | 				<scrollpanel>
48 | 					<tableview ui-tablecell-order="stacked">
49 | 						<tablecell href="#item_01_detail_view" ui-implements="detail-disclosure">
50 | 							<cellcounter>1</cellcounter>
51 | 							<celltitle>Item</celltitle>
52 | 							<cellsubtitle>Item Subtitle</cellsubtitle>
53 | 						</tablecell>
54 | 					</tableview>
55 | 				</scrollpanel>
56 | 			</subview>
57 | 		</view>
58 | 		<view id="item_01_detail_view" ui-navigation-status="upcoming" ui-background-style="squared">
59 | 			<subview id="subview_01" ui-associations="withNavBar">
60 | 				<scrollpanel>
61 | 					<tableview ui-tablecell-order="stacked">
62 | 						<tablecell class="ui-no-hover">
63 | 							<celltitle>Item</celltitle>
64 | 							<cellsubtitle>Item Subtitle</cellsubtitle>
65 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
66 | 							</celldetail>
67 | 						</tablecell>
68 | 					</tableview>
69 | 				</scrollpanel>
70 | 			</subview>
71 | 		</view>
72 | 	</app>
73 | </body>
74 | </html>


--------------------------------------------------------------------------------
/examples/background-gradient.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Background Patterns</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">    
 9 |     <style type="text/css">
10 | 		scrollpanel > panel { 
11 | 			height 200px;
12 | 			height: 200px;
13 | 		}	
14 |     </style>
15 |     <script src="../chui/zepto.js"></script>
16 |     <script src="../chui/chui.js"></script>
17 |     <script src="../chui/iscroll.js"></script>
18 |     <script type="text/javascript">
19 |         $(function() {
20 |         
21 | 		});
22 |     </script>
23 |     
24 | </head>
25 | <body>
26 | 	<app>
27 | 		<view id="main" ui-navigation-status="current">
28 | 			<navbar>
29 | 				<h1>Background Patterns</h1>
30 | 			</navbar>
31 | 			<subview ui-associations="withNavBar">
32 | 				<scrollpanel>
33 | 					<shim></shim>
34 | 					<panel ui-background-style="vertical-striped">
35 | 						<navbar><h1>vertical-striped</h1></navbar>
36 | 					</panel>
37 | 					<panel ui-background-style="horizontal-striped">
38 | 						<navbar><h1>horizontal-striped</h1></navbar>
39 | 					</panel>
40 | 					<panel ui-background-style="slanted-left">
41 | 						<navbar><h1>slanted-left</h1></navbar>
42 | 					</panel>
43 | 					<panel ui-background-style="slanted-right">
44 | 						<navbar><h1>slanted-right</h1></navbar>
45 | 					</panel>
46 | 					<panel ui-background-style="vertical-striped-equal">
47 | 						<navbar><h1>vertical-striped-equal</h1></navbar>
48 | 					</panel>
49 | 					<panel ui-background-style="horizontal-striped-equal">
50 | 						<navbar><h1>horizontal-striped-equal</h1></navbar>
51 | 					</panel>
52 | 					<panel ui-background-style="slanted-left-equal">
53 | 						<navbar><h1>slanted-left-equal</h1></navbar>
54 | 					</panel>
55 | 					<panel ui-background-style="slanted-right-equal">
56 | 						<navbar><h1>slanted-right-equal</h1></navbar>
57 | 					</panel>
58 | 					<panel ui-background-style="squared">
59 | 						<navbar><h1>squared</h1></navbar>
60 | 					</panel>
61 | 					<panel ui-background-style="checkered">
62 | 						<navbar><h1>checkered</h1></navbar>
63 | 					</panel>
64 | 					<panel ui-background-style="chess">
65 | 						<navbar><h1>chess</h1></navbar>
66 | 					</panel>
67 | 					<panel ui-background-style="speckled">
68 | 						<navbar><h1>speckled</h1></navbar>
69 | 					</panel>
70 | 					<panel ui-background-style="spotted">
71 | 						<navbar><h1>spotted</h1></navbar>
72 | 					</panel>
73 | 					<panel ui-background-style="argyle">
74 | 						<navbar><h1>argyle</h1></navbar>
75 | 					</panel>
76 | 					<panel ui-background-style="intersect">
77 | 						<navbar><h1>intersect</h1></navbar>
78 | 					</panel>
79 | 					<panel ui-background-style="linen">
80 | 						<navbar><h1>linen</h1></navbar>
81 | 					</panel>			
82 | 				</scrollpanel>
83 | 			</subview>
84 | 		</view>
85 | 	</app>
86 | </body>
87 | </html>


--------------------------------------------------------------------------------
/icons/shopping_cart.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:svg="http://www.w3.org/2000/svg"
 6 |    xmlns="http://www.w3.org/2000/svg"
 7 |    xmlns:xlink="http://www.w3.org/1999/xlink"
 8 |    version="1.1"
 9 |    width="48"
10 |    height="48"
11 |    viewBox="0 0 48 48"
12 |    id="Layer_2"
13 |    xml:space="preserve"><defs
14 |    id="defs3149" />
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 | 
65 | <g
66 |    id="layer2"
67 |    style="display:inline"><g
68 |      transform="translate(-0.08050847,0.40254236)"
69 |      id="g4059"><path
70 |        d="M 42.025422,16.038138 38.644067,29.724576 16.423728,29.805086 10.868644,11.529663 4.3474575,10.241527"
71 |        id="path4061"
72 |        style="fill:none;stroke:#000000;stroke-width:2.25125003;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><path
73 |        d="m 15.031648,23.042374 24.762973,0"
74 |        id="path3152"
75 |        style="fill:none;stroke:#000000;stroke-width:2.25125003;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><path
76 |        d="M 27.614406,30.046611 27.211863,16.843221"
77 |        id="path3156"
78 |        style="fill:none;stroke:#000000;stroke-width:2.25125003;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><path
79 |        d="M 21.978813,29.644068 20.04661,16.682204"
80 |        id="path3158"
81 |        style="fill:none;stroke:#000000;stroke-width:2.25125003;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><path
82 |        d="M 33.16949,29.805086 34.940677,16.92373"
83 |        id="path3160"
84 |        style="fill:none;stroke:#000000;stroke-width:2.25125003;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><path
85 |        d="m 19.805084,31.173729 a 4.0254235,4.1059322 0 1 1 -8.050847,0 4.0254235,4.1059322 0 1 1 8.050847,0 z"
86 |        transform="matrix(0.62105266,0,0,0.60887512,8.6576239,15.811465)"
87 |        id="path3162"
88 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><use
89 |        transform="translate(18.169494,-2.7201237e-8)"
90 |        id="use3164"
91 |        x="0"
92 |        y="0"
93 |        width="48"
94 |        height="48"
95 |        xlink:href="#path3162" /><path
96 |        d="M 43.071563,16.44115 12.801318,16.52072"
97 |        id="path4069"
98 |        style="fill:none;stroke:#000000;stroke-width:2.25125003;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg>


--------------------------------------------------------------------------------
/examples/navigation-list-3a.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 	<link rel="apple-touch-startup-image" href="startup.png">
 8 | 	<link rel="apple-touch-icon" href="app-icon.png"/>
 9 | 	<link rel="shortcut icon" href="favicon.ico">
10 | 	<title>Title</title>
11 | 	<link rel="stylesheet" href="../chui/chui.css">
12 | 	<style>
13 | 		/* Local Styles Here */
14 | 		
15 | 	</style>
16 | 	<script src="../chui/zepto.js"></script>
17 | 	<script src="../chui/iscroll.js"></script>
18 | 	<script src="../chui/chui.js"></script>
19 | 	<script>
20 | 		/* Local JavaScript Here */
21 | 		$(function() {
22 | 		 	
23 | 		 	$("uibutton[ui-kind=action]").bind("click", function() {
24 | 		 		$.UINavigateToNextView("#item_01_detail_view");
25 | 		 	});
26 | 		});
27 | 		
28 | 	</script>
29 | </head>
30 | <body>
31 | 	<app ui-kind="navigation-with-one-navbar">
32 | 		<navbar>
33 | 			<uibutton ui-implements="back" ui-bar-align="left"><label>Back</label></uibutton>
34 | 			<h1>Single Navbar</h1>
35 | 		</navbar>
36 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current" ui-subview-navigation="false">
37 | 			<subview id="subview_01" ui-associations="withNavBar">
38 | 				<scrollpanel>
39 | 					<tableview>
40 | 						<tableheader>This is an example of a layout with a single navbar and navigation to different views using drilldown list. The Back button is there but hidden when on the main view, thereafter it appears until the user returns to the main view.</tableheader>
41 | 						<tablecell href="#item_01_view" ui-implements="disclosure">
42 | 							<celltitle>Item One</celltitle>
43 | 						</tablecell>
44 | 						<uibutton ui-kind="action">Straight to Detail View</uibutton>
45 | 					</tableview>
46 | 				</scrollpanel>
47 | 			</subview>
48 | 		</view>
49 | 		<view id="item_01_view" ui-navigation-status="upcoming" ui-background-style="slanted-right">
50 | 			<subview id="subview_01" ui-associations="withNavBar">
51 | 				<scrollpanel>
52 | 					<tableview ui-tablecell-order="stacked">
53 | 						<tablecell href="#item_01_detail_view" ui-implements="detail-disclosure">
54 | 							<cellcounter>1</cellcounter>
55 | 							<celltitle>Item Two</celltitle>
56 | 							<cellsubtitle>Item Subtitle</cellsubtitle>
57 | 						</tablecell>
58 | 					</tableview>
59 | 				</scrollpanel>
60 | 			</subview>
61 | 		</view>
62 | 		<view id="item_01_detail_view" ui-navigation-status="upcoming" ui-background-style="squared">
63 | 			<subview id="subview_01" ui-associations="withNavBar">
64 | 				<scrollpanel>
65 | 					<tableview ui-tablecell-order="stacked">
66 | 						<tablecell class="ui-no-hover">
67 | 							<celltitle>Item Three</celltitle>
68 | 							<cellsubtitle>Item Subtitle</cellsubtitle>
69 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
70 | 							</celldetail>
71 | 						</tablecell>
72 | 					</tableview>
73 | 				</scrollpanel>
74 | 			</subview>
75 | 		</view>
76 | 	</app>
77 | </body>
78 | </html>


--------------------------------------------------------------------------------
/icons/droid_logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | 
 3 | <svg
 4 |    xmlns:svg="http://www.w3.org/2000/svg"
 5 |    xmlns="http://www.w3.org/2000/svg"
 6 |    xmlns:xlink="http://www.w3.org/1999/xlink"
 7 |    version="1.1"
 8 |    width="64"
 9 |    height="64"
10 |    id="svg3426">
11 |   <g
12 |      id="layer3">
13 |     <path
14 |        d="m 19.996916,21.093798 23.613251,0.06968 0,21.781082 c 0,0 0.104671,1.486391 -0.352284,2.105471 -0.60349,0.817607 -0.868809,0.597039 -0.868809,0.597039 l -2.668754,0 -0.101917,10.363418 c 0,0 0.148451,1.676338 -1.993251,1.707916 -2.080827,0.03068 -1.916812,-1.707916 -1.916812,-1.707916 l -0.05095,-10.238621 -8.29538,-0.02506 -0.02548,10.222077 c 0,0 0.02548,1.635212 -1.88607,1.635212 -1.911549,0 -1.987987,-1.590589 -1.987987,-1.590589 l -0.04654,-10.349425 c 0,0 -1.768789,-0.01016 -1.844713,-0.01702 -0.136429,-0.01231 -0.657158,0 -1.048089,-0.603562 -0.483716,-0.746815 -0.526214,-1.921491 -0.526214,-1.921491 l 0,-22.028216 z"
15 |        id="path3558"
16 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.24341603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
17 |     <path
18 |        d="m 16.042082,22.925837 c 1.948478,0.02041 2.102332,1.463241 2.102332,1.463241 l -0.05905,16.92955 c 0,0 -0.694246,1.54904 -2.263199,1.485885 -1.63345,-0.06575 -2.178341,-1.565588 -2.178341,-1.565588 l 0.254997,-16.93148 c 0,0 0.0069,-1.451286 2.143258,-1.381608 z"
19 |        id="path3560"
20 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.24341603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
21 |     <path
22 |        d="m 37.987964,15.380191 c 0,0.846607 -0.553772,1.532919 -1.236884,1.532919 -0.683113,0 -1.236885,-0.686312 -1.236885,-1.532919 0,-0.846608 0.553772,-1.532919 1.236885,-1.532919 0.683112,0 1.236884,0.686311 1.236884,1.532919 z m -10.288631,0.348391 c 0,0.846607 -0.553772,1.532919 -1.236884,1.532919 -0.683112,0 -1.236884,-0.686312 -1.236884,-1.532919 0,-0.846609 0.553772,-1.532919 1.236884,-1.532919 0.683112,0 1.236884,0.68631 1.236884,1.532919 z M 42.601231,6.0292469 c -0.297294,0 -0.512468,0.3641351 -0.512468,0.3641351 l -3.881079,5.106362 C 36.582035,10.504853 34.520808,9.8471393 31.914595,9.9415833 29.052957,10.045283 27.067235,10.627492 25.374256,11.836972 L 21.289457,6.1816756 c 0,0 -0.634807,-0.3237567 -1.084583,0.3033552 -0.449776,0.627103 -0.152169,1.2294 -0.152169,1.2294 l 3.915243,5.4112182 c -3.038412,2.812647 -3.934635,6.455559 -3.969907,6.368132 l 23.778446,-0.14396 c 0,0 -0.937554,-4.054445 -4.181727,-6.842355 l 3.672374,-5.0901756 c 0,0 0.45814,-0.3679319 -0.04786,-1.0647131 C 43.061147,6.134833 42.73636,6.0292469 42.601227,6.0292469 z"
23 |        id="path4344"
24 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.24341603;stroke-opacity:1" />
25 |     <path
26 |        d="m 47.528023,22.827298 c 1.948477,0.02041 2.102332,1.46324 2.102332,1.46324 L 49.509823,41.29629 c 0,0 -0.540533,1.434737 -2.263199,1.409684 -1.634199,-0.02377 -2.116856,-1.451286 -2.116856,-1.451286 l 0.254997,-17.045783 c 0,0 0.0069,-1.451285 2.143258,-1.381607 z"
27 |        id="path4350"
28 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.24341603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
29 |   </g>
30 | </svg>
31 | 


--------------------------------------------------------------------------------
/examples/tableview-advanced-5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 5</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview>
28 | 						<tablecell class="ui-no-hover">
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
32 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
33 | 						</tablecell>
34 | 						<tablecell class="ui-no-hover">
35 | 							<celltitle>Places</celltitle>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
38 | 						</tablecell>
39 | 						<tablecell class="ui-no-hover">
40 | 							<celltitle>Funny Animals</celltitle>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
43 | 						</tablecell>
44 | 						<tablecell class="ui-no-hover">
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
48 | 						</tablecell>
49 | 						<tablecell class="ui-no-hover">
50 | 							<celltitle>Good Eats</celltitle>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
53 | 						</tablecell>
54 | 					</tableview>				
55 | 				</scrollpanel>
56 | 			</subview>
57 | 		</view>
58 | 	</app>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 6</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-tablecell-order="stacked">
28 | 						<tablecell class="ui-no-hover">
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
32 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
33 | 						</tablecell>
34 | 						<tablecell class="ui-no-hover">
35 | 							<celltitle>Places</celltitle>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
38 | 						</tablecell>
39 | 						<tablecell class="ui-no-hover">
40 | 							<celltitle>Funny Animals</celltitle>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
43 | 						</tablecell>
44 | 						<tablecell class="ui-no-hover">
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
48 | 						</tablecell>
49 | 						<tablecell class="ui-no-hover">
50 | 							<celltitle>Good Eats</celltitle>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
53 | 						</tablecell>
54 | 					</tableview>				
55 | 				</scrollpanel>
56 | 			</subview>
57 | 		</view>
58 | 	</app>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 5</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped">
28 | 						<tablecell class="ui-no-hover">
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
32 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
33 | 						</tablecell>
34 | 						<tablecell class="ui-no-hover">
35 | 							<celltitle>Places</celltitle>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
38 | 						</tablecell>
39 | 						<tablecell class="ui-no-hover">
40 | 							<celltitle>Funny Animals</celltitle>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
43 | 						</tablecell>
44 | 						<tablecell class="ui-no-hover">
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
48 | 						</tablecell>
49 | 						<tablecell class="ui-no-hover">
50 | 							<celltitle>Good Eats</celltitle>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
53 | 						</tablecell>
54 | 					</tableview>				
55 | 				</scrollpanel>
56 | 			</subview>
57 | 		</view>
58 | 	</app>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 6</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped" ui-tablecell-order="stacked">
28 | 						<tablecell class="ui-no-hover">
29 | 							<celltitle>People</celltitle>
30 | 							<cellsubtitle>Your Friends</cellsubtitle>
31 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
32 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
33 | 						</tablecell>
34 | 						<tablecell class="ui-no-hover">
35 | 							<celltitle>Places</celltitle>
36 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
37 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
38 | 						</tablecell>
39 | 						<tablecell class="ui-no-hover">
40 | 							<celltitle>Funny Animals</celltitle>
41 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
42 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
43 | 						</tablecell>
44 | 						<tablecell class="ui-no-hover">
45 | 							<celltitle>Food</celltitle>
46 | 							<cellsubtitle>Recipes</cellsubtitle>
47 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
48 | 						</tablecell>
49 | 						<tablecell class="ui-no-hover">
50 | 							<celltitle>Good Eats</celltitle>
51 | 							<cellsubtitle>Restaurants</cellsubtitle>
52 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
53 | 						</tablecell>
54 | 					</tableview>				
55 | 				</scrollpanel>
56 | 			</subview>
57 | 		</view>
58 | 	</app>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 7</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-tablecell-order="stacked">
28 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
29 | 							<img src="../images/alternative.png">
30 | 							<celltitle>People</celltitle>
31 | 							<cellsubtitle>Your Friends</cellsubtitle>
32 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
33 | 						</tablecell>
34 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
35 | 							<img src="../images/blues.png">
36 | 							<celltitle>Places</celltitle>
37 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
38 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
39 | 						</tablecell>
40 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
41 | 							<img src="../images/classical.png">
42 | 							<celltitle>Funny Animals</celltitle>
43 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
44 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
45 | 						</tablecell>
46 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
47 | 							<img src="../images/itunes.png">
48 | 							<celltitle>Food</celltitle>
49 | 							<cellsubtitle>Recipes</cellsubtitle>
50 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
51 | 						</tablecell>
52 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
53 | 							<img src="../images/killers.png">
54 | 							<celltitle>Good Eats</celltitle>
55 | 							<cellsubtitle>Restaurants</cellsubtitle>
56 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
57 | 						</tablecell>
58 | 					</tableview>				
59 | 				</scrollpanel>
60 | 			</subview>
61 | 		</view>
62 | 	</app>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/examples/tableview-advanced-grouped-7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 |     <meta name="apple-mobile-web-app-capable" content="yes">
 7 |     <title>Advanced Tableviews 7</title>
 8 |     <link rel="stylesheet" href="../chui/chui.css">
 9 |     <script src="../chui/zepto.js"></script>
10 |     <script src="../chui/chui.js"></script>
11 |     <script src="../chui/iscroll.js"></script>
12 |     <script type="text/javascript">
13 |         $(function() {
14 |         
15 | 		});
16 |     </script>
17 |     
18 | </head>
19 | <body>
20 | 	<app>
21 | 		<view id="main" ui-background-style="striped" ui-navigation-status="current">
22 | 			<navbar>
23 | 				<h1>Tableview</h1>
24 | 			</navbar>
25 | 			<subview ui-associations="withNavBar">
26 | 				<scrollpanel>
27 | 					<tableview ui-kind="grouped" ui-tablecell-order="stacked">
28 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
29 | 							<img src="../images/alternative.png">
30 | 							<celltitle>People</celltitle>
31 | 							<cellsubtitle>Your Friends</cellsubtitle>
32 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
33 | 						</tablecell>
34 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
35 | 							<img src="../images/blues.png">
36 | 							<celltitle>Places</celltitle>
37 | 							<cellsubtitle>Interesting Destinations</cellsubtitle>
38 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
39 | 						</tablecell>
40 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
41 | 							<img src="../images/classical.png">
42 | 							<celltitle>Funny Animals</celltitle>
43 | 							<cellsubtitle>Critters from Around the Globe</cellsubtitle>
44 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
45 | 						</tablecell>
46 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
47 | 							<img src="../images/itunes.png">
48 | 							<celltitle>Food</celltitle>
49 | 							<cellsubtitle>Recipes</cellsubtitle>
50 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
51 | 						</tablecell>
52 | 						<tablecell ui-usage="image" ui-implements="detail-disclosure">
53 | 							<img src="../images/killers.png">
54 | 							<celltitle>Good Eats</celltitle>
55 | 							<cellsubtitle>Restaurants</cellsubtitle>
56 | 							<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</celldetail>
57 | 						</tablecell>
58 | 					</tableview>				
59 | 				</scrollpanel>
60 | 			</subview>
61 | 		</view>
62 | 	</app>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/icons/calendar.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:svg="http://www.w3.org/2000/svg"
 6 |    xmlns="http://www.w3.org/2000/svg"
 7 |    xmlns:xlink="http://www.w3.org/1999/xlink"
 8 |    version="1.1"
 9 |    width="64"
10 |    height="64"
11 |    id="svg4268">
12 |   <defs
13 |      id="defs4270" />
14 |   <g
15 |      transform="matrix(1.21,0,0,1.21,-6.1670194,-5.9615665)"
16 |      id="layer2">
17 |     <path
18 |        d="m 48.992372,21.98003 -0.07433,24.425858 c 0,0 6.37e-4,0.965548 -0.520658,1.571242 -0.757086,0.879661 -1.412347,0.86255 -1.412347,0.86255 l -30.17961,0.06592 c 0,0 -0.334902,0.07142 -1.152575,-0.714201 -0.817674,-0.785621 -0.743819,-2.119288 -0.743819,-2.119288 L 15.02046,21.977286"
19 |        id="path4395"
20 |        style="fill:none;stroke:#000000;stroke-width:4.12570381;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
21 |     <path
22 |        d="m 47.553654,40.033864 -30.797944,3e-6"
23 |        id="path6920"
24 |        style="fill:none;stroke:#000000;stroke-width:2.17130041px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
25 |     <use
26 |        transform="translate(-0.14834916,-7.9366802)"
27 |        id="use6923"
28 |        x="0"
29 |        y="0"
30 |        width="64"
31 |        height="64"
32 |        xlink:href="#path6920" />
33 |     <use
34 |        transform="translate(0.14834916,-9.049299)"
35 |        id="use6925"
36 |        style="stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
37 |        x="0"
38 |        y="0"
39 |        width="64"
40 |        height="64"
41 |        xlink:href="#use6923" />
42 |     <use
43 |        transform="translate(-0.07417457,0.89009497)"
44 |        id="use6927"
45 |        x="0"
46 |        y="0"
47 |        width="64"
48 |        height="64"
49 |        xlink:href="#use6925" />
50 |     <path
51 |        d="m 16.71875,15.5 c -0.479817,0.04172 -1.519929,0.186821 -2.1875,0.6875 -0.890095,0.667571 -1.1875,1.90625 -1.1875,1.90625 L 13.375,20.5 50.46875,20.5625 50.5,17.9375 c 0,0 -0.163016,-0.832719 -1.125,-1.5625 -1.075532,-0.815916 -2.4375,-0.75 -2.4375,-0.75 l -1.538501,-0.06834 0,4.28125 -4.884257,-3e-6 0,-4.28125 -16.851948,0.04877 0,4.40625 -5.143869,-0.03709 0,-4.40625 L 17,15.5 c 0,0 -0.121311,-0.01391 -0.28125,0 z"
52 |        id="path6929"
53 |        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
54 |     <path
55 |        d="m 24.052498,24.785396 -0.01608,22.126225"
56 |        id="path6960"
57 |        style="fill:none;stroke:#000000;stroke-width:1.91299999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
58 |     <use
59 |        transform="translate(7.8674026,0.15734805)"
60 |        id="use6963"
61 |        x="0"
62 |        y="0"
63 |        width="64"
64 |        height="64"
65 |        xlink:href="#path6960" />
66 |     <use
67 |        transform="translate(8.1296492,0.1048987)"
68 |        id="use6965"
69 |        x="0"
70 |        y="0"
71 |        width="64"
72 |        height="64"
73 |        xlink:href="#use6963" />
74 |     <path
75 |        d="m 21.032189,11.988018 0,5.943681 0,-5.943681 z"
76 |        id="path6967"
77 |        style="fill:none;stroke:#000000;stroke-width:2.03175998px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
78 |     <use
79 |        transform="translate(21.976278,0.1048987)"
80 |        id="use6969"
81 |        x="0"
82 |        y="0"
83 |        width="64"
84 |        height="64"
85 |        xlink:href="#path6967" />
86 |   </g>
87 | </svg>
88 | 


--------------------------------------------------------------------------------
/examples/json_form_target.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
  6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
  7 | 	<link rel="apple-touch-startup-image" href="startup.png">
  8 | 	<link rel="apple-touch-icon" href="chocolatechip-icon.png"/>
  9 | 	<link rel="shortcut icon" href="favicon.ico">
 10 | 	<title>ChocolateChip Mobile</title>
 11 | 	<link rel="stylesheet" href="../chui/chui.css">
 12 | 	<style>
 13 | 		/* Local Styles Here */
 14 | 		view#main {
 15 | 			background-color: rgba(192,132,96,0.25);
 16 | 		}
 17 | 		view#main tableview > tablecell {
 18 | 			background-color: rgba(255,255,255,0.75);
 19 | 		}	
 20 | 	</style>
 21 | 	    <script src="../chui/zepto.js"></script>
 22 | 		<script src="../chui/jquery.tmpl.js"></script>
 23 | 	    <script src="../chui/chui.js"></script>
 24 | 	    <script src="../chui/iscroll.js"></script>
 25 | 	<script>
 26 | 	
 27 | 
 28 | 		/* Local JavaScript Here */
 29 | 		$(function() {
 30 | 		    var user_data = window.location.href.slice(window.location.href.indexOf('?') + 1);
 31 | 			user_data = unescape(user_data);
 32 | 			console.log(user_data);
 33 | 			window.data = JSON.parse(user_data);
 34 | 			var firstName;
 35 | 			var lastName;
 36 | 			if (!!data.user.name) {
 37 | 				firstName = data.user.name.first || null;
 38 | 				lastName = data.user.name.last || null;
 39 | 			} 
 40 | 			
 41 | 			var email = data.user.email || "";
 42 | 			var phone = data.user.phone || "";
 43 | 			var message = data.user.message || "";
 44 | 			var foods = data.user.favoriteFood || "";
 45 | 			var job = data.user.job || "";
 46 | 			
 47 | 			$.templates.user = "";
 48 | 				if (firstName || lastName) {
 49 | 					$.templates.user += "<tablecell><celltitle>Name: ";
 50 | 				}
 51 | 			    if (firstName) {
 52 | 			        $.templates.user += firstName;
 53 | 			    }
 54 | 			    if (lastName) {
 55 | 			        $.templates.user += " " + lastName;
 56 | 			    }
 57 | 			    $.templates.user += "</celltitle></tablecell>";
 58 | 				if (email) {
 59 | 				    $.templates.user += "<tablecell><cellsubtitle>Email: " + data.user.email  + "</cellsubtitle></tablecell>";
 60 | 				}
 61 | 				if (phone) {
 62 | 				    $.templates.user += "<tablecell><celldetail>Phone: " + data.user.phone + "</celldetail></tablecell>";
 63 | 				}
 64 | 				if (message) {
 65 | 				    $.templates.user += "<tablecell><celldetail>Message: " + message + "</celldetail></tablecell>";
 66 | 				}
 67 | 				if (foods.length) {
 68 | 				    $.templates.user += "<tablecell><celldetail>Favorite foods:<ol>";
 69 | 				    data.user.favoriteFood.forEach(function(food) {
 70 | 				        $.templates.user += "<li>" + food + "</li>";
 71 | 				    });
 72 | 				    $.templates.user += "</ol></celldetail></tablecell>";
 73 | 				}
 74 | 				if (job) {
 75 | 				    $.templates.user += "<tablecell><celldetail>Job: " + job + "</celldetail></tablecell>";
 76 | 				}
 77 | 				
 78 | 			// Process the template of $.UITemplate.myTemplate" with JSON data in the variable "data".
 79 | 			// This is read from an Ajax call to an external JSON object in json.json.
 80 | 			$.templates.user = $.template("user", data);
 81 | 			// insert the results of the parsed template into the tableview."
 82 | 			$("#main tableview:first-of-type").append($.templates.user);
 83 | 		});
 84 | 	</script>
 85 | </head>
 86 | <body>
 87 | 	<app>
 88 | 		<view id="main" ui-background-style="slanted-left" ui-navigation-status="current">
 89 | 		<navbar class="ui-custom-tint"><h1>JSON from URL</h1></navbar>
 90 | 			<subview id="subview1" ui-associations="withNavBar">
 91 | 				<scrollpanel>
 92 | 					<tableview ui-tablecell-order="stacked" ui-kind="grouped" class="ui-no-hover">
 93 | 						<tableheader>
 94 | 							This is an example of a JSON object sent through the url. 
 95 | 						</tableheader>
 96 | 					</tableview>
 97 | 				</scrollpanel>
 98 | 			</subview>
 99 | 		</view>
100 | 	</app>
101 | </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/examples/switch-control-3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" id="htmlID" class="htmlClass">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
  6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
  7 | 	<link rel="apple-touch-startup-image" href="startup.png">
  8 | 	<link rel="apple-touch-icon" href="chocolatechip-icon.png"/>
  9 | 	<link rel="shortcut icon" href="favicon.ico">
 10 | 	<title>ChocolateChip Mobile</title>
 11 | 	<link rel="stylesheet" href="../chui/chui.css">
 12 | 	<style>
 13 | 		/* Local Styles Here */
 14 | 		p[ui-kind=grouped] { padding: 10px 10px; }
 15 | 		 
 16 | 	</style>
 17 |     <script src="../chui/zepto.js"></script>
 18 |     <script src="../chui/chui.js"></script>
 19 |     <script src="../chui/iscroll.js"></script>
 20 | 	<script>
 21 | 		/* Local JavaScript Here */
 22 | 	
 23 | 		$(function() {
 24 | 			var sleepSwitch = {
 25 | 				id : "sleepSwitch",
 26 | 				status : "on",
 27 | 				namePrefix : "customer.choice",
 28 | 				value: "ZZZZZZZZZ!"
 29 | 			};
 30 | 			var vacationSwitch = {
 31 | 				id : "vacationSwitch",
 32 | 				status : "off",
 33 | 				namePrefix : "customer.choice",
 34 | 				value : "See you later!"
 35 | 			};
 36 | 			var breadfastSwitch = {
 37 | 				id : "breadfastSwitch",
 38 | 				status : "off",
 39 | 				namePrefix : "customer.choice",
 40 | 				value : "I'm hungry!",
 41 | 				callback : function(item) { 
 42 | 					/* 
 43 | 					At the time the user clicks, the button is set to "off",
 44 | 					so we know that after clicking it will be set to "on".
 45 | 					Therefore we check for the off state and output the value.
 46 | 					*/
 47 | 					if (item.hasClass("off")) {
 48 | 						console.log(item.find("input").val())
 49 | 					}
 50 | 				}
 51 | 			};
 52 | 			$("tablecell").each(function(idx){
 53 | 				switch (idx){
 54 | 					case 0:
 55 | 						$(this).UICreateSwitchControl(sleepSwitch);
 56 | 						break;
 57 | 					case 1:
 58 | 						$(this).UICreateSwitchControl(vacationSwitch);
 59 | 						break;
 60 | 					case 2:
 61 | 						$(this).UICreateSwitchControl(breadfastSwitch);
 62 | 						break;
 63 | 				}
 64 | 				
 65 | 			});
 66 | 			$("switchcontrol").each(function(idx) {
 67 | 				if ($(this).hasClass("on")) {
 68 | 					$("#switchResponse").text($(this).find("input").val());
 69 | 				}
 70 | 			});
 71 | 			
 72 | 			$.app.delegate("switchcontrol", "click", function(idx) {
 73 | 				if ($(this).hasClass("on")) {
 74 | 					$("#switchResponse").text($(this).find("input").val());
 75 | 				} else {
 76 | 					$("#switchResponse").empty();
 77 | 				}
 78 | 			});
 79 | 		});
 80 | 		
 81 | 	</script>
 82 | </head>
 83 | <body class="bodyClass" id="bodyID">
 84 | 	<app id="appID" class="appClass">
 85 | 		<view title="Main" class="mainView" id="main" ui-background-style="striped" ui-navigation-status="current">
 86 | 			<navbar id="segmentedToolbar">
 87 | 				<h1 ui-bar-align="center">Switchcontrol</h1>
 88 | 			</navbar>
 89 | 			<subview id="subview1" class="mySubView" ui-associations="withNavBar">
 90 | 				<scrollpanel>
 91 | 					<tableview ui-kind="grouped">
 92 |                     	<tablecell>
 93 |                         <celltitle>Sleep</celltitle>
 94 |                     	</tablecell>
 95 |                     </tableview>
 96 |                     <tableview ui-kind="grouped">
 97 |                     	<tablecell>
 98 |                         <celltitle>Vacation</celltitle>
 99 |                     	</tablecell>
100 |                     </tableview>
101 |                     <tableview ui-kind="grouped">
102 |                     	<tablecell>
103 |                         <celltitle>Breakfast</celltitle>
104 |                     	</tablecell>
105 |                     </tableview>
106 |                     <p ui-kind="grouped">
107 |                     	<span><strong>Response: </strong></span><span id="switchResponse" class="response"></span>
108 |                     </p>
109 | 				</scrollpanel>
110 | 			</subview>
111 | 		</view>
112 | 	</app>
113 | </body>
114 | </html>
115 | 


--------------------------------------------------------------------------------
/icons/group.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 |   <path
 6 |      d="m 14.09375,14.21875 c -0.905642,0 -1.809019,0.483268 -2.5,1.4375 -1.381961,1.908404 -1.381961,4.997845 0,6.90625 0.113573,0.156837 0.250782,0.275191 0.375,0.40625 l 0,1.625 C 11.618466,24.757504 5.592657,27.547889 5.03125,28.0625 4.4534912,28.592154 4.4375,29.09375 4.4375,29.09375 l 0,1.9375 19.15625,0.0625 0.0625,-0.15625 c -0.04815,0.144445 0,-1.9375 0,-1.9375 0,0 -0.01853,-0.706034 -0.5,-1.1875 -0.470374,-0.470379 -6.616059,-3.124886 -6.90625,-3.25 l 0,-1.625 c 0.113584,-0.12249 0.239244,-0.230683 0.34375,-0.375 1.381968,-1.908405 1.381968,-4.997846 0,-6.90625 -0.690984,-0.954232 -1.594358,-1.4375 -2.5,-1.4375 z"
 7 |      id="path4047"
 8 |      style="opacity:0.46460176;fill:#d6d6d6;fill-opacity:1;fill-rule:nonzero;stroke:none" />
 9 |   <path
10 |      d="m 34.375,14.3125 c -0.905641,0 -1.80902,0.483298 -2.5,1.4375 -1.381968,1.908405 -1.381968,4.997785 0,6.90625 0.104506,0.144316 0.230166,0.25251 0.34375,0.375 l 0,1.625 c -0.394391,0.184408 -6.347043,2.987405 -6.90625,3.5 -0.577758,0.529594 -0.59375,1.03125 -0.59375,1.03125 l 0,1.90625 19.15625,0.0625 c 0.08433,0.006 0.0625,-2.0625 0.0625,-2.0625 0,0 -0.01854,-0.737344 -0.5,-1.21875 -0.470374,-0.470378 -6.616059,-3.124883 -6.90625,-3.25 l 0,-1.59375 c 0.113584,-0.12249 0.239243,-0.230684 0.34375,-0.375 1.381967,-1.908465 1.381967,-4.997845 0,-6.90625 -0.690984,-0.954202 -1.594359,-1.4375 -2.5,-1.4375 z"
11 |      id="path4053"
12 |      style="opacity:0.46460176;fill:#d6d6d6;fill-opacity:1;fill-rule:nonzero;stroke:none" />
13 |   <path
14 |      d="m 24.09375,9.6875 c -1.354593,0 -2.685229,0.729012 -3.71875,2.15625 -2.067032,2.854476 -2.067032,7.489274 0,10.34375 0.168941,0.233299 0.346553,0.429837 0.53125,0.625 l 0,2.34375 c -0.515189,0.240838 -9.534854,4.479837 -10.375,5.25 -0.8641625,0.79212 -0.875,1.53125 -0.875,1.53125 l 0,2.875 28.6875,0.09375 c 0.09035,0.006 0.0625,-3.09375 0.0625,-3.09375 0,0 0.0014,-1.092365 -0.71875,-1.8125 -0.704553,-0.704494 -9.965967,-4.698658 -10.375,-4.875 l 0,-2.3125 c 0.184696,-0.195163 0.362309,-0.391701 0.53125,-0.625 2.067038,-2.854476 2.067038,-7.489274 0,-10.34375 -1.033519,-1.427238 -2.395407,-2.15625 -3.75,-2.15625 z"
15 |      id="path4059"
16 |      style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
17 |   <g
18 |      transform="matrix(0.59787112,0,0,0.59787112,-3.0782657,3.0690579)"
19 |      id="g4061">
20 |     <path
21 |        d="m 51.7298,14.66223 c 3.45733,4.77435 3.45733,12.51526 0,17.28967 -3.45733,4.77442 -9.06277,4.77442 -12.52011,0 -3.45732,-4.77441 -3.45732,-12.51532 0,-17.28967 3.45734,-4.774413 9.06278,-4.774413 12.52011,0"
22 |        id="path4063"
23 |        style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
24 |   </g>
25 |   <g
26 |      transform="matrix(0.59787112,0,0,0.59787112,-3.0782657,3.0690579)"
27 |      id="g4067">
28 |     <path
29 |        d="m 40.10975,31.91919 10.72,0 0,12.64722 -10.72,0 0,-12.64722 z"
30 |        id="path4069"
31 |        style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
32 |   </g>
33 |   <g
34 |      transform="matrix(0.59787112,0,0,0.59787112,-3.0782657,3.0690579)"
35 |      id="g4073">
36 |     <path
37 |        d="m 69.29604,53.22638 c 0,0 -47.97647,-0.10803 -47.97647,-0.10803 0,0 0,-4.818 0,-4.818 0,0 0,-1.26471 1.4454,-2.58966 1.4454,-1.32495 17.82656,-8.97351 17.82656,-8.97351 0,0 9.87689,0 9.87689,0 0,0 16.50161,7.10657 17.70611,8.31104 1.2045,1.20453 1.2045,3.01123 1.2045,3.01123 0,0 0.0379,5.177 -0.11322,5.16693"
38 |        id="path4075"
39 |        style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
40 |   </g>
41 |   <g
42 |      id="layer4" />
43 | </svg>
44 | 


--------------------------------------------------------------------------------
/icons/lock.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 |   <g
 6 |      id="layer2">
 7 |     <g
 8 |        transform="matrix(0.8,0,0,-0.8,-4.9803229,940.29865)"
 9 |        id="g6074">
10 |       <g
11 |          id="g6076" />
12 |       <g
13 |          id="g6078">
14 |         <path
15 |            d="m 40.00909,1125.425 -5.52699,0 0,8.937 -0.24665,0.145 -0.43569,0.321 -0.40891,0.369 -0.36959,0.409 -0.32032,0.436 -0.27105,0.458 -0.22175,0.478 -0.17249,0.493 -0.1232,0.505 -0.07391,0.512 -0.02464,0.516 0.02464,0.517 0.07391,0.512 0.1232,0.504 0.17249,0.493 0.22175,0.478 0.27105,0.459 0.32032,0.436 0.36959,0.409 0.40891,0.369 0.4357,0.32 0.45867,0.271 0.4778,0.222 0.49311,0.173 0.50459,0.123 0.51226,0.074 0.51606,0.024 0.51609,-0.024 0.51224,-0.074 0.5046,-0.123 0.49311,-0.173 0.4778,-0.222 0.45866,-0.271 0.4357,-0.32 0.4089,-0.369 0.3696,-0.409 0.32033,-0.436 0.27103,-0.459 0.22176,-0.478 0.17249,-0.493 0.1232,-0.504 0.07391,-0.513 0.02464,-0.516 -0.02464,-0.516 -0.07391,-0.512 -0.1232,-0.505 -0.17249,-0.493 -0.22176,-0.478 -0.27103,-0.458 -0.32033,-0.436 -0.3696,-0.409 -0.4089,-0.369 -0.43571,-0.321 -0.15135,-0.089 0,-8.993 z m 15.69995,23.201 -37.78767,0 0,-26.118 37.78767,0 0,26.118 z"
16 |            id="path6080"
17 |            style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" />
18 |         <g
19 |            transform="matrix(1,0,0,-1,0,1191.97)"
20 |            id="g6082">
21 |           <path
22 |              d="m 40.00909,66.54517 -5.52699,0 0,-8.93641 -0.24665,-0.14575 -0.43569,-0.32031 -0.40891,-0.36963 -0.36959,-0.40893 -0.32032,-0.43567 -0.27105,-0.45862 -0.22175,-0.47791 -0.17249,-0.49304 -0.1232,-0.50464 -0.07391,-0.5122 -0.02464,-0.51612 0.02464,-0.51611 0.07391,-0.51221 0.1232,-0.50464 0.17249,-0.49304 0.22175,-0.47778 0.27105,-0.45874 0.32032,-0.43567 0.36959,-0.40894 0.40891,-0.3695 0.4357,-0.32032 0.45867,-0.27111 0.4778,-0.22168 0.49311,-0.17249 0.50459,-0.12329 0.51226,-0.07385 0.51606,-0.02466 0.51609,0.02466 0.51224,0.07385 0.5046,0.12329 0.49311,0.17249 0.4778,0.22168 0.45866,0.27111 0.4357,0.32032 0.4089,0.3695 0.3696,0.40894 0.32033,0.43579 0.27103,0.45862 0.22176,0.47778 0.17249,0.49317 0.1232,0.50451 0.07391,0.51233 0.02464,0.51599 -0.02464,0.51612 -0.07391,0.5122 -0.1232,0.50464 -0.17249,0.49304 -0.22176,0.47791 -0.27103,0.45862 -0.32033,0.43567 -0.3696,0.40893 -0.4089,0.36963 -0.43571,0.32031 -0.15135,0.08936 0,8.9928 z m 15.69995,-23.20044 -37.78767,0 0,26.11792 37.78767,0 0,-26.11792 z"
23 |              id="path6084"
24 |              style="fill:none;stroke:#000000;stroke-width:2.24299097;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
25 |         </g>
26 |         <g
27 |            transform="matrix(1,0,0,-1,0,1191.97)"
28 |            id="g6086">
29 |           <path
30 |              d="M 48.41547,36.23132 48.40074,35.70728 48.35702,35.19019 48.28502,34.68054 48.18545,34.17908 48.05902,33.6864 47.90645,33.20325 47.72844,32.7301 47.5257,32.2677 47.29896,31.81665 47.04892,31.37756 46.77629,30.95117 46.48178,30.53796 46.16611,30.13879 45.82999,29.75403 45.47412,29.38464 45.09922,29.03101 44.706,28.69385 44.29517,28.37378 43.86745,28.07141 43.42353,27.7876 42.96415,27.52271 42.49,27.27747 42.0018,27.05261 41.50026,26.84875 40.98609,26.66638 40.46,26.50635 l -0.53729,-0.13733 -0.54779,-0.11365 -0.55756,-0.0896 -0.56665,-0.0647 -0.575,-0.0393 -0.58265,-0.01331 -0.58265,0.01331 -0.575,0.0393 -0.56664,0.0647 -0.55757,0.0896 -0.54778,0.11365 -0.5373,0.13733 -0.52608,0.16003 -0.51417,0.18237 -0.50154,0.20386 -0.4882,0.22486 -0.47415,0.24524 -0.45938,0.26489 -0.44392,0.28381 -0.42772,0.30237 -0.41083,0.32007 -0.39322,0.33716 -0.3749,0.35363 -0.35587,0.36939 -0.33613,0.38476 -0.31567,0.39917 -0.29451,0.41321 -0.27262,0.42639 -0.25004,0.43909 -0.22675,0.45105 -0.20273,0.4624 -0.17801,0.47315 -0.15257,0.48315 -0.12643,0.49268 -0.09957,0.50146 -0.072,0.50965 -0.04373,0.51709 -0.01473,0.52404 0,9.05835 22.64482,0 0,-9.05835 z"
31 |              id="path6088"
32 |              style="fill:none;stroke:#000000;stroke-width:6.13084078;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
33 |         </g>
34 |       </g>
35 |     </g>
36 |   </g>
37 | </svg>
38 | 


--------------------------------------------------------------------------------
/icons/chat_more.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
 4 | 	 height="48px">
 5 | 
 6 | <g
 7 |    id="layer1"
 8 |    transform="matrix(0.81518774,0,0,0.82074715,1.4160062,5.5585234)"><g
 9 |      id="g5240"
10 |      transform="matrix(1.25,0,0,-1.25,-17.044967,1458.1999)"><g
11 |        id="g5242" /><g
12 |        id="g5244"><path
13 |          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
14 |          id="path5246"
15 |          d="m 45.39383,1148.209 -0.30294,0.014 -0.30071,0.044 -0.2962,0.072 -0.28947,0.101 -0.28048,0.13 -0.26924,0.16 -0.25577,0.188 -0.24003,0.217 -0.21695,0.24 -0.18805,0.255 -0.1591,0.27 -0.13018,0.28 -0.10125,0.29 -0.07231,0.296 -0.0434,0.301 -0.01447,0.302 0.01447,0.303 0.0434,0.301 0.07231,0.296 0.10125,0.29 0.13018,0.28 0.1591,0.27 0.18805,0.255 0.21695,0.24 0.24004,0.217 0.25576,0.188 0.26925,0.159 0.28047,0.131 0.28947,0.101 0.29621,0.072 0.3007,0.044 0.30295,0.014 0.30295,-0.014 0.3007,-0.044 0.2962,-0.072 0.28947,-0.101 0.28048,-0.131 0.26925,-0.159 0.25576,-0.188 0.24003,-0.217 0.21697,-0.24 0.18803,-0.255 0.15911,-0.27 0.13018,-0.28 0.10125,-0.29 0.07231,-0.296 0.04339,-0.301 0.01447,-0.303 -0.01447,-0.302 -0.04339,-0.301 -0.07231,-0.296 -0.10125,-0.29 -0.13018,-0.28 -0.15911,-0.27 -0.18803,-0.255 -0.21697,-0.24 -0.24003,-0.217 -0.25577,-0.188 -0.26925,-0.16 -0.28047,-0.13 -0.28947,-0.101 -0.2962,-0.072 -0.30071,-0.044 -0.30295,-0.014 z m -10.07208,0 -0.30294,0.014 -0.30071,0.044 -0.2962,0.072 -0.28947,0.101 -0.28048,0.13 -0.26925,0.16 -0.25576,0.188 -0.24003,0.217 -0.21696,0.24 -0.18803,0.255 -0.15912,0.27 -0.13017,0.28 -0.10125,0.29 -0.07232,0.296 -0.04339,0.301 -0.01446,0.302 0.01446,0.303 0.04339,0.301 0.07232,0.296 0.10125,0.29 0.13017,0.28 0.15912,0.27 0.18803,0.255 0.21696,0.24 0.24004,0.217 0.25576,0.188 0.26925,0.159 0.28048,0.131 0.28947,0.101 0.2962,0.072 0.3007,0.044 0.30295,0.014 0.30295,-0.014 0.3007,-0.044 0.29621,-0.072 0.28947,-0.101 0.28047,-0.131 0.26925,-0.159 0.25576,-0.188 0.24004,-0.217 0.21696,-0.24 0.18803,-0.255 0.15911,-0.27 0.13018,-0.28 0.10124,-0.29 0.07232,-0.296 0.0434,-0.301 0.01446,-0.303 -0.01446,-0.302 -0.0434,-0.301 -0.07232,-0.296 -0.10124,-0.29 -0.13018,-0.28 -0.15911,-0.27 -0.18803,-0.255 -0.21696,-0.24 -0.24004,-0.217 -0.25577,-0.188 -0.26924,-0.16 -0.28048,-0.13 -0.28947,-0.101 -0.29621,-0.072 -0.3007,-0.044 -0.30295,-0.014 z m -9.86368,0 -0.30295,0.014 -0.3007,0.044 -0.29621,0.072 -0.28946,0.101 -0.28048,0.13 -0.26925,0.16 -0.25576,0.188 -0.24004,0.217 -0.21697,0.24 -0.18803,0.255 -0.15911,0.27 -0.13017,0.28 -0.10125,0.29 -0.07232,0.296 -0.04339,0.301 -0.01447,0.302 0.01447,0.303 0.04339,0.301 0.07232,0.296 0.10125,0.29 0.13017,0.28 0.15911,0.27 0.18803,0.255 0.21697,0.24 0.24004,0.217 0.25576,0.188 0.26925,0.159 0.28048,0.131 0.28946,0.101 0.29621,0.072 0.3007,0.044 0.30295,0.014 0.30294,-0.014 0.3007,-0.044 0.2962,-0.072 0.28947,-0.101 0.28048,-0.131 0.26925,-0.159 0.25576,-0.188 0.24004,-0.217 0.21696,-0.24 0.18804,-0.255 0.15911,-0.27 0.13017,-0.28 0.10125,-0.29 0.07232,-0.296 0.04339,-0.301 0.01447,-0.303 -0.01447,-0.302 -0.04339,-0.301 -0.07232,-0.296 -0.10125,-0.29 -0.13017,-0.28 -0.15911,-0.27 -0.18804,-0.255 -0.21696,-0.24 -0.24004,-0.217 -0.25576,-0.188 -0.26925,-0.16 -0.28048,-0.13 -0.28947,-0.101 -0.2962,-0.072 -0.3007,-0.044 -0.30294,-0.014 z m 8.32286,-9.239 15.34047,0 0.5386,0.028 0.52305,0.079 0.50484,0.13 0.48399,0.177 0.46048,0.222 0.43434,0.264 0.40553,0.303 0.37409,0.34 0.34,0.374 0.30326,0.406 0.26387,0.434 0.22183,0.461 0.17714,0.484 0.12981,0.505 0.07982,0.523 0.02721,0.538 0,13.776 -0.02721,0.539 -0.07982,0.523 -0.12982,0.505 -0.17714,0.484 -0.22183,0.46 -0.26387,0.435 -0.30325,0.405 -0.34,0.374 -0.3741,0.34 -0.40553,0.304 -0.43434,0.263 -0.46048,0.222 -0.48399,0.177 -0.50484,0.13 -0.52304,0.08 -0.5386,0.027 -27.04358,0 -0.5386,-0.027 -0.52305,-0.08 -0.50484,-0.13 -0.48399,-0.177 -0.46048,-0.222 -0.43434,-0.263 -0.40554,-0.304 -0.37409,-0.34 -0.34,-0.374 -0.30325,-0.405 -0.26387,-0.435 -0.22183,-0.46 -0.17714,-0.484 -0.12981,-0.505 -0.07983,-0.523 -0.0272,-0.539 0,-13.776 0.0272,-0.538 0.07983,-0.523 0.12981,-0.505 0.17714,-0.484 0.22183,-0.461 0.26386,-0.434 0.30326,-0.406 0.34,-0.374 0.37409,-0.34 0.40554,-0.303 0.43434,-0.264 0.46048,-0.222 0.48399,-0.177 0.50484,-0.13 0.52305,-0.079 0.5386,-0.028 2.46387,0 0.11755,-8.405 9.12169,8.405 z" /></g></g></g></svg>


--------------------------------------------------------------------------------
/examples/popup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" id="htmlID" class="htmlClass">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
  6 | 	<meta name="apple-mobile-web-app-capable" content="yes">
  7 | 	<link rel="apple-touch-startup-image" href="startup.png">
  8 | 	<link rel="apple-touch-icon" href="chocolatechip-icon.png"/>
  9 | 	<link rel="shortcut icon" href="favicon.ico">
 10 | 	<title>ChocolateChip Mobile</title>
 11 | 	<link rel="stylesheet" href="../chui/chui.css">
 12 | 	<style>
 13 | 		/* Local Styles Here */
 14 | 		/* Popup Demo Styles */
 15 | 		#popupMessageTarget {
 16 | 			opacity: 0;
 17 | 			font-size: 24px;
 18 | 			font-weight: bold;
 19 | 			color: red;
 20 | 			text-shadow: 0px 1px 2px #666, 0px -1px 1px #fff;
 21 | 		}
 22 | 		.animatePopupMessage {
 23 | 			-webkit-animation-duration: 2s;
 24 | 			-webkit-animation-timing-function: linear;
 25 | 			-webkit-animation-name: updatePopupMessage;
 26 | 		}
 27 | 		
 28 | 		@-webkit-keyframes updatePopupMessage {
 29 | 			0% { opacity: 0; }
 30 | 			10% { opacity: 1; }
 31 | 			95% { opacity: 1; }
 32 | 			100% { opacity: 0; }
 33 | 		}
 34 | 		
 35 | 	</style>
 36 |     <script src="../chui/zepto.js"></script>
 37 |     <script src="../chui/chui.js"></script>
 38 |     <script src="../chui/iscroll.js"></script>
 39 | 	<script>
 40 | 		/* Local JavaScript Here */
 41 | 	
 42 | 		$(function() {
 43 | 			// This is just an animation for popup callback. Not part of popup functionality.
 44 | 			$("#popupMessageTarget").bind("webkitAnimationEnd", function() {
 45 | 				this.className = "";
 46 | 				this.textContent = "";
 47 | 			});
 48 | 			
 49 | 			// Bind event to show the popup:
 50 | 			$("#openPopup").bind("click", function() {
 51 | 				$.UIShowPopUp({
 52 | 					selector: "#main",
 53 | 					id: "warning",
 54 | 					title: 'Attention Viewers!', 
 55 | 					message: 'This is a message from the sponsors. Please be seated while we are getting ready. Thank you for your patience.', 
 56 | 					cancelUIButton: 'Skip', 
 57 | 					continueUIButton: 'Stay for it', 
 58 | 					callback: function() {
 59 | 						var popupMessageTarget = document.querySelector('#popupMessageTarget');
 60 | 						popupMessageTarget.textContent = 'Thanks for staying with us a bit longer.';
 61 | 						popupMessageTarget.className = "";
 62 | 						popupMessageTarget.className = "animatePopupMessage";
 63 | 					}
 64 | 				});
 65 | 			});
 66 | 			
 67 | 		});
 68 | 		
 69 | 	</script>
 70 | </head>
 71 | <body class="bodyClass" id="bodyID">
 72 | 	<app id="appID" class="appClass">
 73 | 		<view title="Main" class="mainView" id="main" ui-background-style="striped" ui-navigation-status="current">
 74 | 			<navbar id="segmentedToolbar">
 75 | 				<h1 ui-bar-align="center">Popup Example</h1>
 76 | 				<uibutton ui-bar-align="right" id="openPopup" ui-implements="edit">
 77 | 					<label>Popup</label>
 78 | 				</uibutton>
 79 | 			</navbar>
 80 | 			<subview id="subview1" class="mySubView" ui-associations="withNavBar">
 81 | 				<scrollpanel>
 82 | 				<tableview id="tableview_01" class="myTableView">
 83 | 					<tableheader>This is a Table View Header</tableheader>
 84 | 					<tablecell  id="c1">
 85 | 						<celltitle ui-wild-color="green">Item One</celltitle>
 86 | 					</tablecell>
 87 | 					<tablecell id="c2">
 88 | 						<celltitle>Item Two</celltitle>
 89 | 					</tablecell>
 90 | 					<tablecell id="c3">
 91 | 						<celltitle>Item Three</celltitle>
 92 | 					</tablecell>
 93 | 				</tableview>
 94 | 				<tableview>
 95 | 					<tableheader>Another Table Header</tableheader>
 96 | 					<tablecell ui-subtitle-alignment="right">
 97 | 						<celltitle>Title One</celltitle>
 98 | 						<cellsubtitle>Something</cellsubtitle>
 99 | 					</tablecell>
100 | 					<tablecell ui-subtitle-alignment="right">
101 | 						<celltitle>Title Two</celltitle>
102 | 						<cellsubtitle>Another One</cellsubtitle>
103 | 					</tablecell>
104 | 					<tablecell ui-table-cell-order="stacked">
105 | 						<celltitle>Title Three</celltitle>
106 | 						<cellsubtitle>This is different</cellsubtitle>
107 | 						<celldetail>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</celldetail>
108 | 						<p id="popupMessageTarget"></p>
109 | 					</tablecell>
110 | 					<tablefooter>Table footer here for whatever you need it for.</tablefooter>
111 | 				</tableview>
112 | 				</scrollpanel>
113 | 			</subview>
114 | 		</view>
115 | 	</app>
116 | </body>
117 | </html>
118 | 


--------------------------------------------------------------------------------