小编dig*_*ist的帖子

如何创建具有垂直时间轴栏的UI,在桌面上它显示为中间的时间轴栏和两侧的事件框.在较小的移动屏幕上,左侧的时间轴栏和右侧的所有事件框.

将JQuery与响应类结合使用是可以的,只需要显示所有事件框,因此使用xs-hidden隐藏备用框将不起作用.

JS小提琴: http ://jsfiddle.net/n82ek/2/

减少结果窗口的扩展大小以查看响应行为.

需要做什么？将左侧的栏向左移动显示尼斯:还在框旁边添加timelineDot.

请参阅附带的样本时间线ui图片图像....谢谢!

目前的HTML:

<div class="container">
    <div class="timelineBar"></div>
    <div class="timelineDot"></div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
</div>

目前的CSS:

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
.timelineBar {
    width: 2px;
    background-color: #BDBDBD;
    display: inline-block;
    position: absolute;
    height: 100%;
    left: 50%;
    margin-left: 10px; …

现在我在界面上出现了这个:

但与按键之间bolt,plus-circle和gear我想没有间隙.我在那里有差距因为看起来它是强制性的,根据Bootstrap Components文档中的这个评论:

使用任何按钮触发下拉菜单,方法是将其放在.btn-group中并提供正确的菜单标记.

所以,现在差距就在那里,因为按钮的布局格式为:

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-sm">
        <button type="button" title="Focusing" ... >
            <span class='fa fa-bolt '></span>
        </button>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
            <span class='fa fa-plus-circle '></span>
            <span class='fa fa-caret-down '></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            ...
        </ul>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
            <span class='fa fa-gear '></span>
            <span class='fa fa-caret-down '></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            ...
        </ul>
    </div>
</div>

每个按钮组可以有多个下拉列表吗？ …

看看这个小提琴.

输入Ctrl+ F并搜索"获取"...

对我来说,Chrome会从此文本中找到不可见的文字: A long option that gets cut off

它在Linux/Ubuntu 12.04 Chrome版本31.0.1650.63上重现

HTML

<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

CSS

select {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

div {
    border-style:solid; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

如何在页面上显示文本,而不是浏览器突出显示的空白块空白？

我在rails 4应用程序中设置了sidekiq,用于发送电子邮件和处理后台作业.我还设计了我使用devise_async和典型的联系表单电子邮件.我正在使用Gmail发送电子邮件.

如果我删除sidekiq,它通常通过gmail(设计和联系表单)发送电子邮件,但是当我启用它时,它不起作用(devise_async既不是联系表单也不是).Sidekiq显示后台作业开始并成功完成(我也通过sinatra应用程序看到它们已被处理)但电子邮件从未发送过.

在开发过程中,控制台显示发送的电子邮件(使用devise_async和联系表单,因为它们已成功处理sidekiq).

我已经尝试过的:

• 我为sidekiq的rails4添加了github分支(我也尝过了主人)
• 我已经更新并检查redis版本是否大于2.4(它是2.6.14)
• 我正在运行sidekiq bundle exec sidekiq

但没有任何效果.我使用的是ruby 2.0.0-p247.

我还在这个应用程序中使用sidekiq设置图像处理,并且在开发和生产中都能很好地工作.

我没有做任何花哨的事情,但我正在添加完成代码:

我的邮件代码:

  def send_message
   @message = Message.new(message_params)
   if @message.save
     ContactMailer.delay.contact_form(@message.id)
   end
 end

我的邮件:

  def contact_form(message_id)
    message = Message.where(id: message_id).first
    @email = message.email
    @message = message.text
    mail(to: "myemail@gmail.com", subject: "Message from contact form")
  end

和我的生产配置(它没有sidekiq工作):

  config.action_mailer.delivery_method = :smtp
  ActionMailer::Base.smtp_settings = {
    :address              => "smtp.gmail.com",
    :port                 => 587,
    :domain               => "gmail.com",
    :authentication       => "plain",
    :enable_starttls_auto => true,
    :user_name            => "myusername",
    :password             => "mypassword"
  }
  config.action_mailer.default_url_options = { :host …

我使用div过label和input type="checkbox".我这样做是为了让复选框看起来像一个按钮.

这是我的例子:http://jsfiddle.net/Je87Q/

我应该怎么做一个复选框或标签/输入,它会停止跳到我的页面顶部？

这只发生在Firefox上.知道如何解决这个问题吗？

我正在使用KnockoutJS和durandalJS 2.0.我正在基于数据库表条目动态添加两个下拉列表,并用另一个表中的数据填充它们.每个下拉菜单都有一个复选框.如何获取所选的下拉值？

楷模

var dataToAdd = {
    mydata_Id: ko.observable(),
    mydata_Name: ko.observable(),
    mydata_data: ko.observableArray([dataTask])
};

var dataTask = {
    taskId: ko.observable(),
    dropdownId: ko.observable()
};

var taskList=ko.observableArray([]);//get data from database table. Consider there are two entries.
var dropdownData=ko.observableArray([]); //get the dropdown data

视图

//Since *taskList* has two entries, two dropdowns with their respective checkbox will get generated.
<div data-bind="foreach:taskList">
    <label><input type="checkbox" data-bind="checked: true" />
    <span data-bind="text:Name"></span></label>    

    <select data-bind="options: $root.DropdownData, optionsValue: 'Id', optionsText: …

仅当navbar折叠时,如何在链接的图标/徽章旁边显示链接文本？

现在我的bootstrap3驱动navbar仅使用图标,当它未被坍塌时:

navbar折叠时出现问题:

......链接旁边没有描述性文字,但显然有空间.删除文本描述是为了节省空间,但是一旦折叠就有足够的空间......而且没有描述它似乎是有缺陷的,因为占用了大量的空间.

我查看了帮助程序类和collapse文档中的功能,并尝试将<span class='collapse in'>标记放在包含文本,badge或glyphicon标记之后.

当我这样做时,文本始终可见,而不仅仅是在navbar折叠时.class='visible-xs'根据实际的浏览器宽度,我不想使用或类似的其他类.

navbar在这种情况下,检测元素的正确方法是折叠并仅显示文本？

这是一个要点: https ://gist.github.com/digitalextremist/6e70807a8b0e3c3da993

和bootply:http://www.bootply.com/105538

如果我需要做10个类似的活动,我做得更好:

• 10个活动和10个布局？
• 1个活动和10个布局？
• 1个活动,并在可见性消失/可见的情况下更改UI？

我需要一个答案:

1. 性能
2. 礼节

有没有一种已知的方法可以使summernote模式从bootstrap模态中突破？

我有一个普通的模态,里面有一个summernote元素,没什么特别的.

当我使用summernote功能时,如果我在boostrap模式中使用summernote,这就是我得到的:

JS:

$('#dropper').on( "show.bs.modal", function() {
    $('#dropping').summernote({
        height: 300
    });
})

HTML:

<div id="dropper" class="modal fade" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="dropping">text...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left">
                    <span class='fa fa-paperclip '></span>
                    Attach Digital Assets
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-default opacity75" class="close" data-dismiss="modal">
                        &times; Cancel
                    </button>
                    <button type="button" class="btn btn-warning" href="javascript:postDrop()">
                        Post Status Update
                        <span class='fa fa-bullhorn '></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

完成Bootply: http ://bootply.com/113808

假设我想显示程序集的全名,只给出程序集文件的路径.

我知道我可以很容易地编写命令行程序或powershell脚本,但运行时是否包含我可以使用的命令？(我已经看到gacutil为gac中的程序集执行此操作,但是关于未注册的程序集？)

我是JavaScript的新手,试图在表单验证上找到自己的方式.我一直在阅读书籍和在线教程,我在网上发现了以下代码,在我看来,这是非常优雅和可维护的.不幸的是,我在JavaScript方面的技能还不足以理解一切.我在这里请求您帮助理解定义的不同功能.

我还想在一个事件(onSubmit事件)上调用InstantValidation函数,在一个独立的.js文件中调用它(基于事件监听器),所以你能帮我调用一下这个函数吗？

这是代码:

<html>

<body>

    <form id="myform" action="#" method="get">
        <fieldset>

            <legend><strong>Add your comment</strong></legend>

            <p>
                <label for="author">Name <abbr title="Required">*</abbr></label>
                <input name="author" id="author" value="" 
                    required="required" aria-required="true" 
                    pattern="^([- \w\d\u00c0-\u024f]+)$"
                    title="Your name (no special characters, diacritics are okay)"
                    type="text" spellcheck="false" size="20" />
            </p>

            <p>
                <label for="email">Email <abbr title="Required">*</abbr></label>
                <input name="email" id="email" value=""
                    required="required" aria-required="true" 
                    pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
                    title="Your email address"
                    type="email" spellcheck="false" size="30" />
            </p>

            <p>
                <label for="website">Website</label>
                <input name="website" id="website" value=""
                    pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
                    title="Your website address"
                    type="url" spellcheck="false" size="30" />
            </p>

            <p>
                <label for="text">Comment <abbr …

使用RuboCop，您可以在.rubocop.yml文件中实现以下行为：

inherit_from:
    - path/to/some/other.yml

创建共享规则集很好。但是.travis.yml文件呢？

Travis CI是否具有.travis.yml包含永久yml文件的关键字？

我已经读过使用yaml固有行为的各种麻烦。inherit_from:似乎是一个RuboCop特定的关键字和处理程序。我并没有消除它可以单独处理的可能性yaml，但是我宁愿使用一种Travis CI方法。我不认为这纯粹是yaml相关的，但我不确定。

我一直在寻找for所演示的相同方法.rubocop.yml，.travis.yml但没有明确的答案。可能吗？

如何将一个.travis.yml文件包含在另一个文件中？

试图让div.ui-autocomplete从右到左扩展,这就是我现在遇到的问题.

这可以使用CSS修复,还是有办法用jQuery做到这一点？