A front UI framework for WeChat H5 pages. Here is example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
<link href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/bigxxs/[email protected]/kmui.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bigxxs/[email protected]/kmui.js"></script>
</head>
<body>
<script>
$(function(){
kmui.messageBox('hello world')
})
</script>
</body>
</html>
<div class="title-bar">This is a title</div>
<div class="search-bar">
<input type="text"/>
<button>Search</button>
</div>
<div class="list-box">
<div class="list-item">One</div>
<div class="list-item">Two</div>
<div class="list-item">Three</div>
</div>
<div class="list-box">
<a class="list-item">One</a>
<a class="list-item">Two</a>
<a class="list-item">Three</a>
</div>
<div class="card">
<div class="card-hd">Card one title</div>
<div class="card-bd">some content ......</div>
<div class="card-ft">footer</div>
</div>
<div class="card">
<div class="card-hd">Card two title</div>
<div class="card-bd">some content ......</div>
<div class="card-ft align-right">footer at right</div>
</div>
<div class="form">
<label>User name</label>
<input type="text"/>
<label>Password</label>
<input type="password"/>
<label>Mobile verification code</label>
<div class="form-line">
<input type="text" class="form-line-bd" />
<button class="form-line-ft">Send</button>
</div>
<label>This is a textarea</label>
<textarea rows="3"></textarea>
<label>This is a select</label>
<select>
<option>Tom</option>
<option>Smith</option>
<option>Peter</option>
</select>
<label>This is a checkbox list</label>
<div class="select-box">
<div class="select-item">Uncheked</div>
<div class="select-item checked">Checked</div>
</div>
<div class="form-submit-line">
<button class="btn-primary">Login</button>
<button>Cancel</button>
</div>
<div class="form-submit-line">
<button>This is a 100% width button</button>
</div>
</div>
<script>
//show a simple loading
kmui.showLoading()
//show loading with title
kmui.showLoading('custom title')
//hide loading
kmui.hideLoading()
</script>
<script>
kmui.messageBox('Hello world!')
</script>
<script>
//with callback function
kmui.messageBox('Hello world!', function(){
alert('You pressed OK')
})
</script>
<script>
kmui.confirm('Do you really want to remove this?', function (isConfirm) {
if(isConfirm){
alert('You pressed YES')
}
else{
alert('You pressed NO')
}
})
</script>
<script>
kmui.dialog({
title: 'Title of dialog',
content: 'some content ......',
buttons: [
{
text: 'Button ONE',
click: function () {
//do some thing ...
return true; //return true can close dialog
}
},
{
text: 'Button TWO',
click: function () {
//do some thing ...
return true; //return true can close dialog
}
}
]
})
</script>
<script>
kmui.showSelecter({
multiple: false, //single select
data: ['RED', 'GREEN', 'BLUE', 'YELLOW'],
selected: ['BLUE'], //default checked element, can be an empty array []
callback: function (res) {
console.log(res) //return value is an array
}
})
</script>
<script>
kmui.showSelecter({
multiple: true, //multiple select
valueMember: 'id', //value field name of data member
textMember: 'name', //text field name of data member
data: [
{ id: '1', name: 'Bird'},
{ id: '2', name: 'Cat'},
{ id: '3', name: 'Dog'},
],
selected: [],
callback: function (res) {
console.log(res)
}
})
</script>
<div>
<span>A</span>
<span class="float-right">B</span>
</div>
<div class="padding-container">
give me five
</div>