小编Che*_*Pez的帖子

我正在使用Twitter的Bootstrap模态功能.当有人点击我的表单上的提交时,我正在测试他们是否检查了任何可用的选项:

$('form').submit(function(event) {
        var $target = $('.column').find(':checkbox');                                                        
        if( !$target.is(':checked') ){ // if none of the sub-options are checked
            event.preventDefault();
            $('#my-modal').modal({
                show: 'true',
                backdrop: 'true',
                keyboard: 'true'
            });
        }                                       
    });

...并显示模态窗口,如果他们没有.然后我喜欢模态上的"主要"按钮继续表单提交,而次要按钮则只需关闭模态窗口.

我确信这应该是相当简单的,但我目前对jQuery的了解只是在复制/粘贴级别,文档没有给出如何执行此操作的示例.

我给自己定了一个什么样的jsfiddle我在这里 -谢谢.

编辑 - 我在下面添加了一些代码(感觉有点hacky),它会在单击辅助按钮时关闭模态窗口.单击主按钮时仍不确定如何使表单继续运行:

$('#my-modal .secondary').click(function() {
    $('#my-modal').modal({
        show: 'false'
    });
});

现在的问题归结为:"有没有一种简单的方法来告诉表单"好的,一旦点击主按钮就继续"？

我在React应用程序中使用CSS模块.我还有一个带有一些全局样式的下拉组件(我很高兴,因为我想重复使用的一般样式).

当下拉列表处于活动状态时,将应用CSS类(.dropdown--active).有没有办法可以将全局类与我的组件的本地范围样式一起包含在内？也就是说,我想要的是:

.myClass {
  color: red;
}

:global .dropdown--active .myClass {
  color: blue;
}

但是,该语法使整个选择器全局化,这不是我所追求的:我希望.myClass将范围限定为组件.

我有一个项目列表,每个项目都有一个与之关联的Bootstrap popover(这里的文档).他们是这样发起的:

$('#my_list li').popover({
   placement: 'left'
});

这样可以工作,但是在宽度较小的情况下,弹出窗口会从视口中丢失.我想基于放置条件$(document).width();,但是我看不到覆盖初始选项的方法(例如,在大约1000px的宽度,将位置切换到'上方').

我在这里为jsfiddle编写了一个简化版本.非常感谢.

这应该很简单,但我在获得强大的解决方案时遇到了问题.基本上我正在努力实现这个目标:

因此,使用图标字体将图标右对齐的元素(a或button).我需要确保:

1. 按钮可以是任何宽度
2. 如果没有图标,按钮上没有多余的填充
3. 文本和图标始终保持在同一行(不要换行)

这是HTML:

<button class="btn">Download <span data-icon="+"></span></button>

和(S)CSS:

.btn {
    margin: 0;
    padding: 3px 6px;
    vertical-align: middle;
    border: none;
    background-color: #535B99;
    color: white;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    text-transform: uppercase;
    [data-icon] {
        float: right;
        padding-left: 10px;
        &:before { content: attr(data-icon); }
    }
}

你可以在jsFiddle中看到这个.问题是,除非我向.btn类添加宽度,否则图标总是会掉线.绝对定位会起作用,但是我不能满足上面的(2),因为它需要一些填充.我错过了什么？

编辑

我错过了另一个标准:

4.)在100%宽度处,图标向右对齐(不在文本旁边)

所以在某些情况下,它看起来像:

这就是float我的CSS中必要的原因.

解

几乎完全基于@ Riskbreaker的解决方案,这就是我所确定的:

<button data-button-icon="+" class="btn" href="#">Click Me :P</button>

.btn {
    display: inline-block; …

如果我有此JSON：

{
    'name': 'Active user',
    'config': {
        'status': 'active',
    }
},
{
    'name': 'Paused user',
    'config': {
        'status': 'active',
    }
}

然后，我可以渲染一个React组件并轻松访问数据：

render: function() {
    var panels = [];

    this.props.accounts.forEach(function(account) {
        panels.push(
            <Tabs.Panel title={account.name}>
                <h2>{account.name}</h2>
            </Tabs.Panel>
        );
    });

    return (<Tabs>{panels}</Tabs>);
}
...
React.render(<Tabs accounts={ACCOUNTS} />, document.body);

如果我的JSON的结构如下所示，我应该如何重构该render函数以按需要工作？

{
    'Active User': {
        'config': {
            'status': 'active',
        }
    },
    'Paused User': {
        'config': {
            'status': 'paused',
        }
    }
}

即我不再有name要显示的属性。