使用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 ...
随机推荐
- PS跑马灯效果和更换图标
最终效果 1.图片修改 跑马灯效果图 Head页面 使用的 IScript_HPDefaultHdr() in WEBLIB_PORTAL.PORTAL_HOMEPAGE 这个页面 一 ...
- C# 使用Newtonsoft.Json读写Json文件
{ "CAN": false, "AccCode": 4294901856, "Id": 768, "BPointMove&quo ...
- Excel无法打开文件xxx.xlsx,因为文件格式或文件扩展名无效。请确定文件未损坏,并且文件扩展名与文件的格式匹配
office版本:2016 系统版本:win10 问题描述: 1.桌面新建excel表格后,打开时,提示“Excel无法打开文件xxx.xlsx,因为文件格式或文件扩展名无效.请确定文件未损坏,并且文 ...
- python,Day1,基础1
主要内容 1.python介绍 2.发展史 3.安装 4.hello world程序 5.变量 6.用户输入 7.模块 8.数据类型 9.数据运算 10.if...else语句 11.while循环 ...
- MySQL 压缩文件安装遇到的问题及解决方案
第一步:从官网下载压缩文件(链接). 第二步:解压该文件,放置到想放到的位置.我的目录是在 C:\mysql\mysql-8.0.12-winx64 下. 第三步:在C:\mysql\mysql-8. ...
- 第一章 Python程序语言简介
第一节 Python概述 1. 什么是Python Python是一种 解释型.面向对象.动态数据类型 的高级程序设计语言.由Guido van Rossum与1989年发明,第一个公开发行版本发行于 ...
- MySQL ERROR 1698 (28000): Access denied for user 'root'@'localhost'
今天在安装MySQL的过程中竟然没有让我输入密码,登录的时候也不需要密码就能进入,这让我很困惑. 进了数据库就设置密码,用了各种方式都不行. 虽然我这数据库没啥东西但也不能没有密码就裸奔啊,有点丢人是 ...
- 与TIME_WAIT相关的几个内核参数
问题 公司用浏览器访问线上服务一会失败一会成功,通过ssh连接服务器排查时发现ssh也是这样: 检查 抓包后发现建立连接的请求已经到了服务器,但它没有响应: 纠结了好久,后来在腾讯云技术支持及查了相关 ...
- Java线程基础(一)
说在前面,经过一段学习过后,自己发觉线程在Java中占有举足轻重的地位,总觉得如此复杂的线程知识点一定要好好理清才好消化,因而有了这篇文章. 但因鄙人资历尚浅,如有遗漏错误之处还请广大网友不吝赐教. ...
- raphael参数说明
大纲 :first-child { margin-top: 0px; } .markdown-preview:not([data-use-github-style]) h1, .markdown-pr ...