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. 小程序wx:for Do not set same key \"NaN\" in wx:key.

    在使用wx:for的时候出现了Do not set same key \"NaN\" in wx:key. 去网上查看资料,说是使用wx:key 试了一下,没用 字面意思是不要设置 ...

  2. Excel VBA附合导线平差自动计算表

    这是6,7年前做的一个excel vba自动计算附合导线平差的表格. 对于做测绘的朋友来说,附合导线平差是最基础的技能,目前来说,能平差的软件和工具也很多,像南方的平差易,科傻平差.清华三维平差等,但 ...

  3. 2015年上海现场赛重现 (A几何, K暴力搜索)

    A: 题目链接 :https://vjudge.net/contest/250823#problem/A 参考 : https://www.cnblogs.com/helenawang/p/54654 ...

  4. 03-python3.5-模拟购物车流程--更新追加细节注释功能

    03-python3.5-模拟购物车流程--更新追加细节注释功能: 模拟购物车更新脚本: #!/usr/bin/env python #-*- coding: utf-8 -*- #__author_ ...

  5. 对接 第三方物流APP 手机版

    昨天因为bibi项目要对接 物流信息 开始找了快递鸟文档,但是要填写申请APP,必须要注册公司才可以,这样非常麻烦.下面的第三方物理接口,绝对让你满意. https://m.kuaidi100.com ...

  6. CCF CSP 201703-1 分蛋糕

    题目链接:http://118.190.20.162/view.page?gpid=T57   问题描述 试题编号: 201703-1 试题名称: 分蛋糕 时间限制: 1.0s 内存限制: 256.0 ...

  7. MongoDB 3.4 安装以 Windows 服务方式运行

    1.首先从https://www.mongodb.com/download-center#community 下载社区版,企业版也是类似. 2.双击运行安装,可自定义安装路径,这里采用默认路径(C:\ ...

  8. vue的三种通信方式

    一 确定组件关系二 使用第一步确定的组件关系在下面找到使用方法 1 父子通信(子组件使用父组件数据渲染) a) 在 子组件 中添加props props: [自定义prop名字] b) 在子组件中把自 ...

  9. Java 键盘输入数字(空格隔开) 将数字存入数组

    Scanner sc = new Scanner(System.in); String inputString = sc.nextLine(); String stringArray[] = inpu ...

  10. Thuwc 2019 & wc 2019 划水记

    (此处不应有目录,爆零的过程应该慢慢看) Thuwc 2019 拖着箱子去广二,然后发现可以搬出去住酒店.好,然后箱子白搬了.Joker似乎说住宿体验极差,广二宿舍和林荫宿舍质量不相上下,想想wc时要 ...