小编big*_*ile的帖子

我想创建一个响应式网站.如果浏览器是移动大小的,则应使用iPhone样式列表视图显示内容如果浏览器是桌面大小的,则应使用选项卡显示内容:

这样做的最佳方式是什么？ 我不想为Mobile/Desktop使用单独的文件.我希望它能够做出回应.

以下是我所做的一些研究.

尝试1:纯CSS解决方案.

纯CSS解决方案是最好的,因为CSS提供了媒体查询,可以轻松地在布局之间切换.CSS提供了创建选项卡的方法.但它似乎没有为iPhone风格列表提供方法.(您几乎可以使用手风琴列表伪造它,但这并不会将用户带到像真正的iPhone应用程序那样的单独页面).

尝试2:Jquery解决方案(见小提琴)

• Jquery Mobile提供了一种创建iPhone样式列表视图的简便方法
• Jquery UI提供了一种创建选项卡的简便方法.
• Enquire.js为媒体查询提供了Javascript等价物.

在这个小提琴中,我试图将Jquery Mobile和Jquery Ui结合起来.Enquire.Js用于根据屏幕调用必要的库.

调用库时,它将改变dom结构.因此,必须删除不需要的库,否则如果用户重新调整浏览器的大小(即在移动桌面之间切换),则未使用的库将破坏被调用库的原因冲突.

在我的小提琴中,我试图这样做,但它似乎不起作用:

$(document).ready(function() {

        enquire.register("screen and (max-width: 600px)", function() {
    $('script[src~="jquery-ui.js"]').remove();
    $('link[rel=stylesheet][href~="jquery-ui.css"]').remove();    
     $('head').append('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />');    
     $('head').append('<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><\/script>');   
        $("#tabs").tabs("destroy");            
    }).listen();


       enquire.register("screen and (min-width: 601px)", function() {
    $('script[src~="jquery.mobile-1.0a3.min.js"]').remove();
    $('link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]').remove();    
    $('head').append('<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />');        
     $('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');    
    $("#tabs").tabs();

    }).listen();

});

即使删除了未使用的库,也会导致新库发生冲突.此外,您必须在调用任何布局之前重新调整浏览器的大小.如果用户未重新调整浏览器大小,则内容将不会被设置为样式.

尝试3:Dom克隆(见小提琴)

此尝试类似于尝试2,除了在页面加载时它将DOM存储在变量中.然后,当用户重新调整浏览器大小时,现有DOM将替换为存储的DOM.我在这里遵循方法大纲,但它似乎不起作用.dom被删除而不是被替换.

我很感激任何有用的,因为我一直在撕扯我的头发找到解决方案!(我知道我已经提出了类似的问题,但我觉得这个新问题不同,足以保证一个新帖子.)

尝试4:动态分配数据属性

Jquery mobile使用标记中的数据属性来使脚本工作.我已经尝试动态应用它们,因此只有当浏览器处于移动大小时才会将它们写入文档.但是,当重新调整浏览器大小时,桌面选项卡仍然会损坏.

在我的网站上,我有两个输入字段:标题和股票代码.我有两个目标:

1. 当用户在标题字段中输入文本时,应将标题字段中的文本复制到股票代码字段.

2. 我还希望在复制过程中删除非字母数字字符.

我发现本教程解释了如何实现第一个目标.这是我的工作示例:

http://jsfiddle.net/2gezC/1/

对于第二部分,我发现很难找到关于在Jquery中剥离字符的教程,因为大多数教程都是针对JavaScript的.

我找到了本教程,并尝试将其集成到我的代码中,如下所示:

(function ($) {
    $(document).ready(function () {

        $('input#edit-title-fragment').keyup(function () {
            var str = $(this).val();
            str = str.replace(/[^a-zA-Z 0-9]+/g, '');
            var txtClone = $(this).val();
            $('input#edit-sku-fragment').val(txtClone);
        });
    });

})(jQuery);

但是,它不起作用.有人能告诉我我做错了什么.谢谢!

在我的 SCSS 中，我对不同类型的样式使用不同的部分。

例如

_buttons.scss

.btn {
    background:red;
}

@media only screen and (min-width: 768px) {
    .btn {
        font-size:10px;
    }
}

@media only screen and (min-width: 992px) {
    .btn {
        font-size:20px;
    }
}

_slideshow.scss

.slideshow {
    background:green;
}

@media only screen and (min-width: 768px) {
    .slideshow {
        font-size:12px;
    }
}

@media only screen and (min-width: 992px) {
    .slideshow {
        font-size:24px;
    }
}

屏幕.scss

@import "buttons";
@import "slideshow";

以这种方式使用部分可以更容易地在项目之间重用代码。例如，如果我有一个不需要幻灯片的项目，我可以省略_slideshow.scss。

这种方法的缺点是媒体查询位（例如@media only screen and）在最终的 CSS 中会重复多次，这会很快导致代码臃肿。

无论如何我可以保持我的部分原样，但告诉 scss 在输出中将它们组合在一起，所以所有 min-width: …

