小编boo*_*sey的帖子

Sass/Compass 从变量中获取变量名

我正在尝试制作一个 mixin,它可以让我根据您使用的变量名称创建适应的代码块。

$foo: #00A9EC;
@mixin menu-color($color) {
.color-#{$color} a.level2,
.color-#{$color} a.level2:visited {
    color: $color;
    &:hover {
        color: adjust-lightness($color, 10); }
    &:active {
        color: adjust-lightness($color, -10); } } }

@include menu-color($foo);
Run Code Online (Sandbox Code Playgroud)

输出:

.color-foo a.level2,
.color-foo a.level2:visited {
    color: #00A9EC; }

.color-foo a.level2:hover,
.color-foo a.level2:visited:hover {
        color: #20C0FF; }

.color-foo a.level2:active,
.color-foo a.level2:visited:active {
        color: #0084B9; }
Run Code Online (Sandbox Code Playgroud)

sass

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

短页面上的页脚,没有超级标记或Javascript

我一直试图找出在短页面上处理页脚的最佳方法,而不使用多余的,非语义标记.我有兴趣对此非常迂腐.那么,让我们讨论一下:

最简单的选择是允许身体的背景颜色延伸到页脚之外.但是,如果你的页脚是一个不同的颜色,这可能看起来很糟糕.简单的演示

粘滞页脚需要添加一个没有语义含义的"推"元素.呸.

Javascript?荒诞.

某种人造柱?没有背景图片.

设置background-colorbodyhtml你想要的颜色footer要和全宽包装"覆盖起来" div(演示).div如果我不想要这个效果,我就不会有那些包装器.它们没有添加语义含义.

嗯.

我一直在试验新的CSS3 flexbox,我拼凑了这个.

html{height:100%;}
body{display:box; box-orient:vertical; height:100%;}
header{height:50px; background:salmon;}
section{height:50px; /*height:2000px;*/}
footer{width:100%; min-height:100px; box-flex: 1; background:lightblue;}
Run Code Online (Sandbox Code Playgroud)

它完全按照我的意愿工作.当内容太短而不能导致滚动条时,页脚会填充剩余的空间,当内容更多时,它会缩小到min-height(不理想).它适用于WebKit.Firefox处理display: box得非常奇怪.出于某种原因,你无法将元素置于中心位置display: -moz-box.Opera和IE目前都不支持flexbox.而且,它会优雅地降级,这是非常需要的.

我陷入了僵局.我能土壤和杂波我的标记,接受一些现代浏览器的一些优雅降级(通过包括 display: -webkit-box,-webkit-box-flex等),或者改变我的设计基于CSS的局限性,但我不想做任何这些妥协的.帮我.

html css css3

4
推荐指数
1
解决办法
351
查看次数

使用Datamapper在Sinatra中选择,复选框和单选按钮元素

将Datamapper与Sinatra一起使用,保存文本属性非常简单:

DataMapper::setup(:default, "sqlite3://#{Dir.pwd}/tailor.db")  
class Person  
  include DataMapper::Resource  
  property :id, Serial  
  property :name, String, :required => true
  property :height, String, :required => false
end  
DataMapper.finalize.auto_upgrade!

...

put '/:id/edit' do
  p = Person.get params[:id]
  p.name = params[:name]
  p.height = params[:height]
  p.save
end
Run Code Online (Sandbox Code Playgroud)

并且观点:

%form
  %input{:type => 'text', :name => 'name'}
  %input{:type => 'text', :name => 'height'}
  %input{:type => 'submit', :value => 'Save'}
Run Code Online (Sandbox Code Playgroud)

随着:type => 'text'它是一件轻而易举的事.但是,我在尝试property :test, Boolean, :required => false使用复选框设置boolean()时遇到了麻烦.这个问题类似,但没有解决如何做一个简单的布尔值.

另外,设置不接受任何字符串的值的最简单方法是什么,而只是一组预定义的选项 - 作为允许一个选择的选择,还是允许多个选项的一组单选按钮?

编辑:

我想出了复选框:

p.bool …
Run Code Online (Sandbox Code Playgroud)

ruby haml sinatra

4
推荐指数
1
解决办法
3792
查看次数

根据宽度添加.class到<li>元素,但添加.class后它们的宽度也会改变

您可以在http://jsfiddle.net/6gnAF/1/上看到问题

我的列表元素没什么问题.

我使用的是非常简单的无序列表;

<div>
  <ul>
    <li class='button'>Element 1</li>
    ...
    <li class='button'>Element N</li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

(列表元素的数量N在每页上都有所不同.)

div其中包含ul696 px宽度.列表元素li是水平对齐的,当它们到达div宽度的末尾时,它们会在新行上进行转换.

我想要在每一行中添加.leftli一个类,并将类添加.right到最后一行.

    $('li').each(function() {
        var liWidthOut = $(this).width();
        totalWidth += liWidthOut;
        if (totalWidth >= divWidth) {
            $(this).addClass("left");
            $(this).prev().removeClass("middle").addClass("right");
            totalWidth = liWidthOut;
        }
        else {
            $(this).addClass("middle");
        }
     });
Run Code Online (Sandbox Code Playgroud)

我用Jquery管理过,但我有点问题.

您可以在http://jsfiddle.net/6gnAF/1/上看到问题

问题是,.left.right类改变的宽度li将其加入的元素,所以有些时候,他们创造新的生产线,以及最后的li元素成为具有第一位.right的,而不是类.left.

我怎样才能解决这个问题?

(抱歉语法错误)

javascript css jquery

3
推荐指数
1
解决办法
257
查看次数

使用 Nokogiri 禁用 XML 中的 HTML 转义

我正在尝试从 Google Directions API 解析 XML 文档。

这是我到目前为止所得到的:

x = Nokogiri::XML(GoogleDirections.new("48170", "48104").xml)
x.xpath("//DirectionsResponse//route//leg//step").each do |q|
  q.xpath("html_instructions").each do |h|
    puts h.inner_html
  end
end
Run Code Online (Sandbox Code Playgroud)

输出如下所示:

Head &lt;b&gt;south&lt;/b&gt; on &lt;b&gt;Hidden Pond Dr&lt;/b&gt; toward &lt;b&gt;Ironwood Ct&lt;/b&gt;
Turn &lt;b&gt;right&lt;/b&gt; onto &lt;b&gt;N Territorial Rd&lt;/b&gt;
Turn &lt;b&gt;left&lt;/b&gt; onto &lt;b&gt;Gotfredson Rd&lt;/b&gt;
...
Run Code Online (Sandbox Code Playgroud)

我希望输出是:

Turn <b>right</b> onto <b>N Territorial Rd</b>
Run Code Online (Sandbox Code Playgroud)

问题似乎是 Nokogiri 在 xml 中转义了 html

我信任谷歌,但我认为进一步清理它也很好:

Turn right onto N Territorial Rd
Run Code Online (Sandbox Code Playgroud)

但如果没有原始 xml,我就不能(也许使用清理)。有想法吗?

ruby sinatra nokogiri

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

获取UIAlertView以响应键盘返回,结果与OK按钮相同

如果按下警告按钮,或者按下键盘上的返回键,我想运行相同的代码.

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex 适用于警报上的"确定"按钮,但我找不到返回键的等效项.

我一直在试验 - (BOOL)textFieldShouldReturn:(UITextField *)alertTextField,但没有用.

一年前,本网站评论中的三个人遇到了同样的问题,但没有回答:

如何让alertview响应键盘上的"Return",结果与点击"OK"按钮相同?我似乎无法在Google上找到适用于iOS 5 SDK的任何内容.

完成此任务所需的所有步骤是什么?

编辑:

进一步来说:

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{

    [[NSUserDefaults standardUserDefaults] setObject:[alertView textFieldAtIndex:0].text forKey:@"url_preference"];
    [[NSUserDefaults standardUserDefaults] synchronize];
}
Run Code Online (Sandbox Code Playgroud)

当用户按下OK时,将运行该代码.键盘上Return键的相似之处是什么?

目前,我正在尝试这个:

- (BOOL)textFieldShouldReturn:(UITextField *)alertTextField {
    [alertTextField resignFirstResponder];
    NSLog(@"test");
    return YES;
}
Run Code Online (Sandbox Code Playgroud)

什么也没做.

这是我的警报的定义:

-(void) noUrl {

    UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"Add a URL" message:@"Change it later in Settings" delegate:self cancelButtonTitle:nil otherButtonTitles:@"Load",nil]; //If you change button name, change it in the other alertView function …
Run Code Online (Sandbox Code Playgroud)

objective-c ios

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

允许HTML5数字输入中的特殊字符/分数

我有一个html5号码输入: <input type="number" />

我希望它接受分数和混合数,例如38 1/2以及整数和小数.

我解析了分数服务器端.

目前,当输入失去焦点时,浏览器将输入更改为38.

目前的解决方法是使用纯文本输入,但我希望type="number"在移动设备上使用特定键盘的好处.

html html5

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

标签 统计

css ×2

html ×2

ruby ×2

sinatra ×2

css3 ×1

haml ×1

html5 ×1

ios ×1

javascript ×1

jquery ×1

nokogiri ×1

objective-c ×1

sass ×1