HTML5 APP开发之Button按钮

之前介绍了Input输入框,在HTML5 APP开发下的各种形状是怎样的。那么,对于同样重要的控件:Button按钮,又有怎样的形状,以及使用Button按钮时,又应该注意哪些事项呢。

下面将逐一介绍:

0 HTML5 APP开发之Input输入框

工具/原料

HBuilder6.6

MUI2.5

方法/步骤

有边框,但背景是透明色的Button按钮控件。

代码如下:

<button class="mui-btn mui-btn-block mui-btn-outlined">Button按钮</button>

在APP开发中,算是常见的用法。但出来的效果不太美观,感觉有点空。

HTML5 APP开发之Button按钮

有边框,有背景色的Button按钮控件。

代码如下:

<button class="mui-btn mui-btn-block">Button按钮</button>

这是最常见的用法。当然,按钮的背景色,不仅仅可以是白色,也可以是其它的颜色,通过添加新的样式,例:mui-btn-primary 、mui-btn-negative等,便会出现不同的背景色。

HTML5 APP开发之Button按钮

掌握了Button按钮控件的基本开发后。事实上,还得注意如下的内容:

首先是Button按钮按下和移开的效果。在APP里,如果没有这样的效果,很容易让别人误会点击了没有反应。这样的APP出来的体验效果,就很差。

下面是点击之前 和 点击的效果 (点击之后的效果和点击之前的效果是一样的),对应的代码如下:<button class="mui-btn mui-btn-negative mui-btn-block mui-btn-outlined">Button按钮</button>

HTML5 APP开发之Button按钮

HTML5 APP开发之Button按钮

接着我们看看Button按钮点击的事件代码应该如何编写。

HTML5 APP开发之Button按钮

然后,当Button按钮点击响应的时间过长时,得有一个提示消息,以便告之用户事件正在处理中,请稍等。

代码如下:

HTML5 APP开发之Button按钮

最后,想说的是Button按钮经常出现在BODY里,但也可以在头部菜单里。

效果如下:(如何创建头部菜单,见其它的经验)

0 HTML5 APP开发之头部菜单

HTML5 APP开发之Button按钮

相关文章

  1. hbuilder app开发之列表

    列表,是HTML开发的常见功能.对于HTML5 APP开发而言,列表的重要性,就更加突出了.那么,列表在HTML5 APP开发中的形状有多少种呢.以及列表在APP下,又是如何实现分页处理的呢. 下面将逐一介绍(想了解hbuilder app开发Input功能,hbuilder app开发 Butto ...

  2. web app开发中 iPhone.iPad默认按钮样式问题

    工具/原料 html5 css3 iphone手机 Android手机 iPhone.iPad默认按钮样式问题 解决方法给按钮元素添加一个-webkit-appearance: none;具体代码 input[type="button"], input[type="su ...

  3. Html5实现音频的播放

    如何用html5实现音频的播放?主要用到哪些标签? 工具/原料 Intellij IDEA 方法/步骤 首先,下载html5开发软件Intellij IDEA,这个直接在百度搜索框中搜索即可. 打开软件,点击file,选择New project,在弹出的对话框中,选择static web选项中的ht ...

  4. MUI框架 页面dom规则

    最接近原生APP体验的高性能前端框架,关于如何使用MUI框架来布局,你需要遵循如下规则 0 HTML5 APP开发MUI框架教程--创建移动APP 工具/原料 HBuilder Mui v3.1.0 方法/步骤 [固定栏靠前] 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定 ...

  5. WebApp开发技巧大全 看了就明白了

    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备).开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览器运行的WebAp ...

  6. html5移动app开发教程

    html5移动app开发教程,其实如果借助好的工具,html5 app的开发可以轻松实现,下面来听听讲解. 工具/原料 开发html5 app所需要用到的素材,包括图片.文案.音乐等等. 方法/步骤 进入创作后台,点击顶部的制作栏目,进入模板选择页面 1.选择空模板,自由创作: 2.选择主题模板,更 ...

  7. html5实现视频播放功能

    html5支持三种视频格式:Ogg,mp4,WebM,主要用到了video标签 工具/原料 Intellij IDEA 方法/步骤 首先,下载html5开发软件Intellij IDEA,这个直接在百度搜索框中搜索即可. 打开软件,点击file,选择New project,在弹出的对话框中,选择st ...

  8. HTML5 APP开发之创建APP项目

    越来越多的人开始使用HTML5来开发APP软件.因为HTML5掌握的成本低,主要的是IOS和安桌操作系统下,都可以运行,节省了开发成本. 那么,应该如何创建一个HTML5 APP项目呢.请按如下步骤,将可轻松实现. 方法/步骤 打开HBuilder软件,点击"文件"-" ...

  9. HTML5 svg和CSS3炫酷鼠标点击按钮特效制作方法

    这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮触摸特效. 请注意这些效果需要在支持这些CSS属性的现代浏览器中才有效果,IE10不支持在伪元素上使 ...