AmazeUI
yongh701
这家伙很聪明,什么都没有留下
展开
-
【AmazeUI】底部导航栏与分享按钮
手机端页面的底部导航栏,仿照安卓、IOS等Apps应用底部导航栏的设计。许许多多的移动端页面前端框架都有这个组件。AmazeUI也不例外。还提供了分享到站外的分享按钮,组件,完全不用自己写。直接提供国内主流网站的分享,没有那些传说中的facebook之流,完全不用自己改,其效果如下:其代码如下:原创 2015-05-08 20:14:04 · 6357 阅读 · 1 评论 -
【AmazeUI】在模态框中嵌入表单,形成模态输入框
在《【AmazeUI】模态框》(点击打开链接)一文中,已经介绍过在AmazeUI这个手机版前端框架中,怎么使用模态框了,但是这篇文章提到的模态框只是那些单纯的模态框。如果要实现一个有表单,同时又有“提交”与“关闭”的按钮,要做出如下的效果,哪应该怎么实现呢?首先同样是HTML布局:原创 2015-05-22 19:17:36 · 7269 阅读 · 2 评论 -
【AmazeUI】底部导航条的改进
AmazeUI的底部导航条已经在《【AmazeUI】底部导航栏与分享按钮》(点击打开链接)中介绍过了。其实如果你的底部导航条中的导航过多,这个底部导航条还可以把后面的导航项隐藏起来。然后提供一个上拉工具的“更多”如果要实现这种效果,关键是在ul节点的属性中加入am-cf am-avg-sm-3这两个属性,如果不加,无论你的屏幕多窄,它都不隐藏选项,如果加上了,当设备的屏幕过小,原创 2015-06-19 16:40:00 · 2922 阅读 · 0 评论 -
【AmazeUI】模态框
本文与《【Ratchet】模态框》(点击打开链接)为姊妹篇,相比之下,AmazeUI的模态框,更加接近于一个alert(),不适合承载过多的内容,但是其优点就是可以通过JS操控,Ratchet仅能通过超级链接a标签打开。AmazeUI的模态框效果如下:完全就如同某些手机浏览器对alert()的处理。其现实代码如下:原创 2015-05-06 16:36:00 · 7787 阅读 · 1 评论 -
【AmazeUI】页脚
很多手机版的页脚处提供“手机版”与“电脑版”切换的页脚,然后再页脚处写上版权信息。AmazeUI直接就提供这种页脚组件,效果如下:但是这种组件还不能直接拿来用,在实际的测试之中,发现要补上一个margin-top:-50px,将其向上拉50px,样式才正常。这个就不知道为什么了。全代码代码如下:原创 2015-05-13 08:53:20 · 1612 阅读 · 0 评论 -
【AmazeUI】折叠式卡片布局,整合内容列表、表格组件
折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发异彩。AmazeUI也提供了折叠式卡片布局,虽然官网上有例子,但是这种折叠式卡片布局,整合内容列表、表格组件还是需要一番功夫。比如如下图,利用AmazeUI的折叠式卡片布局,整合其提供的内容列表与表格组件。整个页面的代码如下:原创 2015-05-12 10:40:23 · 6612 阅读 · 2 评论 -
【AmazeUI】各种的导航式菜单与解决方法
与Bootstrap一样,AmazeUI提供的导航式菜单也是喜欢蜷缩在右上角的一个按钮里面,然后一点击就向下拉开一大段距离。这样很不友好。此前《【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas》(点击打开链接)是一种解决方案,但是对于一些不使用页面的页面,这种方案则无能无力。对于此有如下的几种方案可以解决:一、改造AmazeUI提供的手机端文字横排原创 2015-05-12 11:14:16 · 14429 阅读 · 0 评论 -
【AmazeUI】图片轮播组件
这个组件在IE上一直很火,其实现可以参考《【JavaScript】原生态兼容IE6的图片轮播》(点击打开链接),AmazeUI同样在移动端提供这样的组件。其效果如下,这个结果要在谷歌、野狐禅等浏览器的手机端调试模式才能看到,在PC端会布局错乱。用户可以自由滑动,点击下方的圆点,选择自己要浏览的图片,当鼠标悬停在图片上,其组件则不会继续轮播图片。实现代码如下:原创 2015-05-04 20:22:17 · 4706 阅读 · 0 评论 -
【AmazeUI】AmazeUI的下载,配置与Helloworld
虽然这东西号称跨平台支持浏览器,但建议还是不要使用这个前端框架开发PC端的网页,因为这东西不支持IE8以下的浏览器。在PC上不兼容IE6的话,基本可以抛弃了。AmazeUI仅仅用来做移动端的网页还是不错的,其HTML5的特性等很符合手机浏览器的特点。不要妄想能写出一个网页同时兼容PC与手机,应该分开布局。君不见在很多手机版网页的底部有“手机版”与“电脑版”之分吗?1、这东西直接在AmazeUI原创 2015-05-04 10:49:12 · 2666 阅读 · 0 评论 -
【AmazeUI】卡片式布局
本文与《【Ratchet】卡片式布局》(点击打开链接)为姊妹篇,在AmazeUI的官网上没有这种布局,但是,我们可以利用其面板组的方式去实现。先贴上本网页所处的目录结构,同样地,在windows下的Web文件夹趴了几张图片做实验。当然,为了节省用户的流量与节省服务器的容量,实际的操作中不应该使用如此高清的图片。做出如下的效果:其现实的代码如下:原创 2015-05-04 20:08:14 · 4646 阅读 · 0 评论 -
【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas
顶部导航条如果你细心留意下现在的页面,实在是太常见了。这个组件在手机端的页面中,同样可以借助AmazeUI这个前端框架实现。与此同时,可以在导航栏的最右方加一个触发侧边导航栏offCanvas。不要再使用BootStrap那种,一旦点击就大幅度下拉的导航了,反正我个人觉得很蛋疼的。一个导航活活地占据了页面大量位置。这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的。原创 2015-05-08 19:58:29 · 5996 阅读 · 0 评论 -
【AmazeUI】AmazeUI的确定框与确定框的致命缺陷
在AmazeUI这个手机前端框架可以通过以下的脚本:function calculate(){ $('#confirm1').modal({ });}来触发在HTML已经如下布局的确定框: 确定框内容 确定 取消原创 2015-06-13 10:58:35 · 8679 阅读 · 2 评论