H-ui前端框架官方网站 - 专注前端解决方案
H-ui 前端框架
架起设计与后端的桥梁
轻量级前端框架，简单免费，兼容性好，服务中国网站。
官方QQ群：群5：(满)群4：群3：群2：群1：（满）
致亲爱的H-ui用户：
感谢您一年来对H-ui的支持和包容。为了更好的服务大家，在2017新年来临之际，我们全新发布了3.0版本。新版的发布离不开广大用户给出的建议和意见。3.0版本在原先2.x系列基础上做了很多的优化调整，完善了更多demo，整合了更多优秀插件；去掉了一些不是很好的插件；优化了框架的体积。
H-ui是一个相对成长比较慢的前端框架，相比目前行业众多框架还有很多不足。但初心不改，实实在在把事做好，做用户最喜欢的框架。更好为中小企业服务。之前，很多用户反馈文档不全，不完整等问题，我们也一直没有时间去继续整理完善，在此说声抱歉。2017开始，我们会重新书写、完善文档，让用户使用起来更省心。
祝大家，鸡年大吉！一路（16）有（U）你，一起（17）前行！
最新更新日志
v3.0版更新日志
【整合】更多优秀插件
【优化】框架的体积
【完善】demo
v2.2.1版更新日志
【解决】IE 下兼容问题，需要单独引入H-ui.ie.css
&!--[if lt IE 9]&
&link href=&static/h-ui/css/H-ui.ie.css& rel=&stylesheet& type=&text/css& /&
&![endif]--&
v2.1.9版更新日志
【解决】一些兼容bug。
v2.1.8版更新日志
v2.1.7版更新日志
v2.1.6版更新日志
v2.1.5版更新日志
v2.1.4版更新日志
【修改】 将从原来的unslider改为jquery.SuperSlide插件
 H-ui 和H-ui.amin 有什么区别，一样吗？
问这个问题的朋友很多，在这里郑重解释下：H-ui是前端框架，H-ui.amin是利用H-ui开发的后台模板，可以理解为是H-ui的一个demo。他俩之间是工具与产品之间的关系，可以理解为我用了一把普通锤子造了另一把羊角锤子。
两个zip包，相同的文件名其实是一样的文件，项目中只需保留一份即可，没必要两个都下载然后揉到一块，多份重复引用。
我们会开发更多的模板，如：H-ui.qiye
企业网站模板，H-ui.shop 电商模板 等等。请拭目以待！
 H-ui和bootstrop一样吗？可以一块用吗？
H-ui是参考bootstrop而全新开发的一套框架，借鉴和引用了bootstrop比较好的东西，另外加入了自己的创新。CSS有60%的命名是相同的，CSS不同于其他编程语言，最忌讳混用，相同的命名肯定会有冲突，同时也造成大量的代码冗余。H-ui目前也没有在加入自己的命名空间，所以暂时不建议混合使用。（偷懒的人才会混合使用，大神都原生开发）。
 H-ui支持移动端吗？
H-ui是一套侧重PC端的前端框架，当然也针对不同分辨率的屏幕做了响应式处理，做个简单的营销页面，企业网站、宣传单页当然没有问题。但是我们知道PC和移动端的交互、事件、场景过渡完全是两个完全不同的概念。
PC端的事件有：click（点击）、dbclick、mousemove、mouseover、mouseout、load等
而移动端采用的是：tap（敲击）、taphold（长按）、swipe|swipeleft|swiperight（滑动）、scrollstart|scrollstop（滚动）、pageload（加载）等
当然，jquery也不适用在移动端、移动端通常使用zepto.js。非要用一套实现的话，那我也没有办法。
 H-ui框架是万能的吗？
很多用户一上来就问H-ui能不能做这个，能不能做那个，其实他问的大多都是跟业务相关的东西。框架只是个工具，有了工具不代表不用动手就有了产品，业务相关的代码肯定还得自己来写，如果什么都想捡现成的话，那老板干嘛还花高薪养着你呢？所以心中有这种念头的人你对得起老板发的工资吗？
 H-ui什么时候兼容IE6和IE7？
