我需要将数字转换为单词,所以:
这些数字是在一个循环中产生的,它应输出一群不同的类名等的one-third或one-half:
$number = 3;
@for $i from 1 through $number-1 {
// some calculations to output those classes: ".one-third", ".two-thirds"
// The following currently outputs class names like ".1-3" and ".2-3"
.#{$i}-#{$number} {
// CSS styles
}
}
我想我需要使用两个不同的关联数组,在PHP中(仅作为示例)可能看起来像:
$1 = array(
"1"=>"one",
"2"=>"two",
"3"=>"three"
);
$2 = array(
"1"=>"whole",
"2"=>"half",
"3"=>"third"
);
是否可以在SASS/SCSS中创建关联数组或是否有任何解决方法？
我已经开始使用BEM方法来解耦我的HTML和CSS ...并且它在大多数情况下运行良好.即使只是你的个人意见,我仍然想知道别人如何处理这个问题:
我们假设我们需要构建一个简单的导航.HTML看起来类似于
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href=""></a>
</li>
<li class="nav__item">
<a class="nav__link" href=""></a>
</li>
</ul>
</nav>
我不确定我是否需要".nav_ item"和".nav _link",或者如果使用它代替它是更好的实践
.nav__list > li { CODE }
但我真正的问题是如何处理"主动"类(不仅仅是导航,而是一般).是否更好地使用特定的"活动"类,如".nav_ item - active",因此您可以在CSS文件中使用单个类,或者使用更多通用类名如".is-active"更好？但是你需要在你的CSS文件中指定你的类,比如".nav _item.is-active"或者(看起来对我来说更糟)".nav__list> .is-active".
每种方法都有其缺点.对我来说,如果使用BEM,第二种方式看起来是错误的,但如果你是第一种方式,你会遇到JS的"麻烦",因为你需要将特定的类名"硬编码"到你的JS中
someElement.addClass(".nav__item--active");
那样你的JS过分依赖你的HTML结构(或者这不重要吗？),这可能会改变......这导致了第二个问题.我听说不仅要解析你的HTML和CSS,还要解决你的HTML和JS问题.因此,您可以使用这些".js-"类将单击事件和所有类型的东西添加到元素中,而不是使用"样式"类来触发这类事件.所以不要使用
<button class="btn btn--large"></button> // $(".btn--large") in jQuery
你将会拥有
<button class="btn btn--large js-dostuff"></button> // $(".js-dostuff") in jQuery
我认为这与HTML5数据属性相结合几乎适用于任何事情,但我问自己导航或手风琴或类似的东西会发生什么.对于可维护性来说,使用那些".js-"类是否更好(对于每个项目)
<nav class="nav">
<ul class="nav__list">
<li class="nav__item js-open-subnav">
<a class="nav__link" href=""></a>
<ul class="nav__sub">
<!-- ... -->
</ul>
</li>
</ul>
</nav>
或者我应该在我的JS中使用$(".nav__item")...在这种情况下？但是这样你并没有真正解耦你的HTML和JS(至少就我理解这个话题而言).这不仅仅是关于导航,而是关于所有那些javascript交互,如手风琴,滑块等.
我希望你们能分享这些问题的最佳实践并帮助我.
谢谢
我有一个存储库,有两个分支(master和gh-pages).我的master分支的文件夹结构如下所示:
/dist
/js
/css
/other-folders
在我的gh-pages分支中,我有一个_include包含一些文件的文件夹.我想与我的分支在/dist/css和/dist/js文件夹中共享我的代码gh-pages,以便我的gh-pages文件夹结构如下所示:
/_include
/js
/css
要么
/_include
/dist
/js
/css
git可以这样吗？我不能只使用
git subtree push --prefix dist origin gh-pages
因为那只会复制/dist到/dist我的gh-pages分支中的另一个文件夹
我刚看到http://csswizardry.com/2013/02/introducing-csswizardry-grids/和它的演示(http://csswizardry.com/csswizardry-grids/).我认为这是解决CSS中网格的一种非常好的方法.所以我检查了源代码,看看它是如何完成的,我看到了一个小东西,我无法弄清楚它是如何完成的.
这个网格系统不是使用浮点数而是使用内联块元素,这是一件好事.但每次我使用内联块的百分比宽度列/网格等我有这个内联块间距.我知道有几种方法(主要是HTML中的更改)来摆脱这种间距:http://css-tricks.com/fighting-the-space-between-inline-block-elements/
但是在网格系统中我向你展示了没有那些修复(据我所见),如果检查源代码,仍然没有内联块间距.只是为了向您展示我在这里主要有的问题是一个快速的小提琴:http://jsfiddle.net/nN8mV/
HTML
<p>Floating columns (width 33.3%)</p>
<div class="grid cf">
<div class="grid__item">Test</div>
<div class="grid__item">Test</div>
<div class="grid__item">Test</div>
</div>
<p>Inline Block columns (width 33.3%)</p>
<div class="grid grid--inlineblock">
<div class="grid__item">Test</div>
<div class="grid__item">Test</div>
<div class="grid__item">Test</div>
</div>
CSS
.grid {
margin-bottom: 20px;
}
.grid__item {
float: left;
width: 33.3%;
background: red;
}
.grid--inlineblock .grid__item {
float: none;
display: inline-block;
}
您可能知道,但由于这种间距,33.3%的宽度不起作用.网格系统似乎没有这个问题,尽管它也使用"display:inline-block".所以我的问题:CSS Wizardy如何解决这个问题？我无法理解并且改变HTML(参见上面的CSS Tricks链接)并不经常工作,因为CMS生成的内容或其他东西,你无法适应你的HTML.
在此先感谢您的帮助.
到目前为止,我使用Revealing Module Pattern来构建我的Javascript,如下所示:
var module = (function() {
var privateVar;
// @public
function publicFunction( ) {
}
return {
publicFunction: publicFunction
}
})();
虽然这段代码按预期工作,但我最近读到一篇文章,如果你有多个实例,这个模式使用大量内存,并且与其他模式相比,它有一些速度问题.由于我喜欢使用这种模式,我在没有所有这些"问题"的情况下搜索了类似的模式,并且我遇到了Revealing Prototype Pattern.据我所知,JavaScript的Prototype具有更好的内存管理.
现在我想知道使用Revealing Prototype Pattern是否更快/更好的内存？这个基准让我感到惊讶,因为模块模式似乎要快得多.有什么缘故吗？
另外,我无法弄清楚如何使用Revealing Prototype Pattern创建多个实例(与上面的Revealing Module Pattern Fiddle相比):
var prototypeModule = function( el ) {
this.init( );
};
prototypeModule.prototype = function () {
var privateVar;
// @public
function init( ) {
}
return {
init: init
}
}();
我究竟做错了什么？
有没有办法告诉flexbox项目填充剩余的空间,但是一旦它们变得比它们的内容小,就会换行.
但是有些项目具有固定的百分比宽度.
HTML
<div class="grid">
<div class="grid__item">column auto</div>
<div class="grid__item one-third">column 33.333%</div>
<div class="grid__item one-third">column 33.333%</div>
<div class="grid__item">column auto</div>
</div>
CSS
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: gray;
}
.grid__item {
background: red;
flex: 1;
}
.one-third {
flex-basis: 33.333%;
background: green;
}
我希望固定宽度项目(绿色)的宽度始终为33.333%.其他项目(红色)应填充剩余空间.如果屏幕变小,我希望在没有足够空间展示其内容时将项目换行.
我以为我可以简单地在容器上使用flex: 1和flex-wrap: wrap做这样的事情,但正如你可能在笔中看到它根本不包装.如果我删除flex: 1在.grid__item他们那种包裹,但并不是所有的方式,以非常小的屏幕尺寸.
我写了一个小脚本,它从JSON文件中加载Google Maps标记并将它们放在地图上.该脚本应该能够处理多个实例.目前脚本看起来像这样(用于测试我使用此JSON文件):
<div id="map" data-file="test.json" style="width: 200px; height: 200px; "></div>
<div id="map2" data-file="test2.json" style="width: 200px; height: 200px; "></div>
<!-- JAVASCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var googleMaps = function() {
var $el,
apiLoaded = false;
// Init
// @public
function init(el) {
$el = $(el);
loadData($el.data('file'));
};
// Creating a marker and putting it on the map
// @private
function createMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.title
});
} …我正在制作一个可访问的手风琴，但我不太确定为什么以下代码不能与 VoiceOver 一起正常工作：
<ul class="accordion" role="tablist">
<li class="accordion__item">
<h3 class="accordion__head" id="tab1" tabindex="0" role="tab" aria-controls="panel1">Headline</h3>
<div class="accordion__content" id="panel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="true">
Content
</div>
</li>
<li class="accordion__item">
<h3 class="accordion__head" id="tab2" tabindex="0" role="tab" aria-controls="panel2">Headline</h3>
<div class="accordion__content" id="panel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">
Content
</div>
</li>
VoiceOver 总是说诸如“tab 1 of 1 Heading 1...”之类的话，尽管role="tab"我的.accordion. 所以我尝试删除每个.accordion__item并最终得到类似的结果：
<div class="accordion" role="tablist">
<h3 class="accordion__head" id="tab1" tabindex="0" role="tab" aria-controls="panel1">Headline 1</h3>
<div class="accordion__content" id="panel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="true">
Content 1
</div>
<h3 class="accordion__head" id="tab2" tabindex="0" role="tab" aria-controls="panel2">Headline 2</h3> …我创建了一个简单的函数,它根据当前滚动位置设置动画值.
function scrollTransition(startValue, endValue, initScroll, distance, scrollTop) {
var
min = Math.min,
max = Math.max,
sum;
if(startValue > endValue) {
sum = min(max((endValue - startValue) / distance * (scrollTop - initScroll) + startValue, endValue), startValue);
} else {
sum = min(max((endValue - startValue) / distance * (scrollTop - initScroll) + startValue, startValue), endValue);
}
return sum;
}
您所要做的就是设置起始值和结束值,初始滚动位置,转换开始时和距离(以px为单位).因此,如果"initScroll"为500且距离为200,则转换结束于700px(scrollTop)."问题"是,它只是一个线性动画.我想要做的是在函数中添加第五个参数("缓动"),就像在jQuery .animation()函数中一样.
这些是我正在讨论的缓动函数(https://github.com/danro/jquery-easing/blob/master/jquery.easing.js),但我不确定,如何将它们添加到此函数中,所以我可以使用类似的东西
// in window scroll function
$el.css({
"margin-top" : scrollTransition(-300, 500, 500, 1000, "easeOutBack")
});
这样的事情是可能的还是我必须坚持线性过渡？
在此先感谢您的帮助和时间.
我正在努力缩短网址.我基于这一个https://github.com/phpmasterdotcom/BuildingYourOwnURLShortener并且或多或少地使用该函数来创建短代码,因为我自己无法提出算法:
<?php
convertIntToShortCode($_GET["id"]); // Test codes
function convertIntToShortCode($id) {
$chars = "123456789bcdfghjkmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ";
$id = intval($id);
if ($id < 1) {
echo "ERROR1";
}
$length = strlen($chars);
// make sure length of available characters is at
// least a reasonable minimum - there should be at
// least 10 characters
if ($length < 10) {
echo "ERROR2";
}
$code = "";
while ($id > $length - 1) {
// determine the value of the next higher character
// in …假设我们有这样一张桌子
<table>
<tr>
<th>TH</th>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</table>
如果我想获得JS中的列数,我可以简单地做一些事情
var columnCount = tableElement.tBodies[0].rows[0].cells.length
在这种情况下,输出是4.有没有办法找出<th>表格行中有多少,所以该示例的输出是3？
我想知道,如果有办法让jQuery Deferred使用Google Geocoder.我尝试过类似的东西:
// ...
_geocoder: function( address ) {
if ( !this.props.geocoder ) {
this.props.geocoder = new google.maps.Geocoder();
}
var deferred = $.Deferred(),
geocoder;
geocoder = this.props.geocoder.geocode( { 'address': address }, function( results, status ) {
if ( status === google.maps.GeocoderStatus.OK ) {
deferred.resolve({
lat: results[ 0 ].geometry.location.k,
lng: results[ 0 ].geometry.location.A
});
} else {
deferred.reject();
}
return deferred.promise();
});
$.when( geocoder() ).then(
function( data ) {
alert( status );
},
function() {
alert( "Defer rejected" );
} …