Question

这是一个愚蠢的问题但我不知道从哪里开始。我想使用Bootstrap＆＃39; s 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_item。我想使用进度条，以便显示已完成任务的百分比。

Answer 1

如果您查看this example中的Bootstrap Docs，则可以看到.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>

Answer 2

HTML表单的Bootstrap进度栏实现：

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

-当用户切换输入元素（在这种情况下为 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

如何使用bootstrap进度条

2 个答案: