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> ...

随机推荐

mysql 千万量级的表的优化
参考: 一大的优化方向: 数据结构优化,慢查询优化,索引优化,mysql参数设置优化数据结构优化:先读写分离.再垂直拆分.再水平拆分! 说3点 1. 设计合适的索引,基于主键的查找,上亿数据也是 ...
lpc1768ADC使用
Lpc1768内置有一个ad外设,该外设有八路复用输入,所以,可以同时接八路ad设备,同时还支持触发转换模式,由外部端口进行ad触发,ad转换完成之后可以产生中断 Lpc1768支持的转换模式有两种, ...
iOS开发UITableView基本使用方法总结
本文为大家呈现了iOS开发中UITableView基本使用方法总结.首先,Controller需要实现两个delegate ,分别是UITableViewDelegate 和UITableViewDa ...
ios 屏幕方向的设置
ref: http://www.cnblogs.com/niit-soft-518/p/5611298.html 实际的项目需求.root是TabBarController,里面有4个navigati ...
android——网络操作（一）连接网络
连接网络一,包含许可 <uses-permissionandroid:name="android.permission.INTERNET"/> <uses-pe ...
iOS 操作系统整体架构层次讲解
iOS的系统架构分为四个层次:核心操作系统层(Core OS layer).核心服务层(Core Services layer).媒体层(Media layer)和可触摸层(Cocoa Touch l ...
基于arm开发板四个按键控制四个灯亮
基于s5pv2410,cortex a8的四个按键每一个按键点了对应的灯对于用汇编来编程的话不难,重点在于数据手册,电路图,管脚的看懂直接上代码 .globl _start_start: ldr ...
【WebStorm】前端工具开发利器webstrom专篇...更新中
http://my.oschina.net/maomi/blog/137807#OSC_h2_5 WebStorm混搭svn WebStorm混搭nodeJS webstorm简单介绍 webstor ...
Cassandra 单机入门例子——有索引
入门例子: http://wiki.apache.org/cassandra/GettingStarted 添加环境变量并source生效,使得可以在任意位置执行cassandra/bin安装目录下的 ...
iOS 之 Property List
1. 概念用于存储串行化对象,xml格式,存储到plist文件中. 2. 用途存储用户设置. 3. 优点程序运行时可动态创建和读写. 4. 使用说明 4.1. 获取plist文件 NSStrin ...

SUI Mobile

迷你指示器

Alert

SUI Mobile的更多相关文章

随机推荐

热门专题