小编Ale*_*ler的帖子

将点击转换为悬停事件javascript

我试图在悬停汉堡棒时动画,我在网上找到了一个例子并设法让它在mouseenter上运行,但是我希望它在鼠标离开汉堡栏后返回汉堡栏.

这是代码,因为你可以看到mouseenter工作,但是当我移动鼠标时,我希望它回到汉堡栏并且不能保留为X.

(function() {"use strict";
  var toggles = document.querySelectorAll(".c-hamburger");
  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles[i];
    toggleHandler(toggle);
  };
  function toggleHandler(toggle) {
    toggle.addEventListener("mouseenter", function(e) {
      e.preventDefault();
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active"): this.classList.add("is-active");
    });
  }
             
})();
Run Code Online (Sandbox Code Playgroud)
.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 66px;
  height: 55px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.c-hamburger:focus {
  outline: …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

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

如何限制p:dataTable中列的宽度,没有换行,保持单行?

我一直在使用Primefaces很难,所以SO是我找到问题答案的最佳位置.

我有p:dataTable很多列,所以每个列都应该有很短的宽度.对于标题,它们似乎没问题,但对于数据列,它们会分为2行或更多行,这是我不喜欢的.

我将第一列的宽度设置得更大,以显示数据表中的内容.标题文本很好,保持单行.但数据列对我不利.我更喜欢他们保持单线.我不希望换行.椭圆是优选的,但不是强制性的.

<p:dataTable id="searchResultTable" var="searchData" value="#{registerBean.searchDataList}"
        scrollHeight="200"
        rowIndexVar="rowIndex"
        rowKey="#{searchData.model}"
        selectionMode="single"
        selection="#{registerBean.selectedSearchData}"
        paginator="true" rows="10"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="5,10,20" resizableColumns="true">
        <p:ajax event="rowSelect" listener="#{registerBean.onSelectedSearchData}"/>
    <p:column headerText="#{registerBean.getSearchResultHeaderText(0)}"
              width="30" style="height: 10px; font-size: 8pt;">
        <h:outputText value="#{registerBean.getSearchResultText(rowIndex,0)}" />
    </p:column>
    <p:column headerText="#{registerBean.getSearchResultHeaderText(1)}"
              width="30" style="10px; height: 10px; font-size: 8pt;">
        <h:outputText value="#{registerBean.getSearchResultText(rowIndex,1)}" />
    </p:column>
    <p:column headerText="#{registerBean.getSearchResultHeaderText(2)}"
              width="30" style="10px; height: 10px; font-size: 8pt;">
        <h:outputText value="#{registerBean.getSearchResultText(rowIndex,2)}" />
    </p:column>
Run Code Online (Sandbox Code Playgroud)

我用于h:outputText每一列.我不坚持h:outputText,我可以使用Primefaces的任何组件都可以.

提前致谢.

primefaces

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

工作服github整合(与qunit,istanbul,grunt)

我在让工作服上班时遇到问题.我在这里创建了一个简单的项目.

它似乎正在正确地输出报告,但我肯定错过了某个地方,因为工作服不会看到我的设置.没有分支显示,它只是给出了如何设置它的说明.我试图复制qunit正在做什么,因为他们显然有它的工作.

这是我到目前为止所做的.

创建了使用node/grunt/qunit以及工作服帐户并在项目上切换的项目.我已经用这个替换了部分中的qunit引用.devDependenciespackage.json

"grunt-coveralls": "0.3.0",
"grunt-qunit-istanbul": "^0.4.0"
Run Code Online (Sandbox Code Playgroud)

我已将此添加到我的package.json.

"scripts": {
    "ci": "grunt && grunt coveralls"
}
Run Code Online (Sandbox Code Playgroud)

我已经添加了这个配置对于qunit我的Gruntfile.js.

options: {
    timeout: 30000,
    "--web-security": "no",
    coverage: {
        src: [ "src/<%= pkg.name %>.js" ],
        instrumentedFiles: "temp/",
        coberturaReport: "report/",
        htmlReport: "build/report/coverage",
        lcovReport: "build/report/lcov",
        linesThresholdPct: 70
    }
},
Run Code Online (Sandbox Code Playgroud)

然后我把它添加到我的.travis.yml.

language: node_js

node_js:
    - "0.10"
before_install: 
    npm install -g grunt-cli
install: 
    npm install
before_script: 
    grunt
after_script:
    npm run-script coveralls
Run Code Online (Sandbox Code Playgroud)

code-coverage qunit istanbul coveralls

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

在Facebook的messenger API中使用什么字符串来创建换行符?

我已经在一些答案中看到了Graph API接受<center></center>而不是<br>其API的其他部分似乎接受了\r\n.

目前是否有任何方式发送换行符,如果它有记录的位置?

我看了他们的"入门指南",但它并没有出现在任何地方.

facebook facebook-messenger

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

有没有办法检测Chrome的Devtools是否使用暗模式?

PAGE中而不是devtools本身的Javascript中,当前是否有一种方法可以确定Chrome的devtools是否使用暗模式而不是“正常模式”?

我确实发现了一个带有此注释的错误报告,但看起来仅与Chrome扩展有关。

javascript google-chrome

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

如何在悬停时停止猫头鹰旋转木马?

目前,当您将鼠标悬停时,旋转木马会停止,我已添加,autoplayHoverPause:false但似乎没有任何改变.是否还有其他选项可以阻止它在徘徊时停止?

$('.owl-carousel').owlCarousel({
    autoplayHoverPause:false,
    loop:true,
    margin:0,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:4
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery sliders owl-carousel

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

d3.js:从时间尺度获取刻度格式

我正在使用d3构建时间轴可视化,其中域可以从几天到几十年不等.我正在使用d3时标和轴这样:

var timeScale = d3.time.scale()
    .domain([firstEvent, lastEvent])
    .range([leftPadding, w - rightPadding]);
var timeAxis = d3.svg.axis()
    .scale(timeScale)
    .orient("bottom");
timeAxis.ticks(5);
Run Code Online (Sandbox Code Playgroud)

由于域是如此可变,因此使用方便ticks(x),将自动选择刻度格式.我的问题是,在某些情况下,未显示年份,这是至关重要的.我的想法是在创建轴后检查刻度线格式,如果它不包含年份,则在轴旁边手动显示.但是,我无法获得比例尺的刻度格式; 使用timeScale.tickFormat()只返回一个函数.我怎么解决这个问题?

javascript d3.js

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

如何使用ESLint解决导入/未解决的错误?

我在Webpack上有一个项目,我正在尝试设置SASS进行转换.我相信我非常接近,虽然我的配置存在问题(这里的代码和详细信息).

使用代码运行webpack会产生以下错误:

/foobar/src/js/components/App.jsx
  6:8  error  Unable to resolve path to module '../../scss/components/app'  import/no-unresolved
Run Code Online (Sandbox Code Playgroud)

在花了一段时间这一点,我注意到,如果我取代了import 'scss/components/app'线App.jsximport '../../scss/components/app.scss'中,transpilation工作.这让我相信有两个问题:

  1. 我的resolve.rootWebpack配置不起作用,因为相对导入工作,但不是绝对的.
  2. 我的resolve.extensionsWebpack配置也没有应用,因为我需要附加.scss文件扩展名以使其正常工作.

其他说明:

  • 我正在使用webpack 1.13.1.
  • 如果我故意在SCSS文件中引入语法错误,webpack会正确地提示我该文件的问题.
  • 我也尝试将我的resolve.root配置设置为数组(即[path.resolve(__dirname, './src')])无济于事.
  • 目标方面,我希望能够实现类似于这个例子的东西.
  • 我已经尝试过调试import路径console-loaderundefined.

任何帮助将不胜感激,谢谢!

更新:一位朋友刚刚分享了这个问题不是来自sass-loader/等,而是来自eslint.这意味着这个问题的性质将会大不相同(更少的webpack,更多的eslint).

无论如何,我.eslintrc扩展了AirBNB的,我猜我需要根据这个插件的细节修改它.

感兴趣的部分是:

settings:
  import/ignore:
    - node_modules       # mostly CommonJS (ignored by default) 
    - \.coffee$          # fraught with …
Run Code Online (Sandbox Code Playgroud)

sass eslint webpack

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

&符号是否应该在查询字符串中进行 URL 编码?

例如,我经常看到这个 URL 出现。

https://ghbtns.com/github-btn.html?user=example&repo=card&type=watch&count=true
Run Code Online (Sandbox Code Playgroud)

&意味着&amp;还是应该/可以将其保留为&

url url-encoding ampersand

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

一种使用 v-for 指令在 VueJS 上渲染多个根元素的方法

现在,我正在尝试创建一个网站,该网站显示由我的 NodeJS API 提供的最近的新闻帖子。

我尝试了以下方法:

HTML

<div id="news" class="media" v-for="item in posts">
    <div>
        <h4 class="media-heading">{{item.title}}</h4>
        <p>{{item.msg}}</p>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Javascript

const news = new Vue({
    el: '#news',
    data:   {
        posts:  [
            {title: 'My First News post',   msg: 'This is your fist news!'},
            {title: 'Cakes are great food', msg: 'Yummy Yummy Yummy'},
            {title: 'How to learnVueJS',    msg: 'Start Learning!'},
        ]
    }
})
Run Code Online (Sandbox Code Playgroud)

显然,上面的方法不起作用,因为 Vue 无法渲染多个根元素。

我查了 VueJS 的官方手册,并没有想出一个解决方案。谷歌搜索一段时间后,我明白不可能渲染多个根元素,但是,我还没有想出一个解决方案。

components vuejs2

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