在我的网站上,我有一个搜索框(文本输入字段).当用户点击它并开始键入文本时,会出现一个链接菜单.菜单通过JQuery显示 - 以下命令使菜单显示:

".focus(function() {
    $("#instant_search_wrapper").show();
}); "

当用户点击搜索框时,我希望菜单消失.

最简单的方法是使用以下命令:

".blur(function() {
    $("#instant_search_wrapper").hide();
});" 

但是,如果我这样做,那么当用户点击菜单中的链接时,文本输入字段会失去焦点,因此菜单会在用户进入选择页面之前消失.当搜索字段失去焦点时,我怎样才能使菜单消失(但如果用户在搜索字段失去焦点之前点击链接,他/她仍然可以被带到链接)？

我想将DOM重置为原始状态,然后再次操作它.

我发现最好的方法如下:

// Clone the Dom and assign it to a variable
divClone = $("#document").clone();

// .... More Code ......

// When required, replace the DOM with with the cloned variable. 
       $("#document").replaceWith(divClone);   

唯一的问题是你不能再次操纵新重置的DOM.

我已经整理了一个JSFiddle,它使用了一个添加类的简单示例.您可以单击"测试"链接添加一个类.然后,您可以单击"重置"以将DOM恢复为其原始状态.但是,如果再次单击"测试"链接,则不会再向已还原的DOM添加类.(显然,这只是一个简化的例子.有更好的方法来删除和添加类).

如何操作恢复的DOM？

我正在使用Susy构建移动第一个网站,并希望针对不同的屏幕尺寸使用不同的布局.每个布局都有自己的列,列宽和装订线宽度.

我该怎么做呢？

1.老苏西方法

在老Susy,你会这样做:

$base-font-size: 10px;
$show-grid-backgrounds  : true;


$total-columns       : 4;
$column-width        : 6.250em;
$gutter-width        : 1em;
$gutter-padding      : $gutter-width;

body {
background:pink;    
}


@media only screen and (min-width: 480px) {
$total-columns       : 3;
/*$column-width        : 12.567em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:yellow;  
}


}

@media only screen and (min-width: 600px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:blue;    
}

}

@media only screen and (min-width: 768px) …

我想在视图中添加一个Jquery插件.但是,我不想通过.info文件添加,因为我不想在每个页面上添加它.我也不想将它添加到视图的标题或创建view.tpl.php文件.

此页面显示如何通过template.php将Java脚本添加到节点.反正有没有做类似的事情通过template.php文件将Java脚本添加到视图？

我正在制作执行以下操作的Illustrator CS6 Javascript：

1. 打开Illustrator文件的文件夹
2. 打开文件夹中的每个文件（这些文件称为源文件）
3. 选择源文件的所有内容
4. 复制源文件的内容
5. 创建一个新的目标文件将这些内容作为新层粘贴到目标文件中
6. 确保新层与旧源文件具有相同的名称

我的脚本有效，除了它不能正确遍历源文件夹中的文件。相反，它可以在第一个源文件上正常运行。但是随后，它无休止地只是将第二个源文件粘贴到目标文档中（即，它不会移动到任何其他源文件上）。它只是无休止地粘贴，所以我不得不强行退出！

我如何才能使其正确循环浏览文件夹，然后移至下一个文件。

这是我的代码：

// JavaScript Document
//Set up vairaibles
var destDoc, sourceDoc, sourceFolder, newLayer;

// Select the source folder.
sourceFolder = Folder.selectDialog('Select the folder with Illustrator files that you want to mere into one', '~');
destDoc = app.documents.add();

// If a valid folder is selected
if (sourceFolder != null) {
    files = new Array();

    // Get all files matching the pattern
    files = sourceFolder.getFiles();

    if (files.length > 0) {
        // Get …

我正在尝试使用指南针动画,但它似乎不起作用.

以下是我的文件设置方式:

Config.rb

# Require any additional compass plugins here.
require 'animation'

Screen.scss

@import "compass";
@import "compass/reset";
@import "animation";
@import "animation/animate";
@import "animation/animate/classes";


.widget:hover {
    @include animation(flipOutY);
    background:pink;
}

body {
    background:red;
}

的index.html

<a href="#" class="widget">Click Me</a>

这是我的CSS的输出:

@-moz-keyframes flipOutY {
  /* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
  0% {
    -moz-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1; }

  /* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
  100% {
    -moz-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; } …

我经常使用mixins来存储代码块.例如:

   @mixin ui-spot-badges($ui-spot-badges: ui-spot-badges) {

    .#{$ui-spot-badges} {   
  position:relative; 
    @content;

    &:after {
    content:""; 
position:absolute;
background:red;
    }
    }

    }

    @include ui-spot-badges(myclass); 

如何将多个课程传入mixin.例如

  @include ui-spot-badges(myclass, myclass2); 

要得到

.myclass, myclass2 {
  position:relative; 
}

.myclass:after, .myclass2:after {
    content:""; 
position:absolute;
background:red;
}