Angular——提示气泡框

前端之家收集整理的这篇文章主要介绍了Angular——提示气泡框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

正文

  近小菜终于进入了界面优化阶段,测试组最近给小菜提了一个小需求——不会使用操作页面,刚开始的时候收到此需求有点小蒙圈,不会使看文档呀,这显然是从开发者的角度回答问题,但是从用户的角度考虑问题,我肯定愿意使用一个自己会使的软件,那用户不使用怎么办呢?
  办法总比问题多,美女组长说给页面提示信息,开始做的只是简单提示了一下该页面的作用,细节没有进行提示,然后让一个不懂此页面的人来用它,他说还是不会使,他说给这些按钮、输入框来个提示就好了,于是乎我们就给页面的按钮以及表格加了提示信息,帮助用户能更容易使用我们的页面!所以今天小菜就来分享一下如何给button按钮和表格加提示气泡!
  所以今天小菜今天就来分享一下如何给button按钮和表格加提示气泡!


◆表格提示气泡

  其实我们最初的表格没想过要加任何文字,是用颜色区别表格的使用状态,已使用的表格至灰并让它不可再点击,可是不可点击用 display和disable未能实现我们想要的效果,后来我们才想出来用“提示信息”来告知用户哪些可用哪些不可用
  我们做的表格提示信息使用的是td的title属性,在后台根据特定的条件下获取td的id给出特定的提示信息,示例如下:
1.前台

<td@H_301_50@ id@H_301_50@="queryTd"@H_301_50@>@H_301_50@</td@H_301_50@>@H_301_50@

2.后台

//先使用getElementById获取表格id,然后根据获取到的id设置其title属性
document.getElementById@H_301_50@(queryTd).title@H_301_50@ = @H_404_70@"已占用"@H_301_50@;@H_301_50@

3.效果


◆button提示气泡

  button按钮的提示气泡主要使用的是button的tip属性来实现,就是当你把鼠标移到button按钮上就会弹出提示气泡给你提示信息。这个实现是我们在网上搜的,其实现主要是写CSS样式,下边我分享一下我参考的链接以及主要的代码
1.参考链接

HTML tip实现

2.代码
  PS:此处需要说明的是因为我们项目的为了统一风格button按钮等都是封装好的,所以我们这里的button按钮的class属性只能设置成“btn btn-primary”,否则样式就乱了

HTML

<!--在HTML中使用“data-tip”设置具体的提示信息-->@H_301_50@
<button@H_301_50@ type@H_301_50@="button"@H_301_50@ class@H_301_50@="btn btn-primary"@H_301_50@ data-tip@H_301_50@="跳转到合成上课班页面"@H_301_50@ style@H_301_50@="margin-left:10px;float:right;display:inline;"@H_301_50@>@H_301_50@
<span@H_301_50@ aria-hidden@H_301_50@="true"@H_301_50@>@H_301_50@</span@H_301_50@>@H_301_50@上一步</button@H_301_50@>@H_301_50@

CSS 样式

.btn-primary@H_301_50@{ position@H_301_50@: relative@H_301_50@@H_301_50@; display@H_301_50@: block@H_301_50@@H_301_50@; cursor@H_301_50@: pointer@H_301_50@@H_301_50@; }@H_301_50@@H_301_50@

  /*伪元素after*/@H_301_50@
 .btn-primary@H_301_50@::after@H_301_50@ { content@H_301_50@: attr(data-tip)@H_301_50@@H_301_50@@H_301_50@; display@H_301_50@: none@H_301_50@@H_301_50@; position@H_301_50@: absolute@H_301_50@@H_301_50@; padding@H_301_50@: 5@H_301_50@px 10@H_301_50@px@H_301_50@@H_301_50@; left@H_301_50@: 50@H_301_50@%@H_301_50@@H_301_50@; bottom@H_301_50@: 100@H_301_50@%@H_301_50@@H_301_50@; margin-bottom@H_301_50@: 12@H_301_50@px@H_301_50@@H_301_50@; transform@H_301_50@: translateX(-50@H_301_50@%)@H_301_50@@H_301_50@@H_301_50@; font-size@H_301_50@: 16@H_301_50@px@H_301_50@@H_301_50@; background@H_301_50@: #000@H_301_50@@H_301_50@@H_301_50@; color@H_301_50@: #fff@H_301_50@@H_301_50@@H_301_50@; cursor@H_301_50@: default@H_301_50@@H_301_50@; }@H_301_50@@H_301_50@

/*伪元素before*/@H_301_50@
.btn-primary@H_301_50@::before@H_301_50@ { content@H_301_50@: @H_404_70@" "@H_301_50@@H_301_50@@H_301_50@; position@H_301_50@: absolute@H_301_50@@H_301_50@; display@H_301_50@: none@H_301_50@@H_301_50@; left@H_301_50@: 50@H_301_50@%@H_301_50@@H_301_50@; bottom@H_301_50@: 100@H_301_50@%@H_301_50@@H_301_50@; transform@H_301_50@: translateX(-50@H_301_50@%)@H_301_50@@H_301_50@@H_301_50@; margin-bottom@H_301_50@: 3@H_301_50@px@H_301_50@@H_301_50@; width@H_301_50@: 0@H_301_50@@H_301_50@@H_301_50@; height@H_301_50@: 0@H_301_50@@H_301_50@@H_301_50@; border-left@H_301_50@: 6@H_301_50@px solid transparent@H_301_50@@H_301_50@; border-right@H_301_50@: 6@H_301_50@px solid transparent@H_301_50@@H_301_50@; border-top@H_301_50@: 9@H_301_50@px solid #000@H_301_50@@H_301_50@@H_301_50@; }@H_301_50@@H_301_50@
.btn-primary@H_301_50@:hover@H_301_50@::after@H_301_50@,.btn-primary@H_301_50@:hover@H_301_50@::before@H_301_50@ { display@H_301_50@: block@H_301_50@@H_301_50@; }@H_301_50@@H_301_50@

3.效果



小结

  小菜今天的分享就到这里,借助“提示信息”帮助用户更方便的使用操作界面很方便,提示信息是因为让表格的不可用没有达到我们想要的效果,如果有哪位伙伴知道如何设置表格的可用不可用欢迎在评论区留言!

猜你在找的Angularjs相关文章