我刚刚开始使用Twitter Bootstrap API来完成我即将推出的项目.主导航包含3个主要元素:
我在移动设备上查看网站时使用折叠插件折叠网站导航和搜索表单.移动视图有2个按钮,单击此按钮可打开/关闭搜索表单或主导航.
但是,如果我关闭搜索表单然后将浏览器调整为桌面视图,搜索表单仍然隐藏在此视图中?
我已经阅读过有关使用诸如visible-mobile等类的内容,但这些类似乎与崩溃插件冲突.我也意识到我可能会编写自己的CSS黑客来解决这个问题,但我想我会问是否有更简单的解决方案.
Bootstrap有显示,显示,隐藏和隐藏的事件,所以我想也许我可以写一些自定义JS,它会在每个特定的设备视图中显示或隐藏这些项目.但是我不知道如何检测我当时正在使用的设备.
思考?
提前致谢
我正在为我正在研究的项目编写一个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)
但这也没有解决问题.
有任何想法吗?
我正在尝试编写一个名为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) 我有一个Ubuntu服务器,并在其上安装了Jenkins for Continuous Integration.我今天早上尝试运行一些版本,但它们不会运行.我查看了日志并意识到在/ var/log/jenkins中有一些大型日志文件填满了我在服务器上的硬盘.我删除了这些文件并尝试重新启动Jenkins.
此时詹金斯现在不再开始了.我看了一下我的/ tmp目录,看起来有一些内存泄漏,它在我的tmp目录中创建一个名为winstonexxxxxxxxxxx.jar的大型1MB文件,它填满了我的tmp目录的整个1mb空间.
任何人都可以帮忙解决这个问题吗?
提前致谢
我正在使用 MERN(MongoDB、Express、React、Node)堆栈进行项目,并且在将数据从 React 组件内的表单发布到 Node.js 中定义的 API 端点时遇到问题。当我提交表单时,浏览器只显示无法发布错误。我非常有信心,如果我在 React 中为表单提交创建一个事件处理程序,并使用 Axios 等库处理 POST,我可以解决这个问题。
但最终我认为这个问题是因为 Node 后端运行在与 React 前端不同的端口上。有没有一种方法可以配置我的堆栈,以便我可以使用标准形式的 POST 并可能让 FE 和 BE 在同一端口上运行?
我正在尝试为当前项目的交互式日历编写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,它将更改某些浏览器断点处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,您将看到我的意思.
有谁知道我在这里做错了什么?
我正在开发一个桌子规划器应用程序,可以将客人分配到桌子上。表模型具有以下架构:
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) 我是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) 我试图构建一个侧边栏导航菜单,以为我会利用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)
有什么想法我要去哪里吗?
谢谢
javascript ×6
ecmascript-6 ×2
jquery ×2
node.js ×2
reactjs ×2
async-await ×1
es6-class ×1
express ×1
jenkins ×1
matchmedia ×1
mern ×1
mongodb ×1
mongoose ×1
react-hooks ×1
ubuntu ×1