很多用户在QQ群里问我，H-ui什么时候兼容IE6和IE7？这点可能要让小伙伴们失望了。具统计，低版本的浏览器用户应该不到10%，可能更低，而且还在逐年下降。
另一个造成兼容问题的重要原因是，语言级的版本更新了，HTML5、CSS3都已经普及化，新增加的很多特性与IE低版本的浏览器存在一个很大的时差，是一个历史的问题。我们不能让技术倒退，所以我们要摒弃过时的东西，倒逼陈旧向新的方向过渡，推动技术的车轮向前滚动，这才符合进化论，符合优胜劣汰这一生存法则！
只有抛弃陈旧的东西，才能迎合新一代人的审美和品质需求，才能建立自己的品牌基础！
本表中列出的是WEB设计、开发中常用安全色。列于此是为了方便大家参考。
买就送企业邮箱，送建站宝盒，免费预装网站系统，免费智能建站。
LESS为CSS赋予了动态语言的特性，如变量、继承、运算、函数。可以在客户端上运行 (支持IE 6+、Webkit、Firefox)，也可借助Node.js或者Rhino在服务端运行。
Grunt是基于Node.js的项目构建工具。自动运行你所设定的任务。拥有数量庞大的插件。
消息框、iframe层、ajax加载弹出、弹出相册等
常见的Bug兼容性解决方案。
前端经验汇总
免费、可订制、基于阿里云
精挑细选，包含建站，开发，资源，素材等类别，不带任何商业目的，纯粹分享。
绝对实用。
HTML/JS转换工具 CSS代码格式化 字母大小写转换 简繁体字、火星文转换
背景图片素材
前端开发，产品设计，程序开发
运营营销，项目管理
灵活，效果多。
触屏焦点图、触屏Tab切换、触屏多图切换
H-ui前端框架是基于的开源项目，它完全免费。
1、自由下载H-ui前端框架或提供下载H-ui前端框架；
2、完全免费的使用H-ui前端框架来开发自己的个人网站及商业站点。
3、您可以无任何限制的创建自己的风格。
在享受便利的同时，但也请尊重作者的著作权：
1、不得隐去注释声明，版权所属，如果您对H-ui进行修改并发布或出版请在发行版里包含原许可协议的声明。
2、不得以任何形式的声明拥有H-ui前端框架的版权。
3、不得镜像、盗用H-ui官方网站页面。Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。
gitHub地址：
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
官网地址：
SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。&通过SUI，可以非常方便的设计和实现精美的页面。
官网地址：
同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。
Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。
官网地址：
uiKit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。
官网地址：
H-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。
官网地址：
weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
官网地址：
Layui 诞生于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。
官网地址：
9.YDUI Touch
YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI;
官网地址：
阅读(...) 评论()HBuilder 入门(4) / 编写一个登录页面 - 持续改进 - ITeye技术网站
博客分类：
通过之前的介绍，我们应该对HTML5+ 有了一个较为直观的认识。但是正所谓“好记性不如烂笔头”，能够实际地做出一个页面才是最重要的。
接下来我们就来做一个最基本的页面：登录页面。
那我们先构思一下登录页面都需要什么内容：用户名，密码，登录按钮。如果你有一个得力的美工，我们还可以加上酷炫的美工设计。
HBuilder提供一组UI组件，请参看这里：。
对于一个熟悉web开发的人来说，上面的这些都太简单了，分分钟就可以搞定了。但是别忘了这是移动开发，与普通的浏览器应用还是有所不同。接下来我们来看看页面的布局应该怎么设计。
这里大家不要忘记一个原则，因为目前HTML5+ 的实现仅此一家(HBuilder)，所以我们在实现各种功能的时候，一定要遵循HBuilder官方推荐的方法。
接下来我们从一个index.html开始。
HBuilder默认生成的index.html里的meta部分，只有viewport一个属性：
&meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"&
其实这完全是不够的，我们还需要手动增加几个属性：
&meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"&
&meta name="apple-mobile-web-app-capable" content="yes"&
&meta name="apple-mobile-web-app-status-bar-style" content="black"&
其次，我们要引入 mui 需要的 css，以及相应的 javascript 文件。
&link rel="stylesheet" href="css/mui.min.css"&
&script src="js/mui.min.js"&&/script&
&script src="js/app.js"&&/script&
如果你想问如果不用 mui 和默认的 app.js 可以吗？答案是肯定的。但是，你可能会遇到很多意想不到的问题。所以，对于一个界面组件 mui 来说，个人如果你有强大的美工小伙伴，那么不用 mui 是完全可以的。但是 app.js ，还是最好用吧！
另外，按照官方的说法，尽量不要用 jquery等 js 类库，这会严重影响你的应用的速度。所以，请遵循官方的建议。其实在移动端现代浏览器上， jquery 也真的是可有可无了。
至此，HTML 的 head 部分就结束了。接着我们开始写body部分了。
按照官方的说法，页面中所有的内容都应该放入一个 div 中，并且这个 div 的class 应该是 "mui-content" --- 当然，这是你使用 mui 的时候。这里我们暂定会使用 mui 。
按照一般的方式，我们都会在窗口的底部加一个 copyright 之类的文字。按照标准的说法，我们需要有一个class="mui-bar mui-bar-tab" 的 div，而且要注意：这个 mui-bar DIV 一定要放到 mui-content 之上。总之，最后的代码应该是这个样子：
&div class="mui-bar mui-bar-tab" style="height:20line-height:20font-size:10text-align:"&
这是底部信息
&div class="mui-content"&
上面的 mui-bar 里，又额外加了一些样式，用于控制高度，大家可以根据需要自行订制。
接下来，我们来放入一些 mui 的组件：输入框
&div class="mui-content-padded" style="margin: 5"&
&form class="mui-input-group"&
&div class="mui-input-row"&
&label&用户名&/label&
&input type="text" id="username" placeholder="用户名"&
&div class="mui-input-row"&
&label&密码&/label&
&input type="password" id="userpassword" placeholder="密码"&
&div style="margin-top:20text-align:"&
&button class="mui-btn mui-btn-primary" id="loginBtn"&登录&/button&
&&&button class="mui-btn mui-btn-primary" id="regBtn"&注册&/button&
这里的输入框和button 按钮都是 mui 提供的组件。我使用了一些 margin 等属性控制了一下位置。个人觉得，输入框组件还好，按钮组件的样式就比较一般了。如果你有好的美工，还是自己打造好看的按钮比较好。
在 html 对象的命名上，也秉承了一贯的原则，用唯一的ID 来标示一个对象。总之，这个内容对于有web开发经验的人来说，没有什么特别的地方。
至于你想让输入框垂直居中，请自行查找“如何让 div 垂直居中”，解决方案是一样的。
接下来就是重头戏了，登录按钮如何与服务器进行交互？按照web开发的理解，有这么几种选择：
定义一个表单(form)，点击登录按钮的时候提交到后台。后台处理完毕后，显示新的页面给前端。
在登录按钮上绑定一个click方法。点击的时候，使用Ajax发送数据到后台，接受到数据后，前端页面更新。
对于一个手机应用，如果出现页面刷新，或者大白页这样的状态肯定是不好的体验。所以，在手机的HTML5开发中，我们绝对不会使用 form 提交这样的东西的。可以肯定的说：我们只用 Ajax。
按照官方的说法，尽量不要使用JQuery，同时，也不要使用 onclick 这样的方式，取而代之应该使用的是绑定一个事件：
document.getElementById("loginBtn").addEventListener('tap', function(){
处理内容；当然肯定是ajax 了。
这个事件的名字叫 ”tap“，也就是点击屏幕的事件。
那好学的同学肯定会问有多少个事件可以用啊？请参看这里：。这是mui 提供的一个特性--- 就这个特性来说，你很难不用 mui 这个组件，毕竟你自己再实现一个的话，又要费不少事。
那我们把这个事件的代码写在哪里好呢？最开始，还是最后边？都不是。
按照官方的说法，我们应该写在 mui 组件和页面组件全部加载完毕后 ---
就如同 JQuery一样，mui 也有一个 ready 的方法：
mui.init();
mui.plusReady(
function() {
这里写上刚才的事件绑定方法。
到了这里，画面的部分基本完事了，整个代码大概是这个样子：
&meta charset="utf-8"&
&title&测试&/title&
&meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"&
&meta name="apple-mobile-web-app-capable" content="yes"&
&meta name="apple-mobile-web-app-status-bar-style" content="black"&
&link rel="stylesheet" href="css/mui.min.css"&
&script src="js/mui.min.js"&&/script&
&script src="js/app.js"&&/script&
&div class="mui-bar mui-bar-tab" style="height:20line-height:20font-size:10text-align:"&
这是底部信息
&div class="mui-content-padded" style="margin: 5"&
&form class="mui-input-group"&
&div class="mui-input-row"&
&label&用户名&/label&
&input type="text" id="username" placeholder="用户名"&
&div class="mui-input-row"&
&label&密码&/label&
&input type="password" id="userpassword" placeholder="密码"&
&div style="margin-top:20text-align:"&
&button class="mui-btn mui-btn-primary" id="loginBtn"&登录&/button&
&&&button class="mui-btn mui-btn-primary" id="regBtn"&注册&/button&
mui.init();
mui.plusReady(
function() {
document.getElementById("loginBtn").addEventListener('tap', function(){
alert("点击了登录按钮");
这时，你可以把手机连接到电脑上，然后进行调试，就可以看到第一个登录的画面了。点击登录按钮，会弹出”点击了登录按钮“这个对话框。
对于mui，虽然你可以不使用mui 组件，但是一些基本的规则，例如 mui.init，mui.plusReady 这样的方法，还是要使用的。
另外，mui 的布局方案中没有垂直居中的方式（希望以后能增加上），虽然方式有很多，但是仍然推荐这个：
接下来，我们就要实现登录按钮通过ajax与后台进行交互。
由于这篇内容已经够多，将在下一篇里分享给大家。
浏览 18845
你这个项目是怎么创建的？我怎么创建的MUI project，里面根本没有app.js?你不能创建空项目，创建空项目的话就没有app.js
浏览: 405225 次
请教下，登录成功返回token后，这个token是自动登录的是 ...
写得通俗易懂。
您好，我的url的ip配置不会配啊，localhost肯定不对 ...
前台用的json解析，那dataType应该用json，而不是 ...
抱歉，博客没有提示有回复，所以直到今天才看到。。。。根据这些信 ...