zui
zui
a mobile ui framework based on zepto.js view at github
popup,modal
popup
//popup
$('#pop').click(function() {
popup({content:'popup content'})
})
$('#pop2').click(function() {
popup({
content:'popup content',
timer:3000
})
})
$('#pop3').click(function() {
popup({
content:'loading...',
timer:3000,
short:true
})
})
$('#pop4').click(function() {
popup({
content:'position:static',
fixed:false,
css:'close-btn-pos-left',
})
})
modal
This is modal content
Check if the parent node contains the given DOM node. Returns false if both are the same node.
Click to see modal
$('#modal-btn').click(function() {
$('#modal-content-wrap').modal({
width:400,
title:'Modal Title',
dismiss:true,
showTitle:true
})
})
button
basic
inline, color-theme
corner,shadow,icon only
button group
grid
two grid
three grid
four grid
five grid
box-model
border,padding
margin
float
box-shadow
border-radius
span basic
iblock
block
table-cell
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
class="block border mg pd"
color,background color
font
font size
bold,italic,indent
table,acordin,list,toolbar
table
acordin
acordin unit 1 header
acordin unit 1 body content
acordin unit 2 header
acordin unit 2 body content
acordin unit 3 header
acordin unit 3 body content
acordin unit 4 header
acordin unit 4 body content
list basic
list with labels
list with shadow
list-shadow, corner
list-shadow, corner, icon
toolbar
class="bar aligncenter bg-red"
class="bar aligncenter bg-green"
class="bar aligncenter bg-fff"
optional: class="header-fixed" or class="footer-fixed"
icons
icons
icons,border-radius
icons,outer-cell
form element
all inputs
with clear btn
input with clear button
input set font size 1.2 em
textarea
default radio
javascript
node.js
zepto.js
ui radio
class="radiogroup" pair label with radio
javascript
node.js
zepto.js
ui radio inline
class="radiogroup radio-inline" pair label with radio
javascript
node.js
zepto.js
ui radio inline,shadow
class="radiogroup radio-inline with-shadow" pair label with radio
javascript
node.js
zepto.js
button,reset,submit
ui button,reset,submit
default checkbox
Enable
ui checkbox
用 class="ui-checkbox" or class="ui-checkbox with-shadow"(box-shadow) , pair label with radio
Enable1
Enable2
Enable3
ui checkbox, inline
Enable1
Enable2
Enable3
select
javascript
zepto.js
html5beta.com
jQuery
zui
select, inline
javascript
zepto.js
html5beta.com
jQuery
zui
debug,initUI
debug
see the footer
debugON = true
debug('debug info.')
//for mobile device debug
initUI
//default function
initUI()
//for new created ui elem
$('body').append('
how to use
//initUI in proper position of your-js.js
initUI()
about
a mobile ui framework based on zepto.js
it is far from stable,this is the very first release.
debug: