小编Khr*_*rys的帖子

Bootstrap单选按钮"已选中"标志

在#1工作的情况下,如果#2它不起作用.检查下面的代码:

<div class="container">
    <div class="row">
        <h1>Radio Group #1</h1>
        <label class="radio-inline">
          <input name="radioGroup" id="radio1" value="option1" type="radio"> 1
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio3" value="option3" type="radio"> 3
        </label>
    </div>
    <div class="row">
        <h1>Radio Group #2</h1>
        <label for="year" class="control-label input-group">Year</label>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input name="year" value="2011" type="radio">2011
            </label>
            <label class="btn btn-default">
                <input name="year" value="2012" type="radio">2012
            </label>
            <label class="btn btn-default">
                <input name="year" value="2013" checked="checked" type="radio">2013
            </label>
        </div>  
    </div>  
</div>
Run Code Online (Sandbox Code Playgroud)

你可以在这里看到它:http: …

html radio-button twitter-bootstrap

40
推荐指数
2
解决办法
18万
查看次数

从bootstrap formhelper验证bootstrap datepicker

是否可以使用JQuery Validation来验证Bootstrap Datepicker?由于它没有暴露这个input领域,我无法让它验证.

示例:https://jsfiddle.net/Khrys/2rcr9j5s/

$.validator.setDefaults({
   submitHandler: function() {
      form.submit()
   }
});


$().ready(function() {
var container = $('div.containerx');

    $("#Form").validate({
        ignore: [],
        messages: {
            StartTime: {
                required: "Select the StartTime."
            }
        },
        errorContainer: container,
        errorLabelContainer: $("span", container),

        highlight: function ( element, errorClass, validClass ) {
            $('#StartTime').addClass( "btn-danger" );
            $('#Filter').addClass( "btn-danger" );
        },
        unhighlight: function ( element, errorClass, validClass ) {
            $('#StartTime').removeClass( "btn-danger" );
            $('#Filter').removeClass( "btn-danger" );
        }
    });
}); 
Run Code Online (Sandbox Code Playgroud)

更新:

btn-danger需要正确地应用于元素.

https://jsfiddle.net/2rcr9j5s/4/

jquery jquery-validation-engine bootstrap-form-helper

19
推荐指数
1
解决办法
1511
查看次数

Bootstrap的3.x面板,高度为100%

是否有可能让面板具有100%的高度?我试过了

html,body{ height:100%}
Run Code Online (Sandbox Code Playgroud)

而不是放在height: 100%面板上,没有运气.

twitter-bootstrap

13
推荐指数
3
解决办法
4万
查看次数

带有Bootstrap标签的Google Chart

我在带有Bootstrap选项卡的页面中使用了两个(或更多)Google图表.根据我的标签导航,图表会失去默认(?)大小的大小.Bellow是一个简化的测试用例,其中包含查看问题的步骤:

https://jsfiddle.net/73o0rfqe/

如何重现:

情况#1:

  • 单击两个选项卡.仅在选项卡单击后,图表才会调整为实际大小.我正在寻找一种在页面加载后(在选项卡点击之前)渲染它的方法.

情况#2:

  • 单击两个选项卡,单击TwoC选项卡,单击一个选项卡,单击两个选项卡,单击TwoA选项卡.现在图表失去了实际尺寸.单击一个选项卡,单击两个选项卡.现在,图表再次以实际尺寸呈现.

这部分代码:

$("a[href='#One']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
    clearChart();
}); 
Run Code Online (Sandbox Code Playgroud)

我正在尝试这样做,但它没有像它应该的那样工作.任何帮助都会有所帮助.

PS.:任何有关优化此代码的建议都会有所帮助.谢谢.

css jquery google-visualization twitter-bootstrap

12
推荐指数
2
解决办法
3735
查看次数

Google的时间轴图表中的颜色根据特定值显示

我想为酒吧创建一组颜色.以下示例是raw.我想添加一个类别类型的列,并根据该类别我将为该栏添加颜色.

就像是:

dataTable.addColumn({ type: 'string', id: 'Category' });
Run Code Online (Sandbox Code Playgroud)

