当前位置: 首页 > 工具软件 > ZUI > 使用案例 >

zui消息推送服务器,zui

宫晟
2023-12-01

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:

 类似资料: