HUI
HUI
杨林伟
像火箭科学家一样思考!
展开
-
31HUI - 滚动公告组件(hui-scroll-news)
效果图dom 结构<div class="hui-scroll-news"> <div class="hui-scroll-news-items">滚动项目</div> <div class="hui-scroll-news-items">滚动项目.....</div></div>使用 hui.sc...原创 2019-04-16 17:55:05 · 608 阅读 · 0 评论 -
30HUI - 倒计时组件(hui.countdown)
效果图hui.countdown = function(timer, domId, showType)函数说明功能:在指定的dom内产生一个倒计时组件参数:1、到期时间,格式 xxxx-xx-xx hh:ii:ss2、dom元素id3、组件展示类型 [ 1 : x天x时x分x秒,2 : x时x分x秒,3 : x❌x 4 : ii:ss ]演示代码<!DOCTYPE html...原创 2019-04-16 17:52:39 · 498 阅读 · 0 评论 -
29HUI - 图标及九宫格(hui-speed-dial-icons)
效果图九宫格布局dom结构<div class="hui-speed-dial"> <ul> <li> <div class="hui-speed-dial-icons"> <span class="hui-icons hui-icons-action-sheet"&g...原创 2019-04-16 17:50:03 · 1068 阅读 · 0 评论 -
28HUI - DatePicker(hui.datePicker())
效果图HUI Date Picker 基于html5 的date组件,会调用手机系统的时间控件(不同手机展示效果不同,实现目的是一样的)。使用方法<input type="month|year|time" class="hui-button hui-button-large hui-date-picker" placeholder="请选择月份" />使用 js 统一修正p...原创 2019-04-16 17:46:27 · 737 阅读 · 0 评论 -
27HUI - picker(huiPicker)
效果图使用方法1、引用 hui-picker.js2、创建触发dom元素,例如<button type="button" class="hui-button hui-button-large" id="btn1">选择时间</button>3、获取picker对象,如:var picker = new huiPicker(’#picker’, functio...原创 2019-04-16 17:44:10 · 846 阅读 · 0 评论 -
26HUI - 上拉加载(hui-refresh)
效果图hui.loadMore(func,title, loading)功能 : 开启上拉加载功能参数 :1、func 加载更多数据对应的函数;2、title [ 可省参数 ] 默认值 [ 上拉加载更多 ],修改此参数可以改变上拉加载更多的提示内容;3、loading [ 可省参数 ] 默认值 [ <div class=“hui-loading”… ],修改此参数可以改变loa...原创 2019-04-16 17:40:22 · 685 阅读 · 1 评论 -
25HUI - 下拉刷新(hui-loading-wrap)
HUI 下拉刷新说明需要引用 hui-refresh-load-more.js<script src="js/hui-refresh-load-more.js" type="text/javascript" charset="utf-8"></script>核心函数 hui.refresh(’#refreshContainer’, refresh, icon1, ...原创 2019-04-16 17:37:55 · 491 阅读 · 0 评论 -
24HUI - 图片懒加载(hui-lazy)
效果图示例代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>HUI&...原创 2019-04-16 17:34:56 · 486 阅读 · 0 评论 -
23HUI - 分段切换(hui-segment)
效果图DOM结构<div style="padding:20px;"> <div class="hui-segment"> <a href="javascript:changeDom(1);" class="hui-segment-active">新闻</a> <a href="javascript...原创 2019-04-16 17:33:05 · 544 阅读 · 0 评论 -
22HUI - 轮播组件(hui-swipe)
效果图DOM 结构<div style="padding:10px;"> <div class="hui-swipe" id="swipe"> <div class="hui-swipe-items"> <div class="hui-swipe-item">轮播项目</div> ...原创 2019-04-16 17:30:20 · 634 阅读 · 0 评论 -
20HUI - 折叠面板(hui-accordion)
效果图DOM 结构<div class="hui-accordion"> <div class="hui-accordion-title">标题</div> <div class="hui-accordion-content"> 内容... </div></div>完整代码...原创 2019-04-16 17:23:44 · 564 阅读 · 0 评论 -
20HUI - 标签组件(hui-tags)
效果图dom结构<div class="hui-tags"> <div>运营</div> <div>设计</div> <div>前端</div> <div>平面</div></div>使用 hui.tags(domId, callbac...原创 2019-04-16 17:21:26 · 575 阅读 · 0 评论 -
19HUI - 分页页码(javascript :hui.toast)
效果图dom 结构<div class="hui-pager hui-pager-center" style="padding:10px 30px;"> <div><a href="javascript:hui.toast('第11页');">11</a></div> <div><a href="javas...原创 2019-04-16 17:16:43 · 774 阅读 · 0 评论 -
18HUI - popoverMsg(hui('#btn1').popoverMsg)
效果图使用说明需要引用 hui-popover-msg.jshui(单一元素选择器).popoverMsg(directionX, directionY, msg, width, height, addSets)参数 :directionX 消息横向的展示方向,可选参数,默认 left, 在指定元素右侧展示 可以取值 left 或者 right。directionX 消息竖向的展示...原创 2019-04-16 17:13:58 · 410 阅读 · 0 评论 -
17HUI - 进度条(hui-progress)
效果图示例代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>HUI&...原创 2019-04-16 17:11:09 · 555 阅读 · 0 评论 -
16HUI - 多功能菜单(hui.actionSheet)
效果图核心函数hui.actionSheet(meuns, cancel, callback)功能:弹出一个多功能菜单参数:1、数组形式的菜单2、取消按钮名称3、点击对应菜单后执行的回调函数代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="vi...原创 2019-04-16 17:09:25 · 595 阅读 · 0 评论 -
15HUI - Loading动画(hui.loading)
效果图hui.loading(msg)功能:展示一个居中的Loading效果,使用hui.closeLoading()函数可以关闭它。参数:1、msg 加载提示文本2、是否关闭返回:无huibase.closeLoading()功能:关闭loading动画参数:无返回:无示例代码<!DOCTYPE html><html><head>...原创 2019-04-16 17:07:14 · 503 阅读 · 0 评论 -
14HUI - 全屏消息(hui.blackMask)
效果图代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>HUI<...原创 2019-04-16 17:04:33 · 480 阅读 · 0 评论 -
13HUI - 模态对话框(hui.alert、hui.confirm)
效果图hui.alert(msg, buttonName, callback) 警告框功能:弹出警告窗口参数:1、消息内容;2、按钮名称,可省参数,默认 “确认”;3、点击按钮后的回调函数,可选参数;hui.alerthui.alerthui.confirm(msg, buttonNames, callback) 确认对话框功能:弹出确认对话窗口参数:1、消息内容;2、[数...原创 2019-04-16 17:01:39 · 2027 阅读 · 0 评论 -
12HUI - Toast提示框(hui.toast)
效果图hui.toast(msg, timer) 自动消失的提示框功能:弹出自动消失的提示框参数:1、msg 消息内容;2、消息时长,可省参数,默认: short 短,可以使用 long 代表较长时间;返回值:无hui.iconToast(msg, icon)功能:弹出自动消失的、带有图标的提示框参数:1、msg 消息内容;2、消息图标,可省参数,默认: success,可...原创 2019-04-16 16:57:08 · 1101 阅读 · 0 评论 -
11HUI - 数字标识(hui-badge)
效果图示例代码<div class="hui-wrap"> <div class="hui-common-title" style="margin-top:15px;"> <div class="hui-common-title-line"></div> <div class="hui-common...原创 2019-04-16 16:54:10 · 427 阅读 · 0 评论 -
10HUI - 按钮(hui-button)
示例图片普通按钮<button type="button" class="hui-button">普通按钮</button>Loading按钮点击按钮后出现Loading动画,并能够对提交中进行判断,避免重复提交。dom 结构和普通按钮一样,使用js来控制Loading效果:<button type="button" class="hui-button"...原创 2019-04-16 16:50:23 · 932 阅读 · 0 评论 -
09HUI - 图片列表(hui-img-list-content)
示例图片DOM结构<div class="hui-img-list"> <ul> <li> <a href="javascript:hui.toast('hi...');"> <img src="" /> <div ...原创 2019-04-16 16:38:45 · 482 阅读 · 0 评论 -
08HUI - 媒体列表(hui-media-list-img)
dom结构div class="hui-media-list" style="padding:10px;"> <ul> <li> <a href=""> <div class="hui-media-list-img"><img src="" />&l...原创 2019-04-16 16:30:50 · 460 阅读 · 0 评论 -
07HUI - 普通列表(hui-list)
效果图代码 <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>HUI 列...原创 2019-04-16 16:27:04 · 569 阅读 · 0 评论 -
06HUI - 底部导航及新消息提示组件(hui-footer-icons)
效果图底部导航dom结构<div id="hui-footer"> <a href="javascript:hui.toast('首页');" id="nav-home"> <div class="hui-footer-icons hui-icons-home"></div> <div class=...原创 2019-04-16 16:20:43 · 1011 阅读 · 0 评论 -
05HUI - 头部导航及菜单(hui-header)
HUI 通过 .hui-header 样式完成头部布局:<header class="hui-header"> <div id="hui-back"></div> <h1>这里是标题</h1> <div id="hui-header-menu"></div></header>...原创 2019-04-16 16:16:08 · 890 阅读 · 0 评论 -
04HUI -基础布局(hui-wrap、hui-flex)
基础布局(flex布局)代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title&...原创 2019-04-16 16:11:09 · 672 阅读 · 0 评论 -
03HUI -基础文本(hui-common-title)
示例图片代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>HUI&l...原创 2019-04-16 16:08:56 · 432 阅读 · 0 评论 -
02HUI - 部署及文档结构
HUI 目录结构下载hui最新版本后会获得一个压缩包,解压后目录结构:|_ css //样式目录 |_ fonts //核心字体文件 |_ hui.css //核心css文件 |_ js //js脚本目录 |_ hui.js //核心js |_ hui-form.js //表单布局及表单验证 |_ hui-touch-pws.js //h5手势密码 ...原创 2019-04-16 15:43:02 · 457 阅读 · 0 评论 -
01HUI -HUI介绍
介绍HUI 是最好的移动端UI框架,适用于基于H5+的移动app开发及移动web开发。优点免费、开源、易扩展HUI 免费、开源,遵循Apache2开源协议。同时提供了非常便捷的插件接口您可以随时对它进行扩展。更小、更快、灵活的dom操作HUI 用最少的代码去实现每一个模块,核心css文(未件压缩)26k、核心js文件(未压缩)26k。同时HUI 提供灵活的选择器及dom操作方法来完成复...原创 2019-04-16 15:36:00 · 759 阅读 · 0 评论