mui
mui
a mobile ui framework based on iscroll.js and zepto.js ,it is safe to say, it is a mobile version of zui view at github
popup,modal
popup
Click to popup
write it in html
hide in 3000ms
short msg
position:static
//popup
$('#pop').click(function() {
mui.popup({content:'popup content'})
})
$('#pop2').click(function() {
mui.popup({
content:'popup content',
timer:3000
})
})
$('#pop3').click(function() {
mui.popup({
content:'loading...',
timer:3000,
short:true
})
})
$('#pop4').click(function() {
mui.popup({
content:'position:static',
fixed:false,
css:'close-btn-pos-left',
})
})
modal
modal dom should be in non-position-relative or non-position-absolute dom. just be children of 'body' will be fine.
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
| 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
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
basic use,debug,initUI
basic structure
only when you do not want it positioned by js and do not need modal or popup function, then the 'body' class is not nessecery.
fixed header,optinal
body wrapper, all dom puts here
fixed footer,optinal
check the demo here mui basic demo, or scan the qr code below to see it.
http://html5beta.com/demo/mui/demo/demo.html
debug
see the footer
debugON = true
debug('debug info.')
//for mobile device debug
initUI
//default function
mui.initUI()
//for new created ui elem
$('body').append('')
mui.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/mui.css">
<link rel="stylesheet" type="text/css" href="css/your-css.css">
<!-- js -->
<script src="js/zepto.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/mui.js"></script>
<script src="js/your-js.js"></script>
//initUI in proper position of your-js.js
mui.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
scan the qrcode to access this page's url
debug: