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> ...
随机推荐
- 【转】一大波实用的 bash 别名和函数
作为一个命令行探索者,你或许发现你自己一遍又一遍重复同样的命令.如果你总是用ssh进入到同一台电脑,如果你总是将一连串命令连接起来,如果你总是用同样的参数运行一个程序,你也许希望在这种不断的重复中为你 ...
- UVa 10945 - Mother bear
题目大意:给一个字符串,判断是否回文(忽略大小写,忽略非字母字符). #include <cstdio> #include <cctype> #include <cstr ...
- SRM 592 DIV2 报告
昨天下午查看邮箱,看到了topcoder的SRM比赛通知和cf的比赛通知,当时什么也不想做,心里空荡荡的,忽然就想参加一下,试试看.吃完晚饭回来一看,就剩十几分钟了,匆忙把平台下了,就开始等待比赛开始 ...
- driver_register()函数解析
driver_register()函数解析 /** * driver_register - register driver with bus * @drv: driver to register * ...
- Python3基础 lambda表达式 简单示例
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- arcgis 瓦片图加载规则（转载）
arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...
- kafkaspout以及kafkabolt的最简实例
这个实例中有一个KafkaSpout,一个KafkaBolt,一个自定义Bolt QueryBolt.数据流程是KafkaSpout从topic为recommend的消息队列中取出St ...
- XML解析之DOM解析技术案例
Java代码: package com.xushouwei.xml; import java.io.File; import javax.xml.parsers.DocumentBuilder; im ...
- Android性能优化（一）之启动加速35%
一.前言 随着项目版本的迭代,App的性能问题会逐渐暴露出来,而好的用户体验与性能表现紧密相关,从本篇文章开始,我将开启一个Android应用性能优化的专题,从理论到实战,从入门到深挖,手把手将性能优 ...
- js 验证文本框只能输入数字和小数点
第一步.添加js方法 function check(e) { var re = /^\d+(?=\.{0,1}\d+$|$)/ if (e.value != "") ...