小编Min*_*ice的帖子

如何滚动div以在ReactJS中可见?

我有一个弹出列表,其中div包含一个子列表的垂直列表div.我添加了向上/向下键盘导航以更改当前突出显示的子项.

现在,如果我按下向下键足够多次,突出显示的项目将不再可见.如果滚动视图,则向上键也会出现同样的情况.

React自动将子项滚动div到视图中的正确方法是什么?

html javascript css scroll reactjs

51
推荐指数
4
解决办法
7万
查看次数

Wordpress插件连接到REST API?

假设我在某个服务器上运行RESTful API,以及一个单独但相关的Wordpress站点.

我希望WP站点上有一些页面显示从REST服务器检索的WP页面上的数据(采用JSON格式),并允许用户查看和/或编辑WP页面上的数据.

例如,假设我有一个返回用户拥有的书籍列表的API作为REST起点.我想显示书籍列表,允许用户点击书籍链接并转到显示书籍详细信息的页面.

然后,如果用户进入"编辑模式",则允许他/她编辑数据并通过REST API将其POST/PUT返回服务器.

有没有WP插件可以让我创建显示和编辑这样的信息的页面?

我希望对于每种类型的实体,我都可以输入一些元数据来指示JSON中的内容,以及如何显示它以供查看或如何为其构建表单(如iPhorms所做的那样).

api rest wordpress plugins json

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

是否有任何HTML5 UI框架渲染到画布而不是使用HTML元素?

我意识到有些人认为在基于画布的框架中重新实现HTML的所有UI功能是疯狂的(并且有一些stackoverflow问题表明这一点),但实际上是否有人在这样的库上工作?

为了澄清,库将直接在画布上呈现所有UI元素,如编辑框,标签,按钮,组合框,列表视图等.没有HTML或CSS.

user-interface html5 frameworks canvas

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

gulp-minify-html删除空HTML属性,导致Angular应用程序出现问题

我最近将AngularJS应用程序转换为使用Browserify,同时,我从Mimosa切换到Gulp作为我的构建系统.

在处理了许多其他小问题之后,我遇到了一些问题:

  1. 使用ng-switch和ng-switch-when时,我的index.html中出现以下错误:

    Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!

  2. ng-include对我不起作用(没有错误消息,没有包含任何内容,也没有发出网络请求).

  3. 我的一个自定义属性中的代码从未被调用过,即使它显然是我原始index.html文件中HTML标记的一部分.

我花了很多时间尝试各种各样的事情,看看问题可能是什么,但最终跟踪它,如下面的答案所述.

minify angularjs ng-switch gulp angular-directive

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

为什么浮动div之后的div与浮动div重叠?

我有一个浮动的左侧边栏布局,右边是面包屑和主要内容区域.

如果在breadcrumbsContainer上检查元素(请参阅jsFiddle),您可以看到它的左边缘一直在浏览器窗口的左边缘,但我预计它将位于侧边栏的右边缘.

我看到还有其他几个类似的问题,但我还没有找到一个有相同问题或答案的问题.

这是HTML:

<div>
    <div id="sidebar">
        <div class="menuItem">Users</div>
        <div class="menuItem">Settings</div>
    </div>
    <div class="breadcrumbsContainer">
        Breadcrumbs go here
    </div>
    <div class="main">
    Main content goes here
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是CSS:

#sidebar {
    float: left;
    width: 200px;
}

.menuItem {
    height: 60px;
    border-top: 1px solid white;
    background: lightBlue;
}

.breadcrumbsContainer {
    height: 24px;
    background: lightGrey;
}

.main {
    background: #f5f5f5;
    overflow: scroll;
}
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

http://jsfiddle.net/LCdwV/2/

笔记

  • 以下.main div按我的预期定位.

  • 在简化jsfiddle的情况的同时,我发现删除溢出:从.main div滚动导致它的行为类似于breadcrumbsContainer.

  • 相反,添加overflow:scroll(overflow:hidden)到breadcrumbsContainer会导致其边界框调整到我预期的位置.

问题

  1. 为什么breadcrumbsContainer的边界框不能从我期望的地方开始,但是breadcrumbsContainer中包含的文本几乎就是我期望的那样?

  2. 设置这样的布局的"正确方法"是什么,以便breadcrumbsContainer和.main div不与侧边栏重叠,还会在浏览器窗口调整大小时调整大小?

