git初始代码https://github.com/chentianwei411/at-mentions-with-action-text

首先,开分支onboardingbar.

然后,

rails g scaffold Team user:references name
rails g migration AddTwitterToUsers twitter
rails db:migrate

在user.rb上添加

has_many :teams

在_navbar.html.erb上添加导航链接:

<li class="nav-item"><%= link_to "Teams", teams_path, class: "nav-link" %></li>

在用户注册app/views/devise/registrations/edit.html.erb上添加twitter field:

<div class="form-group">
<%= f.text_field :twitter, class: 'form-control', placeholder: 'Twitter Username' %>
</div>

在application_controller.rb上添加参数白名单:

  protected

    def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
devise_parameter_sanitizer.permit(:account_update, keys: [:name, :twitter])
end

添加OnboardingBar:

在app/views/home/index.html.erb

<% if user_signed_in? %>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%"></div>
</div> <%= current_user.twitter? %>
<%= current_user.teams.any? %>
<% end %>

下一步,user.rb添加方法来判断onboardingbar的进度:

  def onboarding_percent
steps = [:twitter?, :has_team?]
conplete = steps.select{ |step| send(step)}
complete.length / steps.length.to_f * 100
end def has_team?
teams.any?
end # select()方法,筛选返回值为true的数组项
# Ruby#send()方法,可以使用symbol符号方法
# 方法最后返回的值的计算必须使用浮点格式,不能是整数格式。使用to_f。

在views/home/index.html.erb,从bootstrap拷贝下来进度条代码,并修改

使用Bootstrap Bar来增加Onboarding Progress Bar功能。的更多相关文章

  1. WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)

    原文:WPF 4 开发Windows 7 任务栏(Overlay Icon.Thumbnail Toolbar.Progress Bar)      在上一篇我们介绍了如何在WPF 4 中开发Wind ...

  2. unity3d插件Daikon Forge GUI 中文教程5-高级控件listbox和progress bar的使用

    3.3.listbox列表框 Atlas 图集: 下面应用到的精灵都是在这里的. ListBox中的内容: 背景精灵 图片的主颜色 Padding边距 Scrollbar 滚动条对象的预制体或者对象, ...

  3. Circular progress bar in Unity 3D

    Circular progress bar in Unity 3D - UnityScripthttp://stackoverflow.com/questions/22662706/circular- ...

  4. Create a “% Complete” Progress Bar with JS Link in SharePoint 2013

    Create a “% Complete” Progress Bar with JS Link in SharePoint 2013 SharePoint 2013 has a lot new fea ...

  5. unity3d插件Daikon Forge GUI 中文教程-5-高级控件listbox和progress bar的使用

    (游戏蛮牛首发)大家好我是孙广东.官网提供了专业的视频教程http://www.daikonforge.com/dfgui/tutorials/,只是是在youtube上,要观看是须要FQ的. 只是教 ...

  6. C#控制台进度条(Programming Progress bar in C# Consle application)

    以下代码从Stack Overflow,觉得以后会用到就收藏一下,我是辛勤的搬运工,咿呀咿呀哟- 1.showing percentage in .net console application(在. ...

  7. 打印进度条——(progress bar才是专业的)

    # 打印进度条——(progress bar是专业的) import time for i in range(0,101,2): time.sleep(0.1) char_num = i//2 #打印 ...

  8. Python tqdm show progress bar

    tqdm can help to show a smart progress bar, and it is very easy to use, just wrap any iterable with  ...

  9. how to create a ring progress bar in web skills

    how to create a ring progress bar in web skills ring progress bar & circle progress bar canvas j ...

随机推荐

  1. FB面经 Prepare: K closest point to the origin

    Give n points on 2-D plane, find the K closest points to origin Based on bucket sort: package fbPrac ...

  2. 集合 set

    集合 集合属于可变数据类型,但它的内容必须是不可变数据类型. 特点:无序   ,  不重复 有两种创建方式: set({1,2,3})和 {1,2,3} set1 = set({1,2,3,4}) s ...

  3. css基础重点内容总结

    一.目录引入 ./同级(当前) ../上级目录  ../../上上级目录 二.标签种类: 1.块级标签(block):独占一行,宽高可设: 2.行内块标签(inline-block):不独占一行,宽高 ...

  4. HBase指定大量列集合的场景下并发拉取数据时卡住的问题排查

    最近遇到一例,HBase 指定大量列集合的场景下,并发拉取数据,应用卡住不响应的情形.记录一下. 问题背景 退款导出中,为了获取商品规格编码,需要从 HBase 表 T 里拉取对应的数据. T 对商品 ...

  5. python locust 性能测试:HttpSession

    官网解释:用于在请求之间执行Web请求和保留(会话)cookie的类(以便能够登录和退出网站):记录每个请求,以便locust可以显示统计信息: from locust import TaskSet, ...

  6. 在windows+eclipse+git遇到的未修改文件被标记为已修改的问题

    最近遇到2个具体的问题: 1.我们有个工程里面有几个外部jar包,这几个jar包经常会更新,更新的时候如果是在eclipse中执行的,由于windows文件机制,所以会报错无法覆盖这几个jar包.虽然 ...

  7. PHP的openssl加密

    PHP的openssl扩展 openssl扩展使用openssl加密扩展包,封装了多个用于加密解密相关的PHP函数,极大地方便了对数据的加密解密. 常用的函数有: 对称加密相关: string ope ...

  8. Serializable中的serialVersionUID

    有序列化,就必然有反序列化!比如在A端为UserLogin(见上一篇对象序列化)做了序列化,然后在B端进行反序列化. 首先需要,A端和B端都定义有相同的UserLogin类.可是,万一两端的UserL ...

  9. OLTP和OLAP的区别

    OLTP和OLAP的区别 联机事务处理OLTP(on-line transaction processing) 主要是执行基本日常的事务处理,比如数据库记录的增删查改.比如在银行的一笔交易记录,就是一 ...

  10. Java反射操作成员变量 Class can not access a member with modifiers "*"

    fields[j].set(obj, val); 报: Exception in thread "main" java.lang.IllegalAccessException: C ...