Skip to content

Latest commit

 

History

History
745 lines (596 loc) · 20.1 KB

README.md

File metadata and controls

745 lines (596 loc) · 20.1 KB

omui

omui,一个专注移动web开发的框架。

一、基础样式

1.文本

文本大小

<h1>h1,18px</h1>
<h2>h2,17px</h2>
<h3>h3,16px</h3>
<h4>h4,15px</h4>
<h5>h5,14px</h5>
<h6>h6,12px</h6>

文本对齐

<p class="om-txt-left">左对齐</p>
<p class="om-txt-right">右对齐</p>
<p class="om-txt-center">居中对齐</p>
<p class="om-txt-justify-line">一行两端对齐</p>
<p class="om-txt-justify">段落两端对齐</p>

文本颜色

<p class="om-color-default">框架默认颜色</p>
<p class="om-color-red">红色</p>
<p class="om-color-blue">链接蓝色</p>
<p class="om-color-gray">灰色</p>

2.图标

//关闭
<i class="iconfont icon-close"></i>
<i class="iconfont icon-close-full"></i>
//心
<i class="iconfont icon-heart"></i>
<i class="iconfont icon-heart-full"></i>
//位置
<i class="iconfont icon-position"></i>
<i class="iconfont icon-position-full"></i>
//星形
<i class="iconfont icon-star"></i>
<i class="iconfont icon-star-full"></i>
//主页
<i class="iconfont icon-home"></i>
<i class="iconfont icon-home-full"></i>
//购物车
<i class="iconfont icon-cart"></i>
<i class="iconfont icon-cart-full"></i>
//用户
<i class="iconfont icon-user"></i>
<i class="iconfont icon-user-full"></i>
//更多
<i class="iconfont icon-more"></i>
<i class="iconfont icon-more-vertical"></i>
//分享
<i class="iconfont icon-share"></i>
<i class="iconfont icon-share-full"></i>
//评论
<i class="iconfont icon-comment"></i>
<i class="iconfont icon-comments"></i>
//左右
<i class="iconfont icon-left"></i>
<i class="iconfont icon-right"></i>
//火
<i class="iconfont icon-hot"></i>
//邮件
<i class="iconfont icon-email"></i>
//眼睛
<i class="iconfont icon-eye"></i>
<i class="iconfont icon-eye-full"></i>
<i class="iconfont icon-eye-hidden"></i>
//摇一摇
<i class="iconfont icon-swing"></i>
//关机
<i class="iconfont icon-shut-down"></i>
//电话本
<i class="iconfont icon-phone-book"></i>
//删除
<i class="iconfont icon-delete"></i>
//编辑
<i class="iconfont icon-edit"></i>
//设置
<i class="iconfont icon-setting"></i>
//标签
<i class="iconfont icon-tags"></i>
//更换
<i class="iconfont icon-change"></i>
//密码
<i class="iconfont icon-password"></i>
//关闭-大
<i class="iconfont icon-close-big"></i>
//时间
<i class="iconfont icon-time"></i>
//扫描
<i class="iconfont icon-scan"></i>
//表单
<i class="iconfont icon-form"></i>
//提醒
<i class="iconfont icon-horn"></i>
//搜索
<i class="iconfont icon-search"></i>
//图片
<i class="iconfont icon-picture-copy"></i>
//刷新
<i class="iconfont icon-refurbish"></i>

3.网格

默认

<div class="om-grid-row">
    <div class="om-grid-col-50">1</div>
    <div class="om-grid-col-50">2</div>
</div>

网格内容居中

<div class="om-grid-row om-grid-center">
    <div class="om-grid-col-25">1</div>
    <div class="om-grid-col-25">2</div>
    <div class="om-grid-col-25">3</div>
    <div class="om-grid-col-25">4</div>
</div>

其他网格类名

.om-grid-col-10
.om-grid-col-20
.om-grid-col-25
.om-grid-col-33
.om-grid-col-50
.om-grid-col-66
.om-grid-col-75
.om-grid-col-80
.om-grid-col-90

等宽高网格

<div class="om-grid-row om-grid-center">
    <div class="om-grid-col-50 om-grid-equal-50">50</div>
    <div class="om-grid-col-25 om-grid-equal-25">25</div>
    <div class="om-grid-col-25 om-grid-equal-25">25</div>
    <div class="om-grid-col-25 om-grid-equal-25">25</div>
    <div class="om-grid-col-25 om-grid-equal-25">25</div>
</div>

其他等宽高网格类名

.om-grid-equal-25
.om-grid-equal-33
.om-grid-equal-50
.om-grid-equal-66

4.布局

float布局

<ul class="om-layout-ul-3">
    <li>首页</li>
    <li>购物车</li>
    <li>>用户</li>
</ul>
<ul class="om-layout-ul-4">
    <li><img src="../img/grid/x_04.jpg" alt=""/></li>
    <li><img src="../img/grid/x_06.jpg" alt=""/></li>
    <li><img src="../img/grid/x_09.jpg" alt=""/></li>
    <li><img src="../img/grid/x_10.jpg" alt=""/></li>
</ul>

table-cell布局

<ul class="om-layout-table">
    <li>首页</li>
    <li>购物车</li>
    <li>>用户</li>
</ul>
<ul class="om-layout-table">
    <li><img src="../img/grid/x_04.jpg" alt=""/></li>
    <li><img src="../img/grid/x_06.jpg" alt=""/></li>
    <li><img src="../img/grid/x_09.jpg" alt=""/></li>
    <li><img src="../img/grid/x_10.jpg" alt=""/></li>
</ul>

5.文字截断

单行截断

<p class="om-ellipsis">这里是一行文字,长度太长的时候就会变成省略号</p>	

多行截断

<p class="om-ellipsis-two">这里是多行文字,长度太长超过第二行的时候就变成省略号。</p>

二、UI组件

1.头部导航

默认头部

<header class="om-header om-header-default">
    <a href="" class="om-header-left">
        <i class="iconfont icon-left"></i>
    </a>
    <h1 class="om-header-title">omui框架</h1>
    <a href="" class="om-header-right">
        <i class="iconfont icon-home"></i>
    </a>
</header>

灰底头部

<header class="om-header">
    <h1 class="om-header-title">omui框架</h1>
</header>

图标+文字

<header class="om-header om-header-default">
    <a href="javascript:location.back(-1)" class="om-header-left">
        <i class="iconfont icon-left"></i><span class="om-header-nav-btn">返回</span>
    </a>
    <h1 class="om-header-title">omui框架</h1>
    <a href="" class="om-header-right">
        <i class="iconfont icon-home"></i><span class="om-header-nav-btn">首页</span>
    </a>
</header>

头部固定

<header class="om-header om-header-default om-header-fixed">
    <a href="" class="om-header-left">
        <i class="iconfont icon-left"></i>
    </a>
    <h1 class="om-header-title">omui框架</h1>
    <a href="" class="om-header-right">
        <i class="iconfont icon-home"></i>
    </a>
</header>

2.底部导航

纯文字

<footer class="om-footer">
    <ul class="om-layout-table">
        <li class="om-footer-on"><p>首页</p></li>
        <li><p>分类</p></li>
        <li><p>购物车</p></li>
        <li><p>用户</p></li>
    </ul>
</footer>

纯图标

<footer class="om-footer">
    <ul class="om-layout-table">
        <li class="om-footer-on"><i class="iconfont icon-home"></i></li>
        <li><i class="iconfont icon-cate"></i></li>
        <li><i class="iconfont icon-cart"></i></li>
        <li><i class="iconfont icon-user"></i></li>
    </ul>
</footer>

文字+图标

<footer class="om-footer">
    <ul class="om-layout-table">
        <li class="om-footer-on">
            <i class="iconfont icon-home"></i>
            <p>首页</p>
        </li>
        <li>
            <i class="iconfont icon-cate"></i>
            <p>分类</p>
        </li>
        <li>
            <i class="iconfont icon-cart"></i>
            <p>购物车</p>
        </li>
        <li>
            <i class="iconfont icon-user"></i>
            <p>用户</p>
        </li>
    </ul>
