使用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 ...
随机推荐
- Jmeter笔记(Ⅱ)使用Jmeter实现轻量级的接口自动化测试
接口测试虽然作为版本的一环,但是也是有一套完整的体系,有接口的功能测试.性能测试.安全测试:同时,由于接口的特性,接口的自动化低成本高收益的,使用一些开源工具或一些轻量级的方法,在测试用例开发的成本不 ...
- Oracle查询临时表空间的占用
可以使用以下语句查询是哪个session number的哪个sql占用了较大的临时表空间 select inst_id,username,session_num,sql_id,tablespace,s ...
- 【JavaScript】学习中遇到的一些问题
一.JavaScript中没法直接比较两个object和array是否相等
- python 对excel操作用法详解
在python中,对excel表格读,写,追加数据,用以下三个模块: 1.wlrd 读取excel表中的数据 2.xlwt 创建一个全新的excel文件,然后对这个文件进行写入内容以及保存. 3.xl ...
- Tensorflow object detection API ——环境搭建与测试
1.开发环境搭建 ①.安装Anaconda 建议选择 Anaconda3-5.0.1 版本,已经集成大多数库,并将其作为默认python版本(3.6.3),配置好环境变量(Anaconda安装则已经配 ...
- PHP 异常处理 throw new exception
当异常被抛出时,其后的代码不会继续执行,PHP 会尝试查找匹配的 "catch" 代码块. 如果异常没有被捕获,而且又没用使用 set_exception_handler() 作相 ...
- PAT (Basic Level) Practice (中文)1004 成绩排名 (20 分)
题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805321640296448 #include <iost ...
- [算法] 举一反三之n重复数组中找唯一m重复异类数
n重复数组,是指数组中的数字都出现n次: 唯一m重复异类数,是指存在唯一一个没出现n次,只出现了m次的数: 这里我简记它为nX+my问题,求解y,其中m < n,数组中都是整数: 3X+y问题 ...
- 关于 IIS 的 Management Service Delegation 配置 备份
在MSDN没找到关于使用APPCMD备份IIS的"Management Service Delegation"模块配置命令. 到IIS的配置文件存放目录下,几番搜索,查到%wind ...
- linux磁盘命令-lsblk显现磁盘阵列分组
linux磁盘命令-lsblk显现磁盘阵列分组 lsblk(list block devices)能列出系统上所有的磁盘. lsblk [-dfimpt] [device] 选项与参数: -d :仅列 ...