如何使用引导进度条答案

【问题标题】：How to use bootstrap progress bars如何使用引导进度条
【发布时间】：2015-06-03 10:25:36
【问题描述】：

这是一个愚蠢的问题，但我不知道从哪里开始。我想使用 Bootstrap 的Progress Bars。我有一个简单的待办事项列表应用程序。我希望能够直观地显示待办事项列表的 70% 是完整的。

我将如何处理这个问题，或者我需要查看哪些资源。我只能找到有关使用进度条显示网站加载进度的信息。

我当然想将这些设置为动态的。因此，当用户将对象标记为完成时，进度条也应该改变。

_todo_item.html.erb

<div class="row clearfix">
    <% if todo_item.completed? %>
        <div class="complete">
            <%= link_to complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch do %>
                <i style="opacity: 0.4;" class="glyphicon glyphicon-ok"></i>
            <% end %>
        </div>
        <div class="todo_item">
            <p style="opacity: 0.4;"><strike><%= todo_item.content %></strike></p>
        </div>
        <div class="trash">
            <%= link_to todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } do %>
                <span class="glyphicon glyphicon-trash"></span>
            <% end %>
        </div>
    <% else %>
        <div class="complete">
            <%= link_to complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch do %>
                <span class="glyphicon glyphicon-ok"></span>
            <% end %>
        </div>
        <div class="todo_item">
            <p><%= todo_item.content %></p>
        </div>
        <div class="trash">
            <%= link_to todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } do %>
                <span class="glyphicon glyphicon-trash"></span>
            <% end %>
        </div>
    <% end %>
</div>

todo_items_controller.rb

class TodoItemsController < ApplicationController
    before_action :set_todo_list
    before_action :set_todo_item, except: [:create]

    def create
        @todo_item = @todo_list.todo_items.create(todo_item_params)
        redirect_to @todo_list
    end

    def destroy
        if @todo_item.destroy
            flash[:success] = "Todo List item was deleted"
        else
            flash[:error] = "Todo List item could not be deleted."
        end
        redirect_to @todo_list
    end

    def complete
        @todo_item.update_attribute(:completed_at, Time.now)
        redirect_to @todo_list, notice: "Todo item completed"
    end

    private

    def set_todo_list
        @todo_list = TodoList.find(params[:todo_list_id])
    end

    def set_todo_item
        @todo_item = @todo_list.todo_items.find(params[:id])
    end

    def todo_item_params
        params[:todo_item].permit(:content)
    end

end

一个用户有一个 todo_list，一个 todo 列表有一个 todo_item。我想使用进度条来显示已完成任务的百分比。

【问题讨论】：

请解释您遇到的具体问题是什么？我假设你可以只画一个进度条？您如何将工作标记为已完成？使用阿贾克斯？你能显示一些代码吗？
您可以借助 Ajax 调用来检查完成了多少任务，然后使用 jquery 或基本 javascript 将 aria-valuenow="60" 属性设置为计算结果。

标签： ruby-on-rails ruby twitter-bootstrap ruby-on-rails-4

【解决方案1】：

如果您查看取自Bootstrap Docs 的this example，您可以看到宽度是在.progress-bar 元素上设置的。该宽度决定了条形的“完整性”。所以要完成 70%，请将其宽度设置为 70%。

来自 Bootstrap 的相关代码：

<div class="progress">
  <div class="progress-bar" style="width: 60%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

【讨论】：

嘿，谢谢- 我的意思是更像把它绑定到我的数据库。例如，我有 5 个不同的待办事项列表。每个人可能有 10 件物品。我想将 X/50 或 X/10 显示为进度条。我刚刚发现了一颗宝石：chartkick.com。这更符合我正在尝试做的事情。
@Ted If style="width: 60%;" 设置栏的显示进度那么 aria-valuenow="60" 的目的是什么?
@Dercni 抱歉，这是一个迟到的答案，但 aria-valuenow="60" 是出于可访问性目的。见developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

【解决方案2】：

HTML 表单的引导进度条实现：

-此脚本创建一个事件处理程序。

-当用户切换输入元素（本例中为form-group）时，它将进度条状态增加20%（我的表单中有5个输入)。

 let progressBar = document.getElementsByClassName("progress-bar")[0];

     $('.form-group').focusout(function() { 
        let currentValue = parseInt(progressBar.style['width']);
        progressBar.style['width']=currentValue+20+"%";
     });

You can find some examples here

【讨论】：