</footer>

默认颜色

<footer class="om-footer om-footer-default">
    <ul class="om-layout-table">
        <li class="om-footer-on">
            <i class="iconfont icon-home"></i>
            <p>首页</p>
        </li>
        <li>
            <i class="iconfont icon-cate"></i>
            <p>分类</p>
        </li>
        <li>
            <i class="iconfont icon-cart"></i>
            <p>购物车</p>
        </li>
        <li>
            <i class="iconfont icon-user"></i>
            <p>用户</p>
        </li>
    </ul>
</footer>

3.标签

大标签

<span class="om-tags">刘德华</span>
<span class="om-tags">周杰伦</span>

小标签

<span class="om-tags-s">打球</span>
<span class="om-tags-s">唱歌</span>

4.红点

小红点

<span class="om-reddot-s">刘德华</span>

带数字红点

<span class="om-reddot-num">10</span>

红点在前

<span class="om-reddot-before">10</span>

5.按钮

小按钮

<button class="om-btn-s">确定</button>
<button class="om-btn-s om-btn-default">确定</button>
<button class="om-btn-s om-btn-gray">取消</button>

普通按钮

<button class="om-btn">确定</button>
<button class="om-btn om-btn-default">确定</button>
<button class="om-btn om-btn-gray">取消</button>

大按钮

<button class="om-btn-b">确 定</button>
<button class="om-btn-b om-btn-default">确 定</button>
<button class="om-btn-b om-btn-gray">取消</button>

按钮组

<div class="om-btn-group">
    <button class="om-btn">左边</button>
    <button class="om-btn">中间</button>
    <button class="om-btn">右边</button>
</div>
<div class="om-btn-group om-btn-default">
    <button class="om-btn">左边</button>
    <button class="om-btn">右边</button>
</div>

6.表单

带label输入框

<div class="om-form om-form-label">
    <label for="#">手机号</label>
    <input type="text" class="om-form-input" value="13790461104"/>
</div>

带关闭按钮输入框

<div class="om-form">
    <input type="text" class="om-form-input" placeholder="请输入手机号"/>
    <i class="iconfont icon-close-full"></i>
</div>

带获取验证码按钮

<div class="om-form om-form-captcha">
    <input type="text" class="om-form-input" placeholder="请输入验证码"/>
    <i class="iconfont icon-close-full"></i>
    <button class="om-btn-captcha">获取验证码</button>
</div>

带边框和默认图标

<div class="om-form om-form-border">
    <i class="iconfont icon-user-full"></i>
    <input type="text" class="om-form-input" placeholder="请输入用户名"/>
</div>
<div class="om-form om-form-border">
    <i class="iconfont icon-password"></i>
    <input type="password" class="om-form-input" placeholder="请输入密码"/>
</div>

下拉框

<div class="om-select">
    <select>
        <option value="">--选择姓名--</option>
        <option value="刘德华">刘德华</option>
        <option value="周杰伦">周杰伦</option>
        <option value="林俊杰">林俊杰</option>
    </select>
</div>

带label下拉框

<div class="om-select om-select-label">
    <label for="#">姓名</label>
    <select>
        <option value="刘德华">刘德华</option>
        <option value="周杰伦">周杰伦</option>
        <option value="林俊杰">林俊杰</option>
    </select>
</div>

下拉框组

<div class="om-select-group om-select-label">
    <label for="#">日期</label>
    <div class="om-select">
        <select>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
        </select>
    </div>
    <div class="om-select">
        <select>
            <option value="05">05</option>
            <option value="06">06</option>
        </select>
    </div>
    <div class="om-select">
        <select>
            <option value="19">19</option>
            <option value="20">20</option>
        </select>
    </div>
</div>

选择框

<div class="om-checkbox">
    <input type="checkbox" id="checkbox1"/>
    <span class="om-checkbox-icon"><i class="iconfont icon-checkmark-full"></i></span>
    <label for="checkbox1">我同意服务条款</label>
</div>

单选框

<div class="om-radio">
    <input type="radio" name="radio" id="radio1" checked/>
    <span class="om-radio-icon"><i></i></span>
    <label for="radio1">我选择第一个</label>
</div>
<div class="om-radio">
    <input type="radio" name="radio" id="radio2"/>
    <span class="om-radio-icon"><i></i></span>
    <label for="radio2">我选择第二个</label>
</div>

7.图片

响应式图片 max-width:100%

<img src="img.jpg" class="om-img"/>

圆角图片

<img src="img2.jpg" class="om-img-radius"/>
<img src="img2.jpg" class="om-img-circle"/>

8.列表

普通列表

<ul class="om-list-box">
    <li class="om-list">列表一</li>
    <li class="om-list">列表一</li>
</ul>

跳转列表

<ul class="om-list-box om-list-link">
    <li class="om-list">列表二</li>
    <li class="om-list">列表二</li>
</ul>

双行列表

<ul class="om-list-box om-list-link">
    <li class="om-list">
        <div class="om-list-title">这里是文章列表的标题,超出会显示省略号</div>
        <div class="om-list-disc">这里是辅助文字描述,超出会显示省略号</div>
    </li>
</ul>

文章列表

<ul class="om-list-box om-list-article">
    <li class="om-list">
        <img src="../img/img/img2.jpg" class="om-list-img"/>
        <div class="om-list-title">这里是文章列表的标题,超出会显示省略号</div>
        <div class="om-list-disc">这里是辅助文字描述,超出会显示省略号</div>
    </li>
</ul>

文章列表带圆角图片

<ul class="om-list-box om-list-article">
    <li class="om-list">
        <img src="../img/img/img2.jpg" class="om-list-img om-img-circle"/>
        <div class="om-list-title">这里是文章列表的标题,超出会显示省略号</div>
        <div class="om-list-disc">这里是辅助文字描述,超出会显示省略号</div>
    </li>
</ul>

文章列表带大图

<ul class="om-list-box om-list-article">
    <li class="om-list om-list-big">
        <img src="../img/img/img.jpg" class="om-list-img"/>
        <div class="om-list-title">这里是文章列表的标题,超出会显示省略号</div>
        <div class="om-list-disc">这里是辅助文字描述,超出会显示省略号</div>
    </li>
</ul>

9.表格

<table class="om-table">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
        <td>男</td>
    </tr>
</table>

10.搜索框

<div class="om-search om-search-default">
    <span class="om-search-icon"><i class="iconfont icon-search"></i></span>
    <input type="text" class="om-search-input" placeholder="搜索关键词"/>
    <span class="om-search-close"><i class="iconfont icon-close-full"></i></span>
    <a href="javascript:;" class="om-search-btn">搜索</a>
</div>

11.加载中

页面加载

<div class="om-load-mark">
    <div class="om-loading">
        <div class="om-loading-line om-loading-line-0"></div>
        <div class="om-loading-line om-loading-line-1"></div>
        <div class="om-loading-line om-loading-line-2"></div>
        <div class="om-loading-line om-loading-line-3"></div>
        <div class="om-loading-line om-loading-line-4"></div>
        <div class="om-loading-line om-loading-line-5"></div>
        <div class="om-loading-line om-loading-line-6"></div>
        <div class="om-loading-line om-loading-line-7"></div>
        <div class="om-loading-line om-loading-line-8"></div>
        <div class="om-loading-line om-loading-line-9"></div>
        <div class="om-loading-line om-loading-line-10"></div>
        <div class="om-loading-line om-loading-line-11"></div>
    </div>
    <div class="om-load-content">正在加载</div>
</div>

列表加载

<div class="om-list-load">
    <div class="om-list-loading"></div>
    正在加载...
</div>

三、JS组件

1.弹窗

确认取消框

<button class="om-btn-b om-btn-default" onclick="om.popupConfirm()">弹出确认框</button>

<div class="om-popup" id="sure">
    <div class="om-popup-title">温馨提示</div>
    <div class="om-popup-cont">确定要执行此操作吗?</div>
    <div class="om-popup-btn-div om-popup-btn-two">
        <a href="javascript:;" class="om-popup-btn-cancel">取 消</a>
        <a href="javascript:;" class="om-popup-btn-sure">确 定</a>
    </div>
</div>

/*js*/
om.popupConfirm({
	elem:'.om-popup',                            //默认弹框元素
	sure: function(){console.log("执行确定")},    //执行确定方法
    cancel: function(){console.log("执行取消")},  //执行取消方法
})

提示弹框

<button class="om-btn-b om-btn-default" onclick="om.popup({elem:'#tips'})">弹出提示框</button>

<div class="om-popup" id="tips">
    <div class="om-popup-title">温馨提示</div>
    <div class="om-popup-cont">已经执行完毕</div>
    <div class="om-popup-btn-div">
        <a href="javascript:;" class="om-popup-btn-sure">确 定</a>
    </div>
</div>

/*js*/
om.popup({
	elem:'.om-popup',                          //默认弹框元素
	sure:function(){console.log("执行确定")},  	//执行确定方法
})

2.菜单actionsheet

<button class="om-btn-b om-btn-default" onclick="om.actionsheet()">actionsheet</button>

<div class="om-actionsheet">
    <ul class="om-actionsheet-cnt">
        <li class="om-actionsheet-header">分享到其他平台</li>
        <li>朋友圈</li>
        <li>qq好友</li>
        <li>新浪微博</li>
    </ul>
    <a href="#" class="om-actionsheet-cancel">取 消</a>
</div>

3.浮层提示框

<button class="om-btn-b om-btn-default" onclick="om.poptips('这是顶部提示','top')">顶部提示</button>
<button class="om-btn-b om-btn-default" onclick="om.poptips('这是底部提示')">底部提示</button>

<div class="om-poptips-top">这里是顶部提示</div>
<div class="om-poptips-btm">这里是底部提示</div>

/*js*/
om.poptips(tips,offset);
@param tips 提示语(非必填) 默认“提示”
@param offset 提示位置(非必填),默认bottom(可选top,bottom)

4.选项卡

<div class="om-tab">
	<ul class="om-tab-nav">
        <li class="om-tab-active">新闻</li>
        <li>娱乐</li>
        <li>财经</li>
    </ul>
    <ul class="om-tab-cnt">
        <li class="om-tab-active">新闻内容</li>
        <li>娱乐内容</li>
        <li>财经内容</li>
    </ul>
</div>

<script>
	om.tab();
</script>

/*js*/
om.tab(elem);
@param elem 选项卡元素(非必填) 默认.om-tab 

5.侧边栏

<button class="om-btn-b om-btn-default" onclick="om.sidebar()">左侧边栏</button>
<button class="om-btn-b om-btn-default" onclick="om.sidebar('right')">右侧边栏</button>

<div class="om-sidebar om-sidebar-left">
    <div class="om-sidebar-cnt">
        <ul class="om-list-box">
            <li class="om-list">个人中心</li>
            ...
        </ul>
    </div>
</div>
<div class="om-sidebar om-sidebar-right">
    <div class="om-sidebar-cnt">
        <ul class="om-list-box">
            <li class="om-list">个人中心</li>
            ...
        </ul>
    </div>
</div>

/*js*/
om.sidebar(option)
@param option 方向(非必填) 默认left (可选left,right)

6.轮播图

<div class="om-slider-wrap">
    <ul>
        <li class="om-slider">
            <img src="../img/img/1.jpg" />
        </li>
        <li class="om-slider">
            <img src="../img/img/2.jpg" />
        </li>
        <li class="om-slider">
            <img src="../img/img/3.jpg" />
        </li>
    </ul>
</div>

/*js*/
om.slider({
    elem: '.om-slider-wrap',
    loop: true,
    autoPlay:true,
	autoTime:5000,
    speed: 300,
    pagination:true,
    title:true
})
@param loop 是否循环
@param autoPlay 是否自动播放
@param autoTime 自动轮播时间间隔
@param speed 动画过渡时间
@param pagination 是否显示状态点
@param title 是否显示标题