如何使用引导程序创建带有标签的复选框列表的下拉菜单?

时间:2015-10-04 08:31:17

标签: javascript css twitter-bootstrap twitter-bootstrap-3

我找到了一些教程,可以用这种或那种形式解释这一点。大多数人都没有用引导程序来实现它,并且那些程序往往会使用几年。

我不确定从哪里开始。

我的应用程序在客户端使用AngularJS,如果这很重要。

编辑:这是我正在谈论的其中一个教程。 http://www.benknowscode.com/2014/09/option-picker-bootstrap-dropdown-checkbox.html

1 个答案:

答案 0 :(得分:1)

在此链接上,您可以找到一个有效的例子:

http://codepen.io/bseth99/pen/fboKH

HTML:

#include <iostream>
#include <initializer_list>

template<class type_t, unsigned Rows, unsigned Columns>
class matrix
{
private:
    std::initializer_list<std::initializer_list<type_t>> elements;

public:
    type_t contents[Rows][Columns];

    matrix() {}

    matrix(const std::initializer_list<std::initializer_list<type_t>> &container)
        : elements(container)
    {
        unsigned i = 0;
        for (const auto &el : elements)
        {
            unsigned j = 0;
            for (const auto &num : el)
            {
                contents[i][j] = num;
                j++;
            }
            i++;
        }
    }

    unsigned rows() { return Rows; }
    unsigned columns() { return Columns; }

    type_t &operator()(const unsigned &i, const unsigned &j)
    {
        return contents[i][j];
    }

    template<unsigned rws, unsigned cls>
    auto operator*(matrix<type_t, rws, cls> &mat)
    {
        matrix<type_t, Rows, 3> ret_mat;  //OK, but only in case the return matrix has 3 columns
    matrix<type_t, Rows, mat.columns()> ret_mat; //Error. This is the desired result
                                //The error message tells me it needs to be a compile-time constant
                                //it's pretty obvious why the first works and what the problem is
                                //but i still have no idea how to get past this

        for (unsigned i = 0; i < this->rows(); ++i)
        {
            for (unsigned j = 0; j < mat.columns(); ++j)
            {
                for (unsigned in = 0; in < 2; ++in)
                    ret_mat.contents[i][j] += this->contents[i][in] * mat.contents[in][j];
            }
        }

        return ret_mat;
    }
};

int main()
{
    matrix<int, 4, 2> mat = { { 7, 3 },{ 2, 5 },{ 6, 8 },{ 9, 0 } };
    matrix<int, 2, 3> mat2 = { { 7, 4, 9 },{ 8, 1, 5 } };

    auto mat3 = mat * mat2;

    for (unsigned i = 0; i < mat3.rows(); ++i)
    {
        for (unsigned j = 0; j < mat3.columns(); ++j)
            std::cout << mat3(i, j) << " ";
        std::cout << std::endl;
    }
    std::cin.get();
}

JS:

<br/>
<div class="container">
  <div class="row">
       <div class="col-lg-12">
     <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li>
  <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
  <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 3</a></li>
  <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 4</a></li>
  <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 5</a></li>
  <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 6</a></li>
</ul>
  </div>
</div>
  </div>
</div>