小编Ale*_*ust的帖子

如何覆盖form_for帮助器中的类名?

我需要在表单中添加一些类名.我正在使用Rails的form_for助手来做到这一点.我试过添加{ :class => 'classname' }无济于事.

如何在此Rails助手输出中添加类?

ruby-on-rails

42
推荐指数
2
解决办法
3万
查看次数

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

jQuery UI Accordion展开/折叠全部

我在项目中使用jQuery UI Accordion(一次不允许打开多个项目).利用手风琴,因为我通常是合适的只需要一次一个打开的面板.

但是,我需要提供一个"全部展开"链接,单击该按钮可切换到"全部折叠".我不想在这个要求周围自定义几乎相同的手风琴功能,所以我想要一些JS来实现这一点,同时保持Accordion组件的使用.

问题:在使用jQuery UI"Accordion"组件为标准功能提供支持的同时,需要哪些JavaScript/jQuery才能实现这一目标?

这是一个小提琴:http://jsfiddle.net/alecrust/a6Cu7/

javascript jquery jquery-ui accordion jquery-ui-accordion

33
推荐指数
4
解决办法
11万
查看次数

当position:sticky被触发时的事件

我正在使用新的position: sticky(info)来创建类似iOS的内容列表.

它运行良好,远远优于之前的JavaScript替代方案(例子),但据我所知,当触发事件时不会触发任何事件,这意味着当条形图到达页面顶部时我无法执行任何操作,与以前不同解.

stuck当一个元素position: sticky点击页面顶部时,我想添加一个类(例如).有没有办法用JavaScript来听这个?使用jQuery很好.

position: sticky可以在此处找到新使用的演示.

html javascript css jquery position

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

相当于已弃用的jQuery Toggle事件

jQuery的Toggle事件功能已作为1.9版的一部分删除.

我正在使用这个函数:

$('#example').toggle(function() {
    do stuff
}, function() {
    do stuff
});
Run Code Online (Sandbox Code Playgroud)

现在Toggle Event已经消失了,重现此功能的最佳方法是什么?

jquery toggle

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

跳过有序列表项编号

我有一个有序列表,我想跳过特定项目的数字输出.

传统输出:

1. List item
2. List item
3. List item
4. List item
5. List item
Run Code Online (Sandbox Code Playgroud)

期望的输出:

1. List item
2. List item
   Skipped list item
3. List item
4. List item
5. List item
Run Code Online (Sandbox Code Playgroud)

这在CSS中是否可以实现?我发现了一个我以前不知道的<ol>"开始"属性,但似乎没有帮助我.

html css list html-lists

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

Node.js,Express,EJS - 导航中当前页面上的活动类

我想在每个导航链接上呈现一个"当前"类,具体取决于我在layout.ejs模板中的哪个页面.

目前,我的快递控制器索引如下所示:

// About
exports.about = function(req, res) {
    res.render('content/about.ejs', {
        title: 'About'
    });
};
Run Code Online (Sandbox Code Playgroud)

在我的layout.ejs中,我有以下内容,我想动态呈现.

<ul class="nav" id="nav">
    <li><a href="/">Home</a></li>
    <li class="current"><a href="/about">About</a></li>
    <li><a href="/">Contact</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

有关如何实现这一目标的任何想法?

javascript navigation ejs node.js express

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

CSS3白色到透明渐变

我正在使用CSS3和RGBA来创建白色到透明的渐变:

div {
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1);
    padding: …
Run Code Online (Sandbox Code Playgroud)

css gradient linear-gradients css3

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

在列表中输出所有页面的媒体查询

使用JavaScript,输出包含应用于当前页面的所有媒体查询的列表的最佳方法是什么.

我假设这需要过滤以找到嵌入式媒体查询,即

<link rel="stylesheet" media="only screen and (min-width: 30em)" href="/css/30em.css">

以及位于CSS文件中的媒体查询,即

@media only screen and (min-width: 320px) {}

我正在寻找的一个示例输出:

<p>There are 3 media queries loaded on this page</p>
<ol>
    <li>30em</li>
    <li>40em</li>
    <li>960px</li>
</ol>
Run Code Online (Sandbox Code Playgroud)

javascript jquery media-queries responsive-design

9
推荐指数
2
解决办法
1567
查看次数

获取 Active Storage 变体的元数据

我有一个 Active Storage 图像变体,例如

<%= image_tag model.logo_image.variant(resize_to_fit: [300, 200]) %>
Run Code Online (Sandbox Code Playgroud)

我正在尝试获取此变体的widthheight值(因为它们是未知的)以用于 thewidthheightHTML 属性。

我预计他们会在这里:

model.logo_image.variant(resize_to_fit: [300, 200]).processed.blob.metadata
Run Code Online (Sandbox Code Playgroud)

但这给了我原始文件的元数据,而不是调整大小的变体,例如

{"identified"=>true, "width"=>800, "height"=>174, "analyzed"=>true}
Run Code Online (Sandbox Code Playgroud)

如何获取 Active Storage 变体的维度?

ruby-on-rails rails-activestorage

9
推荐指数
1
解决办法
561
查看次数