我可以通过绝对定位和jQuery resize()事件轻松完成,但似乎没有它可能.

谢谢.

html css jquery css-float

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

在react-router中找不到嵌套路由的字体

我正在使用React,React-Router和Webpack(with webpack-dev-server),我在嵌套路由上加载自定义字体时遇到问题.

在我的浅路线上/user,一切都很好/group,等等,但是当我有一个嵌套的路线时/group/user,自定义字体不会被加载(404错误).

Webpack构建将所有字体放在根级别中(如文件名所示7f690e503a254e0b8349aec0177e07aa.ttf),并且在显示类似路径时/user,字体会正确加载.

但是,当在嵌套路径中时/group/user,浏览器会尝试/group/7f690e503a254e0b8349aec0177e07aa.ttf从不存在的URL加载字体.

我认为某处字体被假定为相对路径,但我不知道在哪里.

如何使字体路径成为绝对路径而不是相对路径?或者还有另一种解决方法吗?

不确定是否重要,但我已经在我的styles.less文件中定义了我的字体,如下所示:

// Main font(s)
@font-face {
  font-family: 'Lato-Regular';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
}
Run Code Online (Sandbox Code Playgroud)

fonts nested-routes reactjs webpack react-router

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

我可以每1-2分钟运行一次PostgreSQL真空吸尘器吗?

我正在考虑为即将到来的项目提供各种支持MVCC的数据库,PostgreSQL出现在我的雷达上.

我的程序的要求涉及大致如下的序列:

  1. 从当前版本的数据库中读取一些信息,修改80-90%的数据并将其写回一个或多个事务中(想象一下像是在Conway的生命游戏中更新网格,其中包括网格的新旧状态是必要的).

  2. 提交后等待1-2分钟.在此期间,客户端可以针对新数据发出读取.

  3. 重复.

数据库将限制为2-4GB.

~90%的更改是对现有对象的更新,~5%将是新对象,~5%将被删除对象.

所以我的问题是,我可以合理地每1-2分钟运行一次普通的VACUUM命令作为步骤1.5,并且让PostgreSQL能够跟上每次可能发生的2-3 + GB的更改吗?

postgresql performance mvcc vacuum

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

将Google App Engine实体密钥传递到网页以维护上下文是否安全?

我有一个简单的GAE系统,其中包含Account,Project和Transaction的模型.

我正在使用Django生成一个网页,其中包含属于给定帐户的表中的项目列表,我想创建指向每个项目详细信息页面的链接.我正在生成一个链接,将Project的键转换为字符串,并在链接中包含该链接,以便于查找Project对象.这给出了一个如下所示的链接:

<a href="/project?key=agxkZAB-bnVpY2VrbXRyDDsSBkNvdXBvbhgBDA">My Project Name</a>
Run Code Online (Sandbox Code Playgroud)
  1. 创建这样的链接是否安全?有没有更好的办法?保持背景感觉是一种糟糕的方式.

  2. 键字符串显示在链接页面中并且很难看.有没有办法避免显示它?

谢谢.

python google-app-engine entity key google-cloud-datastore

3
推荐指数
2
解决办法
1837
查看次数

重叠 SVG 元素的鼠标处理未按预期工作

我有几个 SVG 路径元素,每个元素都位于父 svg 元素内,如下所示:

<svg class="connector" style="position:absolute;left:277.5px;top:65px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>

<svg style="position:absolute;left:277.5px;top:109px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="108.5px" width="410.015625px">
  <path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>
Run Code Online (Sandbox Code Playgroud)

svg 元素(及其子路径)在视觉上是重叠的。

我想要有悬停效果,所以我在每个路径上设置了 mouseenter 和 mouseleave 事件。

当鼠标位于不重叠的区域上方时,悬停会按预期工作,但是,当鼠标位于 svg 元素的边界矩形重叠的区域上方时,鼠标事件不会正确触发。

但是,如果我将相同的两个路径元素放入单个 svg 中,如下所示,则鼠标悬停将按预期工作,即使边界矩形重叠也是如此。

<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 …
Run Code Online (Sandbox Code Playgroud)

javascript mouse svg path hover

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