使用Bootstrap Bar来增加Onboarding Progress Bar功能。
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功能。的更多相关文章
- WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)
原文:WPF 4 开发Windows 7 任务栏(Overlay Icon.Thumbnail Toolbar.Progress Bar) 在上一篇我们介绍了如何在WPF 4 中开发Wind ...
- unity3d插件Daikon Forge GUI 中文教程5-高级控件listbox和progress bar的使用
3.3.listbox列表框 Atlas 图集: 下面应用到的精灵都是在这里的. ListBox中的内容: 背景精灵 图片的主颜色 Padding边距 Scrollbar 滚动条对象的预制体或者对象, ...
- Circular progress bar in Unity 3D
Circular progress bar in Unity 3D - UnityScripthttp://stackoverflow.com/questions/22662706/circular- ...
- 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 ...
- unity3d插件Daikon Forge GUI 中文教程-5-高级控件listbox和progress bar的使用
(游戏蛮牛首发)大家好我是孙广东.官网提供了专业的视频教程http://www.daikonforge.com/dfgui/tutorials/,只是是在youtube上,要观看是须要FQ的. 只是教 ...
- C#控制台进度条(Programming Progress bar in C# Consle application)
以下代码从Stack Overflow,觉得以后会用到就收藏一下,我是辛勤的搬运工,咿呀咿呀哟- 1.showing percentage in .net console application(在. ...
- 打印进度条——(progress bar才是专业的)
# 打印进度条——(progress bar是专业的) import time for i in range(0,101,2): time.sleep(0.1) char_num = i//2 #打印 ...
- 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 ...
- 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 ...
随机推荐
- CSS之CSS的三种基本的定位机制(普通流,定位,浮动)
一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...
- c# 中HttpClient访问Https网站
c# 中HttpClient访问Https网站,加入如下代码: handler = new HttpClientHandler() ;handler.AllowAutoRedirect = true; ...
- hibernate一级缓存及对象的状态
hibernate中实体类对象的状态 在hibernate中实体类对象有三种状态 (1)瞬时态(临时态) 瞬时态:即我们自己创建一个对象,还没有保存到数据库就叫临时态,其实也可以说是对像没有id值,跟 ...
- 平衡树-Splay
#include<iostream> #include<cstdio> #include<cmath> #include<algorithm> #def ...
- 爬取豆瓣电影影评,生成wordcloud词云,并利用监督学习根据评论自动打星
本文的完整源码在git位置:https://github.com/OceanBBBBbb/douban-ml 爬取豆瓣影评 爬豆瓣的影评比较简单,豆瓣没有做限制,甚至你都不用登陆就可以看全部,我这里用 ...
- zuul 自定义路由规则
1,zuul的maven配置 <!--spring cloud 相关包--><parent> <groupId>org.springframework.boot&l ...
- Django model 字段类型及选项解析---转载
model field 类型1.AutoField() 自增的IntegerField,通常不用自己设置,若没有设置主键,Django会自动添加它为主键字段,Django会自动给每张表添加一个自增的p ...
- office全系列激活脚本-改良版.cmd
@ECHO OFFTITLE office 全版本系统激活@echo offfor /l %%a in (8,1,16) do (for /f "tokens=*" %%i in ...
- matlab的Deep Learning的toolbox 中的SAE算法
最近一直在看Deep Learning,各类博客.论文看得不少 但是说实话,这样做有些疏于实现,一来呢自己的电脑也不是很好,二来呢我目前也没能力自己去写一个toolbox 只是跟着Andrew Ng的 ...
- oracle数据库开启与关闭
先用CRT软件链接-——建立会话——telent/ssh——写服务器Ip——点击链接——输入密码 # su - oracle 打开数据库 # cmd 进入特权模式 $ sqlplus / a ...