小编Jam*_*ell的帖子

如何使用Twitter Bootstrap API检测您正在使用哪个设备视图?

我刚刚开始使用Twitter Bootstrap API来完成我即将推出的项目.主导航包含3个主要元素:

  • 网站导航
  • 社交链接导航
  • 搜索网站表单

我在移动设备上查看网站时使用折叠插件折叠网站导航和搜索表单.移动视图有2个按钮,单击此按钮可打开/关闭搜索表单或主导航.

但是,如果我关闭搜索表单然后将浏览器调整为桌面视图,搜索表单仍然隐藏在此视图中?

我已经阅读过有关使用诸如visible-mobile等类的内容,但这些类似乎与崩溃插件冲突.我也意识到我可能会编写自己的CSS黑客来解决这个问题,但我想我会问是否有更简单的解决方案.

Bootstrap有显示,显示,隐藏和隐藏的事件,所以我想也许我可以写一些自定义JS,它会在每个特定的设备视图中显示或隐藏这些项目.但是我不知道如何检测我当时正在使用的设备.

思考?

提前致谢

javascript device-detection twitter-bootstrap

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

在单个页面中的多个位置使用时,JQuery插件无法正常工作

我正在为我正在研究的项目编写一个JQuery插件,该项目从桌面设备上的标签内容转变为移动设备上的手风琴.我使用JQuery Boilerplate(https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/dist/jquery.boilerplate.js)作为我的插件的初始模式.

该插件在具有类".tabs2accordion"的任何元素上调用,如下所示:

 $(".tabs2accordion").tabs2Accordion({state:"desktop"});
Run Code Online (Sandbox Code Playgroud)

如果页面上只有一个带有".tabs2accordion"类的元素,则插件会按预期工作,但只要将具有相同类的另一个元素添加到页面中,该插件就会出现故障.我已经创建了一个基本代码的codepen来演示这个问题.要显示此问题,请在窗口大小> 768px上尝试单击任何标题,并观察下面的内容在单击每个标题时如何更改.接下来取消注释HTML块并尝试再次单击标题.

http://codepen.io/decodedcreative/pen/MyjpRj

我尝试使用类"tabs2accordion"循环遍历每个元素,如下所示:

$(".tabs2accordion").each(function(){
    $(this).tabs2Accordion({state:"desktop"});
});
Run Code Online (Sandbox Code Playgroud)

但这也没有解决问题.

有任何想法吗?

javascript jquery jquery-plugins jquery-boilerplate

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

在页面中多次使用时,JQuery插件无法正常工作

我正在尝试编写一个名为grid2carousel的JQuery插件,该插件在桌面设备上的Bootstrap样式网格中获取一些内容,并在较小的屏幕上成为旋转木马.

如果插件是页面上唯一的实例,但如果有多个插件则会遇到一些问题.我在这里创建了一个Codepen来演示这个问题:

http://codepen.io/decodedcreative/pen/BzdBpb

尝试注释掉codepen的HTML部分中的一个组件,调整浏览器的大小,直到它成为轮播,然后再次重复此过程并取消注释

每当浏览器宽度低于HTML中数据属性中指定的断点时,插件就会运行一个名为SetupPlugin的内部函数.如果浏览器宽度超过此断点,则称为DestroyPlugin的函数会将HTML恢复为其原始状态.像这样:

        checkDeviceState = function(){
            if($(window).width()>breakpointValue){
                destroyPlugin();
            }else{
                if(!$element.hasClass('loaded')){
                    setupPlugin();
                }
            }
        },
Run Code Online (Sandbox Code Playgroud)

以下是我的插件代码.有人能给我一个关于我在这里做错了什么的指针吗?

