Tag: enquire.js

使用Enquire.JS根据屏幕大小在脚本之间切换

我创建了一个包含两个不同脚本的页面。 运行的脚本由屏幕大小决定。 Enquire.Js用于实现这一目标。 当在大于600px的屏幕上查看页面时，我希望使用jQuery选项卡显示内容。 我在这里制作了一个测试模型并且工作正常： 实时页面 || JS小提琴版 虽然它有效，但它只能以一种方式工作。 即，当窗口resize时，Enqiurie.js会发挥其“魔力”。 但如果再次调整窗口大小，则“魔法”不会反转。 （与CSS媒体查询相反，其中重新调整窗口大小可以反转媒体查询）。 在小于600像素的屏幕上查看页面时，我希望它与iPhone风格的导航一起显示。 我在这里做了一个测试模型，它也可以正常工作： Live Page || JS小提琴版但是，它只能以一种方式工作。 当我尝试将这两个演示结合起来时（即它在Tabs和iphone风格的Nav之间切换，它不太有效。请参阅此处的测试模型： 实时页面 || JS小提琴版本 如果浏览器加载时超过600px，则必须刷新窗口以显示选项卡。 如果你将窗口从小于600px重新调整到600px以上，那么一些不到600px的代码似乎仍然存在。 我不确定我做错了什么。 谢谢你的帮助！

如何使用Enquire.Js？

Enquire.js是一个Javascipt，它为Javascripts重新创建CSS媒体查询。 这意味着您可以将Javascripts包装在媒体查询中。 （就像你在媒体查询中包装CSS一样）。 我不太清楚如何使用它。 本教程说明了这一点： enquire.register(“max-width: 960px”, function() { // put your code here }); 但是，当我遵循它时，我的代码停止工作。 以下是没有Enquire.JS的一些Jquery选项卡的示例。 它工作正常。 这是相同的选项卡，但添加了Enquire.JS。 现在它停止工作了。 我已经尝试了不同的代码变体，但它们都不起作用。 我究竟做错了什么？ 我想你可能已将Jquery Tab代码放在一个单独的文件中，然后从Enquire.Js中链接到该文件，但我不确定你会怎么做。 （虽然知道它会很方便，因为我认为它会让你的脚本更加可重用）。 PS。 这不是对Enquire.Js的批评。 我知道问题在于我缺乏对Javascript的熟练程度！ 我确实花了几个小时寻找解决方案，但找不到任何东西。 谢谢你的帮助！