SUI Mobile
<header class="bar bar-nav">
<h1 class='title'>只有图标的表单</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" placeholder="Your name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-email"></i></div>
<div class="item-inner">
<div class="item-input">
<input type="email" placeholder="E-mail">
</div>
</div>
</div>
</li>
<!-- Select -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-gender"></i></div>
<div class="item-inner">
<div class="item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<header class="bar bar-nav">
<h1 class='title'>表单</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">姓名</div>
<div class="item-input">
<input type="text" placeholder="Your name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-email"></i></div>
<div class="item-inner">
<div class="item-title label">邮箱</div>
<div class="item-input">
<input type="email" placeholder="E-mail">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-password"></i></div>
<div class="item-inner">
<div class="item-title label">密码</div>
<div class="item-input">
<input type="password" placeholder="Password" class="">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-gender"></i></div>
<div class="item-inner">
<div class="item-title label">性别</div>
<div class="item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
<!-- Date -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-calendar"></i></div>
<div class="item-inner">
<div class="item-title label">生日</div>
<div class="item-input">
<input type="date" placeholder="Birth day" value="2014-04-30">
</div>
</div>
</div>
</li>
<!-- Switch (Checkbox) -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-toggle"></i></div>
<div class="item-inner">
<div class="item-title label">开关</div>
<div class="item-input">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li class="align-top">
<div class="item-content">
<div class="item-media"><i class="icon icon-form-comment"></i></div>
<div class="item-inner">
<div class="item-title label">文本域</div>
<div class="item-input">
<textarea></textarea>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
<div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
</div>
</div>
</div> <header class="bar bar-nav">
<h1 class='title'>搜索栏</h1>
</header>
<div class="bar bar-header-secondary">
<div class="searchbar">
<a class="searchbar-cancel">取消</a>
<div class="search-input">
<label class="icon icon-search" for="search"></label>
<input type="search" id='search' placeholder='输入关键字...'/>
</div>
</div>
</div>
<header class="bar bar-nav">
<h1 class='title'>表单</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">姓名</div>
<div class="item-input">
<input type="text" placeholder="Your name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-email"></i></div>
<div class="item-inner">
<div class="item-title label">邮箱</div>
<div class="item-input">
<input type="email" placeholder="E-mail">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-password"></i></div>
<div class="item-inner">
<div class="item-title label">密码</div>
<div class="item-input">
<input type="password" placeholder="Password" class="">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-gender"></i></div>
<div class="item-inner">
<div class="item-title label">性别</div>
<div class="item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
<!-- Date -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-calendar"></i></div>
<div class="item-inner">
<div class="item-title label">生日</div>
<div class="item-input">
<input type="date" placeholder="Birth day" value="2014-04-30">
</div>
</div>
</div>
</li>
<!-- Switch (Checkbox) -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-toggle"></i></div>
<div class="item-inner">
<div class="item-title label">开关</div>
<div class="item-input">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li class="align-top">
<div class="item-content">
<div class="item-media"><i class="icon icon-form-comment"></i></div>
<div class="item-inner">
<div class="item-title label">文本域</div>
<div class="item-input">
<textarea></textarea>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
<div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
</div>
</div>
</div>
<header class="bar bar-nav">
<h1 class="title">视图列表</h1>
</header>
<div class="content">
<div class="content-block-title">图标、标题和副标题</div>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">商品名称</div>
<div class="item-after">杜蕾斯</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">型号</div>
<div class="item-after">极致超薄型</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">标题和副标题</div>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">商品名称</div>
<div class="item-after">杜蕾斯</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">型号</div>
<div class="item-after">极致超薄型</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">带箭头</div>
<div class="list-block">
<ul>
<li class="item-content item-link">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">商品名称</div>
<div class="item-after">杜蕾斯</div>
</div>
</li>
<li class="item-content item-link">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">型号</div>
<div class="item-after">极致超薄型</div>
</div>
</li>
</ul>
</div>
</div> 预加载 Modal 用来提示一些后台活动（像Ajax请求）和阻止在这个活动期间的任何用户操作。 打开预加载 modal 我们也需要调用适当的App方法: $.show预加载([title])- 显示 预加载 modal
title - string. Optional. 预加载 modal 标题. 默认（没有指定）的时候，它等同于 "Loading...". 你可以在App初始化时通过 modal预加载Title 参数改变默认的 预加载 标题。
该方法返回动态创建的modal的HTML元素。
$.hide预加载() - 隐藏/关闭 预加载 modal. 因为 预加载 modal 没有任何按钮, 它应该用 JavaScript 来关闭
<header class="bar bar-nav">
<h1 class="title">预加载 Modal (Preloader Modal)</h1>
</header>
...
<div class="content">
<div class="content-block">
<p><a href="#" class="open-preloader">Open Preloader</a></p>
<p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
</div>
</div>
...$(document).on('click', '.open-preloader', function () {
$.showPreloader();
setTimeout(function () {
$.hidePreloader();
}, 2000);
});
$(document).on('click','.open-preloader-title', function () {
$.showPreloader('Custom Title')
setTimeout(function () {
$.hidePreloader();
}, 2000);
});迷你指示器
如果你不需要用像预加载Modal这样如此大的modal 窗口去指示活动, 你可以使用简单并且小的指示器modal:
$.showIndicator() - 显示指示器 modal
$.hideIndicator() - 隐藏/关闭指示器 modal. 因为指示器modal没有任何按钮, 它需要用JavaScript来关闭
<header class="bar bar-nav">
<h1 class="title">指示器(indicator)</h1>
</header>
...
<div class="content">
<div class="content-block">
<p><a href="#" class="open-indicator">Open Indicator</a></p>
</div>
</div>
...$(document).on('click','.open-indicator', function () {
$.showIndicator();
setTimeout(function () {
$.hideIndicator();
}, 2000);
});
Alert
我们需要调用以下任一一种App方法来打开Alert modal ：$.alert(text, [title, callbackOk])
或者$.alert(text, [callbackOk])
text- string. Alert文本title- string. Optional. Alert modal 标题callbackOk- function. Optional.在Alert modal下，当用户点击“Ok”按钮时，回调函数将被执行。
该方法返回动态创建的modal的HTML元素。
<header class="bar bar-nav">
<h1 class="title">Alert</h1>
</header>
...
<div class="content">
<div class="content-block">
<p><a href="#" class="alert-text">Alert With Text</a></p>
<p><a href="#" class="alert-text-title">Alert With Text and Title</a></p>
<p><a href="#" class="alert-text-title-callback">Alert With Text and Title and Callback</a></p>
<p><a href="#" class="alert-text-callback">Alert With Text and Callback</a></p>
</div>
</div>
...$(function(){
$(document).on('click','.alert-text',function () {
$.alert('Here goes alert text');
});
$(document).on('click','.alert-text-title', function () {
$.alert('Here goes alert text', 'Custom Title!');
});
$(document).on('click', '.alert-text-title-callback',function () {
$.alert('Here goes alert text', 'Custom Title!', function () {
$.alert('Button clicked!')
});
});
$(document).on('click', '.alert-text-callback',function () {
$.alert('Here goes alert text', function () {
$.alert('Button clicked!')
});
});
})
$(document).on('click', '.confirm-ok-cancel',function () {
$.confirm('Are you sure?',
function () {
$.alert('You clicked Ok button');
},
function () {
$.alert('You clicked Cancel button');
}
);
});SUI Mobile的更多相关文章
- 移动端前端UI库—Frozen UI、WeUI、SUI Mobile
[MUI]http://www.dcloud.io/ [Clouda]http://clouda.baidu.com/blend2是百度历时两年共同研发的开源App技术框架,基于Node.js,简单易 ...
- 移动端前端框架UI库（Frozen UI、WeUI、SUI Mobile）
Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...
- 推荐：移动端前端UI库—Frozen UI、WeUI、SUI Mobile
Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...
- 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile
web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/ 很厉害的一个个人产品 http://amazeui ...
- 阿里巴巴SUI Mobile的使用
1.引入文件 <link rel="stylesheet" href="./css/sm.min.css"> <link rel=" ...
- SUI Mobile框架开发，android、ios表单遇到的问题
1.页面添加区域滚动,滚动区域内元素事件无效问题 解决方法: <script type="text/javascript" charset="utf-8" ...
- sui Mobile 试玩
.... 突然就用上这东西还不熟悉就写了一个页面而已 <a class="open-popup button pull-right create-actions" id=&q ...
- 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得
1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...
- 使用sui实现的选择控件【性别、日期、省市级联】
使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...
随机推荐
- 手机端 H5上传头像
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- (中等) HDU 1542 Atlantis，扫描线。
Problem Description There are several ancient Greek texts that contain descriptions of the fabled is ...
- 【转】每一个程序员需要了解的10个Linux命令
作为一个程序员,在软件开发职业生涯中或多或少会用到Linux系统,并且可能会使用Linux命令来检索需要的信息.本文将为各位开发者分享10个有用的Linux命令,希望对你会有所帮助. 以下就是今天我们 ...
- 编写高质量JavaScript代码的基本要点记录
原文:深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 1.最小全局变量(Minimizing Globals)的重要性 JavaScript通过函数管理作用域.在 ...
- ecshop--标签数组
$properties 商品属性 array(1) { ["商品属性"]=> array(1) { [178]=> array(2) { ["name&qu ...
- Tsinsen-1486:树【Trie树 + 点分治】
暴力部分: 这个题一开始的想法是 n^2 枚举两个点,然后logn维护LCA,在倍增的同时维护异或值和 k 的个数. s_z_l老爷指导了新的思路,既然这个树只有n^2个LCA,那么枚举LCA,同时向 ...
- Java解析JSON文件的方法（一）
一.首先需要在Eclipse工程中导入相关的jar包,jar包参见链接:http://yunpan.alibaba-inc.com/share/link/NdA5b6IFK 二.提供一份待解析的jso ...
- Java动态数组
其中java动态数组: Java动态数组是一种可以任意伸缩数组长度的对象,在Java中比较常用的是ArrayList,ArrayList是javaAPI中自带的java.util.ArrayList. ...
- Python的zip函数
zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表.具体意思不好用文字来表述,直接看示例: 1.示例1: x = [1, 2, 3] y = [4, 5, 6] z = [7 ...
- Windows 10安裝在USB外接硬碟(使用命令模式)
微軟公司已經在2015年7月29日發佈Windows 10正式版,這個版本在使用介面上就像是Windows 7加上Windows 8的組合, 開始鍵與功能列回來了.微軟提供Windows 7與Wind ...