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. Jmeter笔记(Ⅱ)使用Jmeter实现轻量级的接口自动化测试

    接口测试虽然作为版本的一环,但是也是有一套完整的体系,有接口的功能测试.性能测试.安全测试:同时,由于接口的特性,接口的自动化低成本高收益的,使用一些开源工具或一些轻量级的方法,在测试用例开发的成本不 ...

  2. Oracle查询临时表空间的占用

    可以使用以下语句查询是哪个session number的哪个sql占用了较大的临时表空间 select inst_id,username,session_num,sql_id,tablespace,s ...

  3. 【JavaScript】学习中遇到的一些问题

    一.JavaScript中没法直接比较两个object和array是否相等

  4. python 对excel操作用法详解

    在python中,对excel表格读,写,追加数据,用以下三个模块: 1.wlrd 读取excel表中的数据 2.xlwt 创建一个全新的excel文件,然后对这个文件进行写入内容以及保存. 3.xl ...

  5. Tensorflow object detection API ——环境搭建与测试

    1.开发环境搭建 ①.安装Anaconda 建议选择 Anaconda3-5.0.1 版本,已经集成大多数库,并将其作为默认python版本(3.6.3),配置好环境变量(Anaconda安装则已经配 ...

  6. PHP 异常处理 throw new exception

    当异常被抛出时,其后的代码不会继续执行,PHP 会尝试查找匹配的 "catch" 代码块. 如果异常没有被捕获,而且又没用使用 set_exception_handler() 作相 ...

  7. PAT (Basic Level) Practice (中文)1004 成绩排名 (20 分)

    题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805321640296448 #include <iost ...

  8. [算法] 举一反三之n重复数组中找唯一m重复异类数

    n重复数组,是指数组中的数字都出现n次: 唯一m重复异类数,是指存在唯一一个没出现n次,只出现了m次的数: 这里我简记它为nX+my问题,求解y,其中m < n,数组中都是整数: 3X+y问题 ...

  9. 关于 IIS 的 Management Service Delegation 配置 备份

    在MSDN没找到关于使用APPCMD备份IIS的"Management Service Delegation"模块配置命令. 到IIS的配置文件存放目录下,几番搜索,查到%wind ...

  10. linux磁盘命令-lsblk显现磁盘阵列分组

    linux磁盘命令-lsblk显现磁盘阵列分组 lsblk(list block devices)能列出系统上所有的磁盘. lsblk [-dfimpt] [device] 选项与参数: -d :仅列 ...