我有一个React组件,我想从文件中加载我的JSON数据.控制台日志当前不起作用,即使我将变量数据创建为全局变量
'use strict';
var React = require('react/addons');
// load in JSON data from file
var data;
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "data.json", true);
oReq.send();
function reqListener(e) {
data = JSON.parse(this.responseText);
}
console.log(data);
var List = React.createClass({
getInitialState: function() {
return {data: this.props.data};
},
render: function() {
var listItems = this.state.data.map(function(item) {
var eachItem = item.works.work;
var photo = eachItem.map(function(url) {
return (
<td>{url.urls}</td>
)
});
});
return <ul>{listItems}</ul>
}
});
var redBubble = React.createClass({ …Run Code Online (Sandbox Code Playgroud) 我刚刚从JQuery Cycle转移到FlexSlider插件,并且真的很难让以下部分工作:
我在列表项中有多个图像,这些图像连接起来显示为一个大图像.我想关闭缓和,以便它以相同的速度不断滚动水平.
连续默认动画会移动缓慢,但有上一个/下一个箭头,我希望动画加速,当你点击它时转到下一个列表项,这可能吗?!
我希望滚动可以在悬停时暂停中间动画.如果使用"pauseOnHover"选项,它将一直等到滚动到下一张幻灯片暂停.
如果有人能帮我解决上述任何问题,我将非常感激.这是我的代码
$('.flexslider').flexslider({
animation:'slide',
easing:'linear',
controlNav: false,
useCCS:false,
animationSpeed: Modernizr.touch ? 400 : 10000,
pauseOnHover: true,
slideshowSpeed:1000,
animationSpeed:10000,
});
Run Code Online (Sandbox Code Playgroud)
我的HTML基本上就是你在插件示例中看到的 - 我没有调整任何东西.
再一次,非常感谢任何帮助!
我似乎无法找到答案.基本上,我创建了包含图像的按钮.将鼠标悬停在按钮上时 - 当前会出现蓝色边框.我想在图像上创建自己的悬停状态,所以我不需要蓝色边框 - 这就是推出间距.有谁知道如何删除它?
<Button Style="{StaticResource EventButton}">
<Image Source="/Assets/EventIcons/Business/event-Fire.png" Stretch="Fill"/>
</Button>
Run Code Online (Sandbox Code Playgroud)
我的风格:
<Style x:Key="RiskButton" TargetType="Button">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Margin" Value="4,4,4,4"/>
<Setter Property="Width" Value="120"/>
<Setter Property="Height" Value="120"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
Run Code Online (Sandbox Code Playgroud)
谢谢你的帮助!
有没有人知道是否有设置将柱式排水沟只放在一侧?目前它在色谱柱的每一侧增加了一半,因此,例如,如果您想要一个14px色谱柱装订线,则每侧会增加7个像素.这会导致一行中的第一列具有7px缩进.
我可以使用额外的CSS破解它,但如果可以,我宁愿在默认设置中更改它.
我正在使用"for"循环调用服务,并希望等到我完成之后再转到下一页(路由),所以数据在加载之前都存在,我不知道该怎么做.
这是我的服务:
.service("OrdersService", function($http, $rootScope, $location) {
var getData = {};
getData.eachOrder = function(id){
var url = '/service/rest/orders';
return $http.get(url+'/'+id)
.success(function(data) {
getData.allOrders(data);
}).
error(function (data, status, headers, config) {
console.error('Error fetching feed:', status, headers, config);
});
};
getData.allOrders = function(data){
$rootScope.ordersTotal = $rootScope.ordersTotal || [];
$rootScope.ordersTotal.push(data);
};
});
Run Code Online (Sandbox Code Playgroud)
这是我的循环
$scope.viewDetails = function(data){
for(var i = 0; i < $scope.checkedIds.length; i++){
if($scope.checkedIds[i]){
OrdersService.eachOrder(i);
}
}
// here's where I'd like to wait until loop finished before changing location
$location.path('/details');
}; …Run Code Online (Sandbox Code Playgroud) 我试图在同一个组件中导入和显示多个 SVG,但它实际上只是显示每次重复的第一个,而不是两个单独的 SVG。这是我的代码:
import React, { Component } from 'react';
import Account from '-!svg-react-loader!./svg/Account.svg';
import Alert from '-!svg-react-loader!./svg/Alert.svg';
<div className="col-lg-1">
<Account className="icon" />
</div>
<div className="col-lg-1">
<Alert className="icon" />
</div>
Run Code Online (Sandbox Code Playgroud)
我们可以每页只有一个 SVG 实例吗?
我已经设置了一个keydown函数,我想做不同的事情,这取决于是否按下了向左,向右,向上或向下箭头键.这是使用switch语句,但我也想在按下任何箭头键时执行某些操作,但无法弄明白.我的代码:
$(document).keydown(function (e) {
var keyCode = e.keyCode || e.which,
arrow = {left: 37, up: 38, right: 39, down: 40 },
switch (keyCode) {
case arrow.left:
// do something left
break;
case arrow.right:
// do something right
break;
}
});
Run Code Online (Sandbox Code Playgroud)
我真的只想要一行代码,我可以检查是否按下了任何箭头键,但无法弄明白,例如:
case arrow:
// do something for any arrow keys
break;
Run Code Online (Sandbox Code Playgroud)
只使用"案例箭头似乎不起作用.有人可以帮忙吗?
提前致谢!
编辑:感谢大家的帮助.这是我的最终代码,对于任何寻找的人:
$(document).keydown(function (e) {
if (e.which >= 37 && e.which <= 40) {
$('p.key-notification').fadeOut('slow');
}
var keyCode = e.keyCode || e.which,
arrow = {left: 37, up: 38, …Run Code Online (Sandbox Code Playgroud) 我正在使用此脚本来验证是否有人在进入生日时超过16岁.问题是,它只能以当前的年度准确度进行验证,所以如果有人今年年满16岁但仍然是15岁,那么它仍然会通过.
任何人都可以告诉我如何验证当天,Date()javascript函数在线没有足够的信息.
我的代码:
$.validator.addMethod("check_date_of_birth", function(value, element) {
var dateOfBirth = $("#dob").val();
var arr_dateText = dateOfBirth.split("/");
day = arr_dateText[0];
month = arr_dateText[1];
year = arr_dateText[2];
var mydate = new Date();
mydate.setFullYear(year, month-1, day);
var currdate = new Date();
var totalage = (currdate.getFullYear()) - (mydate.getFullYear());
if (totalage < 16){
$.validator.messages.check_date_of_birth = "Sorry, only persons over the age of 16 can be covered";
return false;
}
return true;
});
Run Code Online (Sandbox Code Playgroud) javascript ×3
jquery ×3
reactjs ×2
ajax ×1
angularjs ×1
arrow-keys ×1
css ×1
date ×1
easing ×1
flexslider ×1
for-loop ×1
grid-layout ×1
json ×1
svg ×1
validation ×1
windows-8 ×1
xaml ×1