问题标签 [enquire.js]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 如何使用 Enquire.Js?
Enquire.js 是一个 Javascipt,它为 Javascripts 重新创建 CSS 媒体查询。这意味着您可以将 Javascript 包装在媒体查询中。(就像您在媒体查询中包装 CSS 一样)。
我不太确定如何使用它。本教程是这样说的:
但是,当我遵循这一点时,我的代码将停止工作。
这是一些没有 Enquire.JS 的 Jquery 选项卡的示例。它工作正常。
这是相同的选项卡,但添加了 Enquire.JS。现在它停止工作。
我已经尝试了不同的代码变体,但它们都不起作用。我究竟做错了什么?
我认为您可能已将 Jquery Tab 代码放在单独的文件中,然后从 Enquire.Js 中链接到该文件,但我不确定您将如何做到这一点。(虽然知道它会很方便,因为我想它会让你的脚本更可重用)。
PS。这不是对 Enquire.Js 的批评。我知道问题完全在于我对 Javascript 的不熟练!我确实花了几个小时寻找解决方案,但找不到任何东西。
谢谢你的帮助!
javascript - 使用 Enquire.JS 根据屏幕大小切换脚本
我制作了一个包含两个不同脚本的页面。运行的脚本由屏幕大小决定。Enquire.Js就是用来实现这一点的。
当在大于 600px 的屏幕上查看页面时,我希望内容使用 jQuery 选项卡显示。我在这里做了一个测试模型,它工作正常:Live Page || JS 小提琴版
虽然它有效,但它只能以一种方式工作。即当窗口调整大小时,Enqiurie.js 会发挥它的“魔力”。但是,如果再次调整窗口大小,则“魔术”不会逆转。(与 CSS 媒体查询相反,其中重新调整窗口大小会再次反转媒体查询)。
当页面在小于 600px 的屏幕上查看时,我希望它以 iPhone 风格的 Nav 显示。我在这里制作了一个测试模型,它也可以正常工作:Live Page || JS Fiddle 版本 然而,它也只能以一种方式工作。
当我尝试结合这两个演示时(即它在 Tabs 和 iphone 样式 Nav 之间切换,它不太工作。在此处查看测试模型:Live Page || JS Fiddle 版本
如果浏览器加载时超过 600 像素,则必须刷新窗口才能显示选项卡。如果您将窗口从小于 600 像素重新调整为大于 600 像素,一些小于 600 像素的代码似乎仍然存在。
我不确定我做错了什么。谢谢你的帮助!
jquery - 使用 enquire.js 注销脚本时遇到问题
我一直在修改 enquire.js,到目前为止发现它非常方便。
我刚刚碰了壁,可以多用一双眼睛。这是我正在使用的脚本:
`// 来自http://css-tricks.com/scrollfollow-sidebar/的脚本
目标是在屏幕足够宽时有一个滚动的侧边栏,但在没有空间的时候没有。我遇到的问题是它加载得很好,或者我可以加载宽度较小的页面,但是在我使用平板电脑并且我在纵向和横向之间更改方向的情况下,它可能会工作一次,但最终侧边栏不会跟随滚动。
我猜这是因为我没有正确加载或卸载它,但在媒体查询更改的情况下,我不确定在 JQuery on() / off() 事件处理程序中使用什么事件。
有问题的网站是http://samuel-allen.com
有什么作为明显的错误或遗漏跳出来的吗?
提前致谢。
javascript - 使用 enquire.js 退出匹配断点时销毁函数
这可能是大多数阅读的基础,但我似乎无法弄清楚。
我有一个小测试功能,如果在一定宽度下我想执行。当屏幕旋转或调整大小超过该宽度时,我希望该功能停止工作。为简单起见,这里是一些示例代码。
因此,如果页面加载超过 500 像素,它会按预期工作。点击不会执行。如果页面在 500px 或以下加载,则执行 click 函数。唯一的问题是,如果您调整视口大小或将方向更改为 500 像素以上,该函数仍会执行。我希望能够禁用它。
我实际上在这里尝试做的真实世界场景是我有一个包含 4 个项目的无序列表。超过一定宽度时,它们会立即显示。如果在一定宽度下,我只想隐藏它们并单击显示它们。我知道有几种方法可以做到这一点(.toggle()、.toggleClass("myclass") 等)。
我已经这样做了很多次,但我总是被进入/退出断点和事情没有被重置,或者按预期工作。通常它并不重要,但最近在我的一些用例中它很重要。
我知道 unmatch 选项,但我不确定如何真正杀死上面匹配的函数。
任何帮助,将不胜感激。我很确定它会帮助我目前的情况,但也会帮助我扩展我对 enquire.js 的了解以用于其他事情。
谢谢。
编辑:我忘了提...如果您将页面加载到 500 像素以下,然后调整大小或将其定向更宽然后 500 像素,然后在 500 像素以下返回,点击功能将无法再次工作..这也让我感到困惑。我基本上希望它在低于 500 像素时无论如何都能工作,而在超过 500 像素时根本不起作用。
media-queries - 使用 enquire.js - 调用 jQuery 的媒体查询
我正在尝试在一个项目中使用 enquire.js 来控制带有媒体查询的 jQuery 我有一个 jquery 幻灯片,我想在窗口宽于 500 像素时启动它。
我在 load_Gallery.js 中使用此代码
我在页面顶部调用 load_Gallery.js。
我在这里下载了 enquire.js -
https://raw.github.com/WickyNilliams/enquire.js/master/dist/enquire.js
我将它复制到一个 txt 文件中,并在我的 js 文件夹中将其命名为 enquire.1.4.1.js 以及其他 js 文件。
我没有像文档头部的其他 js 文件一样调用这个文件,我应该在头部调用它吗?
我做错了什么 - 任何建议。
jquery - 如何在两个基于 Jquery 的布局之间切换(使用桌面和移动设备时)
我想创建一个响应式网站。如果浏览器是移动设备大小的,内容应该以 iPhone 样式列表视图显示如果浏览器是桌面大小的,内容应该用标签显示:
这样做的最佳方法是什么? 我不想为移动/桌面使用单独的文件。我希望它反应灵敏。
这是我所做的一些研究。
尝试 1:纯 CSS 解决方案。
纯 CSS 解决方案将是最好的,因为 CSS 提供媒体查询,可以轻松在布局之间切换。CSS 提供了创建标签的方法。但它似乎没有为 iPhone 样式列表提供方法。(您几乎可以使用手风琴列表来伪造它,但这不会像在真正的 iPhone 应用程序上那样将用户带到单独的页面)。
尝试 2:Jquery 解决方案(见 Fiddle)
- Jquery Mobile提供了一种创建iPhone 样式列表视图的简单方法
- Jquery UI提供了一种创建选项卡的简单方法。
- Enquire.js为媒体查询提供了等效的 Javascript。
在这个小提琴中,我尝试将 Jquery Mobile 和 Jquery Ui 结合起来。Enquire.Js 用于根据屏幕调用必要的库。
当一个库被调用时,它会改变 dom 结构。所以必须删除不需要的库,否则如果用户重新调整浏览器的大小(即在移动桌面之间切换),未使用的库将中断,导致调用库发生冲突。
在我的小提琴中,我试图这样做,但它似乎不起作用:
即使删除了未使用的库,也会导致新库发生冲突。此外,您必须在调用任何布局之前重新调整浏览器的大小。如果用户不重新调整浏览器的大小,则内容将没有样式。
尝试 3:Dom 克隆(参见 Fiddle)
此尝试类似于尝试 2,除了在页面加载时它将 DOM 存储在一个变量中。然后当用户重新调整浏览器的大小时,现有的 DOM 会被存储的 DOM 替换。我已经按照这里的方法大纲进行了操作,但它似乎不起作用。dom 只是被删除而不是被替换。
我将不胜感激,因为我一直在努力寻找解决方案!(我知道我问过一个与此类似的问题,但我觉得这个新问题与此不同,足以保证发布新帖子。)
尝试 4:动态分配数据属性
Jquery mobile 使用标记中的数据属性来使脚本工作。我尝试过动态应用这些,因此它们仅在浏览器处于移动大小时才写入文档。但是,当重新调整浏览器大小时,桌面选项卡仍然损坏。
media-queries - 互操作性:Enquire.js 不执行 Respond.js 触发 css 媒体查询
好的,所以我使用Respond.js作为旧版浏览器上的媒体查询的 polyfill(ie8 是最重要的)。
同时,我正在研究使用Enquire.js,它可以根据媒体查询匹配执行 js 代码。
单独测试这些东西有效:
- respond.js 为 IE8 正确执行 css 中定义的媒体查询
- enquire.js 根据匹配 css 的媒体查询正确执行 javascript 代码。(对于非旧版浏览器)
但是组合似乎不起作用。IE:
Enquire.js 不会基于通过 respond.js 启用的媒体查询执行 javascript(对于旧版浏览器)
由于 Respond.js 包含 Paul Irish 的MatchMedia 填充物(根据: Enquire 's documentation)应该足以支持旧版支持,我不确定可能出了什么问题。
所以只是为了检查:这种组合应该有效吗?
javascript - enquire.js 旧版支持
我试图找出让 enquire.js 在旧版浏览器(即 6-9)上工作的最佳方法。在 enquire 的网站上,它说使用modernizr 检查matchMedia 支持,如果不支持则加载polyfill。
查看它建议的 polyfill,它说modernizr 已经将它包含在 Modernizr.mq() 中。
我已经对此进行了调查,但找不到使这项工作正常进行的方法。
javascript - enquire.js 在 IE9 中没有响应
我正在按照附件运行一个非常简单的 enquire.js 测试,发现它没有得到 IE9 的响应。其他几个浏览器响应良好(FF、Chrome、Safari)。我已经在 IE9 中测试了来自 GITHUB 的测试套件,它运行良好——所以我一定遗漏了一些东西。任何帮助表示赞赏!
javascript - 当媒体查询改变时销毁一个 Jquery 函数
希望你能帮助我。
我在论坛上搜索过,我猜这个是一个特例。
我正在构建的项目由媒体查询(响应式)提供支持,我有 3 列,有时需要 4 列处于相等的高度。我在 Jquery 中开发了一个脚本,效果很好。见下文
但是当我要移动版本时,低于 767px,我如何在不刷新页面的情况下销毁这个setHeight()函数。
其他替代方法,我可以在下面使用 enquire.js、javascript 媒体查询来执行此操作,但如果我直接从桌面/平板电脑转到移动设备,则无需刷新就无法使其工作。像下面这样