<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的更多相关文章

  1. 移动端前端UI库—Frozen UI、WeUI、SUI Mobile

    [MUI]http://www.dcloud.io/ [Clouda]http://clouda.baidu.com/blend2是百度历时两年共同研发的开源App技术框架,基于Node.js,简单易 ...

  2. 移动端前端框架UI库(Frozen UI、WeUI、SUI Mobile)

    Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...

  3. 推荐:移动端前端UI库—Frozen UI、WeUI、SUI Mobile

    Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...

  4. 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile

    web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/  很厉害的一个个人产品 http://amazeui ...

  5. 阿里巴巴SUI Mobile的使用

    1.引入文件 <link rel="stylesheet" href="./css/sm.min.css"> <link rel=" ...

  6. SUI Mobile框架开发,android、ios表单遇到的问题

    1.页面添加区域滚动,滚动区域内元素事件无效问题 解决方法: <script type="text/javascript" charset="utf-8" ...

  7. sui Mobile 试玩

    .... 突然就用上这东西还不熟悉就写了一个页面而已 <a class="open-popup button pull-right create-actions" id=&q ...

  8. 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得

    1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...

  9. 使用sui实现的选择控件【性别、日期、省市级联】

    使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...

随机推荐

  1. (中等) POJ 3225 Help with Intervals , 线段树+集合。

    Description LogLoader, Inc. is a company specialized in providing products for analyzing logs. While ...

  2. jQuery扩展两类函数(对象调用,静态调用)

    作者:zccst 先看小例子: $(function(){ //扩展方式1-通过对新调用 $.fn.each1=function(){ console.log("hehehehe$.fn.f ...

  3. bitmap格式分析(转)

    源:bitmap格式分析 参考:bitmap图像介绍 最近正在着手开发一个图片库,也就是实现对常见图片格式的度写操作.作为总结与积累,我会把这些图片格式以及加载的实现写在我的Blog上. 说到图片,位 ...

  4. ios 设置屏幕方向的两种方法

    第一种:通过人为的办法改变view.transform的属性. 具体办法: view.transform一般是View的旋转,拉伸移动等属性,类似view.layer.transform,区别在于Vi ...

  5. 【转】20条Linux命令面试问答

    问:1 如何查看当前的Linux服务器的运行级别? 答: ‘who -r’ 和 ‘runlevel’ 命令可以用来查看当前的Linux服务器的运行级别. 问:2 如何查看Linux的默认网关? 答: ...

  6. 包含中文字符的NSString 转换为NSURL

    转包含中文字符的NSString 转换为NSURL NSString中如果包括中文字符的话转换为NSURL得到的值为nil,在网上搜了下,用stringByAddingPercentEscapesUs ...

  7. iOS 之 二维码生成与扫描(LBXScan)

    参考:https://github.com/MxABC/LBXScan 步骤如下: 1. 下载 通过参考网址进行下载. 2. 导入 导入整个LBXScan文件夹 3. 配置 在pch中加入 #impo ...

  8. thinkphp CURD 1

    二.ThinkPHP 3 读取数据    (重点)    对数据的读取 Read    $m=new Model('User');    $m=M('User'); select    $m-> ...

  9. 如何将php数组或者对象传递给javascript

    在网上搜了一些方法,最后自己采用的是通过json字串的方式. 假设有一个php 数组 $arr,代码如下: 代码如下: <script> // html5中默认的script是javasc ...

  10. KingbaseES的standby搭建

    KingbaseES数据库部署及双机热备配置 Dataguard双机热备部署 注:配置期间使用数据库的属主用户进行操作 1.1 数据一致性准备 (1)修改数据库的配置文件参数:(2阶段初始化的数据库实 ...