(function (window, $){
$.grid2Carousel = function (node, options){
    var
    options = $.extend({slidesSelector: '.g2c-slides', buttonsSelector: '.g2c-controls .arrow'}, {},options),
    $element = $(node),
    elementHeight = 0,
    $slides = $element.find(options.slidesSelector).children(),
    $buttons = $element.find(options.buttonsSelector),
    noOfItems = $element.children().length + 1,
    breakpoint = $element.data("bp"),
    breakpointValue = 0;

    switch(breakpoint){
        case "sm":
            breakpointValue = 767;
            break;
        case "md":
            breakpointValue = 991;
            break;
        case "lg":
            breakpointValue = 1199;
            break;
    }

    setupPlugin = function(){ …
Run Code Online (Sandbox Code Playgroud)

javascript jquery multiple-instances jquery-plugins

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

无法在Ubuntu上启动Jenkins服务

我有一个Ubuntu服务器,并在其上安装了Jenkins for Continuous Integration.我今天早上尝试运行一些版本,但它们不会运行.我查看了日志并意识到在/ var/log/jenkins中有一些大型日志文件填满了我在服务器上的硬盘.我删除了这些文件并尝试重新启动Jenkins.

此时詹金斯现在不再开始了.我看了一下我的/ tmp目录,看起来有一些内存泄漏,它在我的tmp目录中创建一个名为winstonexxxxxxxxxxx.jar的大型1MB文件,它填满了我的tmp目录的整个1mb空间.

任何人都可以帮忙解决这个问题吗?

提前致谢

ubuntu continuous-integration jenkins

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

MERN Stack - 在同一个端口上表达和反应?

我正在使用 MERN(MongoDB、Express、React、Node)堆栈进行项目,并且在将数据从 React 组件内的表单发布到 Node.js 中定义的 API 端点时遇到问题。当我提交表单时,浏览器只显示无法发布错误。我非常有信心,如果我在 React 中为表单提交创建一个事件处理程序,并使用 Axios 等库处理 POST,我可以解决这个问题。

但最终我认为这个问题是因为 Node 后端运行在与 React 前端不同的端口上。有没有一种方法可以配置我的堆栈,以便我可以使用标准形式的 POST 并可能让 FE 和 BE 在同一端口上运行?

node.js reactjs mern

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

ES6类 - 从事件处理程序中调用方法

我正在尝试为当前项目的交互式日历编写ES6类.

该类看起来类似于以下内容:

class Calendar {

constructor (s) {

    this.eventButtons = s.eventButtons;
    this.eventButtons.forEach(button => button.addEventListener('click', this.method1);
    this.eventBoxes = s.eventBoxes;


method1 (e) {
    e.preventDefault();
    this.method2(e.target.href);
}

method2 (url) {
    console.log(url);
}

}


export default Calendar;
Run Code Online (Sandbox Code Playgroud)

我知道'this'关键字的上下文已从构造函数更改为已在method1函数中单击的按钮.但是我不知道如何将按钮和构造函数的上下文保持在同一个函数中.我尝试将按钮事件侦听器代码更改为以下内容:

this.eventButtons.forEach(button => button.addEventListener('click', this.method1).bind(this);
Run Code Online (Sandbox Code Playgroud)

但这只是将'this'关键字的上下文切换到构造函数而不是按钮.我需要在我的功能中使用它们.

有任何想法吗?我希望这是一个非常普遍的问题?

javascript ecmascript-6 es6-class

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

Window.matchmedia监听器触发两次

我正在尝试编写一些javascript,它将更改某些浏览器断点处JS配置对象中保存的某些值.

我已经在配置对象中存储了window.matchmedia测试,然后我循环遍历这个对象的键,为每个测试添加一个事件监听器,如下所示:

Object.keys(config.mediaQueries).map((key) =>{
     config.mediaQueries[key].addListener(function(){
         console.log("breakpoint change");
     });
});
Run Code Online (Sandbox Code Playgroud)

https://codepen.io/decodedcreative/pen/YQpNVO

但是,当调整浏览器大小并运行这些侦听器回调函数时,它们似乎运行两次.在您的控制台打开的情况下检查上面的CodePen,您将看到我的意思.

有谁知道我在这里做错了什么?

javascript ecmascript-6 matchmedia

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

更新查询两次将 ObjectID 添加到数组

我正在开发一个桌子规划器应用程序,可以将客人分配到桌子上。表模型具有以下架构:

const mongoose = require('mongoose');

mongoose.Promise = global.Promise;

const tableSchema = new mongoose.Schema({
  name: {
    type: String,
    required: 'Please provide the name of the table',
    trim: true,
  },
  capacity: {
    type: Number,
    required: 'Please provide the capacity of the table',
  },
  guests: [{
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Guest',
  }],
});

module.exports = mongoose.model('Table', tableSchema);
Run Code Online (Sandbox Code Playgroud)

客人可以在应用程序中(使用 React DND)拖放到“表”React 组件。当被放到一个表上时,一个 Axios POST 请求被发送到一个 Node.js 方法来更新数据库并将来宾的对象 ID 添加到表模型中的一个数组中:

exports.updateTableGuests = async (req, res) => {
  console.log(req.body.guestId);
  await Table.findOneAndUpdate(
    { name: req.body.tablename },
    { $push: …
Run Code Online (Sandbox Code Playgroud)

mongoose mongodb mongodb-query

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

异步等待Express中间件无法正常工作

我是Node的新手,所以要温柔.我正在为我的婚礼创建一个应用程序,它采用上传的访客列表(Excel文件格式)并将其转换为JSON数组,然后我可以使用它来构建关于每个访客的配置文件(饮食要求,rsvp答案等).

到目前为止,我在主页上有一个表单,允许用户上传.xlsx文件,当表单提交时,用户再次被重定向回主页.

我创建了以下路线:

router.post('/',
    guestsController.upload,
    guestsController.getGuestlist,
    guestsController.displayGuestlist
);
Run Code Online (Sandbox Code Playgroud)

这是我的客人控制器:

const multer = require('multer');
const convertExcel = require('excel-as-json').processFile;

const storage = multer.diskStorage({ //multers disk storage settings
    destination: function (req, file, cb) {
      cb(null, './uploads/')
    },
    filename: function (req, file, cb) {
        var datetimestamp = Date.now();
        cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1])
    }
});

exports.upload = multer({storage: storage}).single('file');

exports.getGuestlist = async (req, res, next) => {

  try {
     await convertExcel(req.file.path, null, null, (err, guestData) => {
         req.guestlist …
Run Code Online (Sandbox Code Playgroud)

javascript node.js express async-await

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

反应状态挂钩-切换课程

我试图构建一个侧边栏导航菜单,以为我会利用React中新的State钩子。我已经阅读了文档,但似乎找不到与我需要的示例类似的示例,这很简单,只需单击一下即可切换CSS类,从而依次打开和关闭菜单。

这是我尝试过的:

const SidebarMenuItem = ({ component }) => {
  const [ menuActive, setMenuState ] = useState(false);

  return (
    <li className="p-sidebar-menu-item">
      menuActive:
      { menuActive }
      <button className="p-sidebar-menu-item__link" onClick={() => setMenuState(!menuActive)}>{ component.component }</button>
      { component.children && (
        <ul className="p-sidebar-menu">
          <li><a href={`/${component.slug}`}>Overview</a></li>
          { component.children.map((subPage, key) => (
            <li key={ key }>
              <a href={`/${subPage.slug}`}>{ subPage.name }</a>
            </li>
          ))}
        </ul>
      )}
    </li>
  )
}

export default SidebarMenuItem;
Run Code Online (Sandbox Code Playgroud)

有什么想法我要去哪里吗?

谢谢

reactjs react-hooks

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