小编Des*_*ond的帖子

将本地文件中的json数据加载到React JS中

我有一个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)

javascript ajax json xmlhttprequest reactjs

60
推荐指数
6
解决办法
16万
查看次数

Jquery FlexSlider连续运动(关闭缓动看起来像滚动自动收报机)

我刚刚从JQuery Cycle转移到FlexSlider插件,并且真的很难让以下部分工作:

  1. 我在列表项中有多个图像,这些图像连接起来显示为一个大图像.我想关闭缓和,以便它以相同的速度不断滚动水平.

  2. 连续默认动画会移动缓慢,但有上一个/下一个箭头,我希望动画加速,当你点击它时转到下一个列表项,这可能吗?!

  3. 我希望滚动可以在悬停时暂停中间动画.如果使用"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基本上就是你在插件示例中看到的 - 我没有调整任何东西.

再一次,非常感谢任何帮助!

jquery easing flexslider

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

按钮悬停时XAML Windows 8应用程序蓝色边框

我似乎无法找到答案.基本上,我创建了包含图像的按钮.将鼠标悬停在按钮上时 - 当前会出现蓝色边框.我想在图像上创建自己的悬停状态,所以我不需要蓝色边框 - 这就是推出间距.有谁知道如何删除它?

<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)

谢谢你的帮助!

xaml windows-applications windows-8

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

更改Zurb Foundation网格列,以便仅在一侧填充

有没有人知道是否有设置将柱式排水沟只放在一侧?目前它在色谱柱的每一侧增加了一半,因此,例如,如果您想要一个14px色谱柱装订线,则每侧会增加7个像素.这会导致一行中的第一列具有7px缩进.

我可以使用额外的CSS破解它,但如果可以,我宁愿在默认设置中更改它.

css grid-layout zurb-foundation

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

对于使用Angular服务的循环,请等到完成后再转到下一页

我正在使用"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)

javascript for-loop angularjs

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

一个页面上可以有多个 SVG 吗?(使用 svg-react-loader)

我试图在同一个组件中导入和显示多个 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 实例吗?

javascript svg reactjs svg-react-loader

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

JQuery,检查箭头键按下的swith语句

我已经设置了一个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)

jquery switch-statement arrow-keys

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

对于jquery.validate,按出生日期检查确切日期

我正在使用此脚本来验证是否有人在进入生日时超过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)

validation jquery date

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