线

[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1),  new Date(2014, 0, 15) ], …
Run Code Online (Sandbox Code Playgroud)

google-visualization

11
推荐指数
2
解决办法
1万
查看次数

在Google表格图表中排序

我只想将列0降序排序.我正在使用此代码:

var table = new google.visualization.ChartWrapper({
  chartType: 'Table',
  containerId: 'chart_table_a',
  options: {
    sortColumn: 0,
    sortAscending: false,
    sort: 'enable'
  }
});
Run Code Online (Sandbox Code Playgroud)

我不想让表格可排序,但代码只适用于sort: 'enable'.

有没有办法只是排序而不使表格可以排序?

google-visualization google-chartwrapper

10
推荐指数
1
解决办法
1万
查看次数

从"Bootstrap-Select"中获取价值

我有一个选择框,当我选择该选项时,它会使用选择框的值更新输入框.这适用于旧版本的Bootstrap-Select.但在较新的版本中,它不再起作用了.我正在寻找一种方法,使其在较新的版本中工作.谢谢.

HTML:

<select class="selectpicker Categoria" multiple="">
  <option selected>A1</option>
  <option selected>A2</option>
  <option>A3</option>
  <option>A4</option>
</select>
<input type="text" class="ChangeCategory" name="ChangeCategory">
Run Code Online (Sandbox Code Playgroud)

JS:

$('select').selectpicker();

$(".Categoria").change(function() {
  f2();
});

var f2 = function(){
  $('.ChangeCategory').val($(".Categoria").val());
}
f2();
Run Code Online (Sandbox Code Playgroud)

html javascript jquery bootstrap-select

7
推荐指数
1
解决办法
4263
查看次数

带导航栏固定顶部和Bootstro的Bootstrap

我正在使用Bootstrap + Bootstro,但无法使顶部导航栏落后于叠加层.

http://jsfiddle.net/NJsYw/5/(点击教程)

<div id="wrap">

  <!-- Fixed navbar -->
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li><a href="#" id='tutorial'>Tutorial</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
    </div>
    <p class="lead bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='0'>Pin a fixed-height footer to the bottom of the viewport in desktop …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap bootstro

6
推荐指数
1
解决办法
5688
查看次数

在Sankey图表中按名称排序

是否可以使用sankey按名称排序?例如:

示例: https ://jsfiddle.net/Khrys/1s3shf2m/

  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
      [ 'A', 'Mango', 5 ],
      [ 'A', 'Mango', 7 ],
      [ 'A', 'Apple', 6 ],
      [ 'B', 'Coconut', 2 ],
      [ 'B', 'Mango', 9 ],
      [ 'B', 'Pineapple', 4 ]
    ]);

    // Sets chart options.
    var options = {
      width: 600,
    };

    // Instantiates and draws our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
    chart.draw(data, options); …
Run Code Online (Sandbox Code Playgroud)

google-visualization googlevis sankey-diagram

6
推荐指数
2
解决办法
3482
查看次数

添加边框到fa-circle

如何circle从Font Awesome中为图标添加边框?其实我的结果是:

http://jsfiddle.net/0jhdvj0k/

边框类似于省略号,而不是圆形边框.

<table class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th></th>
            <th>AAAA</th>
            <th>AAAA</th>
            <th>AAAA</th>
            <th>AAAA</th>
            <th>AAAA</th>
            <th>AAAA</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width: 55px;" class="text-center" style="padding-top: 5px; width: 25px;"><span class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"><i class='fa fa-check' style="font-size: 18px;"></i></span><span style='position: relative; top: -15px; right: 0px; left: 15px;'><span class='fa-stack fa-lg'><i class='fa fa-circle fa-stack-2x text-info' style='border-radius: 100%; border: 2px solid #5cb85c;'></i><span class='fa fa-stack-1x fa-inverse' style='top: 3px;'>6</span></span></span></td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr> …
Run Code Online (Sandbox Code Playgroud)

css font-awesome

5
推荐指数
1
解决办法
3442
查看次数