ie is not supported, please use firefox, chrome, opera, safari or other webkit browsers to visit this page.

zui

zui

a mobile ui framework based on zepto.js view at github

download zui ver 0.5

popup,modal

popup

    

Click to popup write it in html hide in 3000ms short msg position:static

  //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

    
    Click to see modal
  
    $('#modal-btn').click(function() {
        $('#modal-content-wrap').modal({
            width:400,
            title:'Modal Title',
            dismiss:true,
			showTitle:true
        })
    })
  

button

basic

    

link button

link button with shadow

link button with icon

link button with icon at right

inline, color-theme

    

button button button button button button button

corner,shadow,icon only

    

button button button icon only button

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

    
Rank Movie Title Year Rating Reviews
1 Citizen Kane 1941 100% 74
2 Casablanca 1942 97% 64
3 The Godfather 1972 97% 87
4 Gone with the Wind 1939 96% 87
5 Lawrence of Arabia 1962 94% 87
6 Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb 1964 92% 74
7 The Graduate 1967 91% 122
8 The Wizard of Oz 1939 90% 72
9 Singin' in the Rain 1952 89% 85
10 Inception 2010 84% 78

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

    
Back

Title

Next

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

    

textarea

    

default radio

ui radio

class="radiogroup" pair label with radio

    

ui radio inline

class="radiogroup radio-inline" pair label with radio

    

ui radio inline,shadow

class="radiogroup radio-inline with-shadow" pair label with radio

    

button,reset,submit

ui button,reset,submit

    

default checkbox

ui checkbox

用 class="ui-checkbox" or class="ui-checkbox with-shadow"(box-shadow) , pair label with radio

    

ui checkbox, inline

select

    

select, inline

    

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('')
    initUI('#new') //not a proper solution, for now it will cover the problem
  

how to use

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="css/zui.css">
    <link rel="stylesheet" type="text/css" href="css/your-css.css">
    
    <!-- js -->
    <script src="js/zui.js"></script>
    <script src="js/your-js.js"></script>
  

    //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.

Created by ZHAO Xudong

blog - github - stackoverflow - weibo - email - QQ

debug: