问题标签 [progressive-enhancement]
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.
jquery - 无法创建由 ajax 加载的简单 html 增强模式对话框
我的应用程序中有一些类似向导的页面，它在小步骤之间导航时保持状态，导航不是线性的，并且在没有一行 javascript 的情况下以“渐进增强”的方式一切正常。
在我的应用程序中，对于启用了 javascript 的用户，我希望通过 ajax 加载对话框中的每个完整步骤，在一组对话框中打开上述流程，处理步骤的操作并关闭对话框，每个步骤都将嵌入自己的脚本来执行在对话框加载和拦截一些步骤 ui 事件。
问题是 JQuery UI 对话框想要创建操作按钮，我不能将按钮创建给插件，它要求按钮元数据，我已经有完整的功能页面，其中包含表单、按钮、数据输入以及我工作所需的一切，它的工作，完成，我只想将它加载到管理窗口特定内容的对话框上，例如标题栏，按标题栏拖动，标题栏上的关闭按钮，关闭事件到我的清理，拉伸以适应我的对话框内容，加载带覆盖的模态模式。
我找不到通过嵌入在对话框步骤中的脚本来拦截对话框内的按钮单击的方法，对话框内的按钮必须通过 ajax 发布数据，但它会在正常页面发布中发布主页。
我发现了一些非常古老的插件，但我喜欢 JQuery UI，它简单而且看起来不错，正在寻找没有 iframe 的东西，我读到了：
四四方方： http: //onehackoranother.com/projects/jquery/boxy/tests.html
简单模式： http ://www.ericmmartin.com/projects/simplemodal/
jqModal： http ://dev.iceburg.net/jquery/jqModal/
@liho1eye：现在发表评论
编辑：在@liho1eye 的帮助下，我达到了它：
javascript - 禁用 Javascript 时的 Ajax 回退
问题：
i) 在 JSF2 应用程序中，我想创建一个带有选项卡控件的页面，其中，当用户单击选项卡时，下面面板的内容通过 ajax 调用从服务器中的 xhtml 文件加载。
ii）我希望它支持优雅降级（当禁用 Javascript 时），以便在单击选项卡时触发 HTTP 请求，并加载新页面......或相反，通过渐进增强。
部分解决方案：
i）我想我可以通过 BalusC 在How to ajax jsf 2 outputLink
中发布的代码示例来实现这一点：-
问题
我如何扩展它来解决问题（ii）或者还有其他完全不同的方法吗？我想也许我可以用 noscript 来实现这一点，但不知道怎么做！
编辑：可能的解决方案 - 尚未验证：
即使禁用了 ajax，上述代码也应该可以工作；根据http://www.laliluna.de/articles/posts/jsf-2-evaluation-test.html ，它应该只通过 HTTP 工作:)
优雅！我会尝试一下。
javascript - 使用 KnockoutJS 进行渐进式增强
假设我们有如下数据
我们可以很容易地将其表示为绑定到敲除模板的视图模型，如下所示：
问题是，我们如何在使用渐进增强时达到相同的结果？即首先在服务器端渲染模板，然后将剔除模板和视图模型绑定到该渲染。
一个简单的服务器端模板看起来像这样：
我探索了几种不同的可能性：
一种是创建一个knockout模板和一个服务器端模板，通过解析服务器端模板的DOM动态生成Knockout视图模型。这样，启用 JavaScript 时只有 Knockout 模板可见，禁用 JavaScript 时只有服务器端模板可见。它们的样式可以使它们看起来相同。
另一种方法是将 facets 数组中每个项目的绑定分别应用于该 facet 的现有 DOM 元素。然而，这仍然只有一层深，不适用于嵌套元素。
这些方法似乎都不是很干净。另一种解决方案可能是编写一个自定义绑定来处理整个渲染并在可能的情况下重用现有元素。
还有其他想法吗？
model-view-controller - YUI 3.5 App Framework 服务器路由
我目前正在考虑在一个相当大的应用程序中实现 YUI 3.5 pr1（然后是最终版本）。
后端使用 PHP 和 MySQL 构建，使用带有前端控制器模式的 MVC 结构。通过它自己，服务器可以处理 URL（http://mysite.com/module/submodule/option）等并返回一个完全呈现的页面。
我想在整个应用程序中实现 YUI 中的应用程序框架，以便启用 javascript 的浏览器有效地拥有类似于具有历史管理功能的 1 页应用程序。
我目前正在临时站点上查看应用程序框架文档。不幸的是，文档并不完整（特别是关于与服务器的路由协调和逐步增强的应用程序的部分）。
在任何情况下，如果用户使用 HTML4 浏览器（所有版本的 IE）访问http://mysite.com/modules/submodule/option，并且他启用了 javascript，则需要将他重定向到http://mysite .com/#/modules/submodule/option。
这是内置在 App Framework 中的东西吗？我更喜欢使用不需要呈现整个页面然后重定向到带有标签的 URL 然后再次重新呈现的解决方案。
最后，我观看了App Framework 的介绍视频，其中提到他们正在使用 Handlebars 模板引擎。我在服务器端使用Twig作为我的模板引擎。是否可以在应用程序框架中使用替代模板引擎？特别是twig js 引擎。
jquery - 使用 jquery 和 asp.net 进行渐进式增强
我已经建立了一个网站，它在没有任何 javascript 的情况下运行良好（我什至避免使用链接按钮）。现在我想使用 javascript 使用 jquery 和 json 来获得更丰富的交互式网站。当启用javascript时，有人可以向我展示一个与jquery和json一起使用的提交按钮的示例（用于向服务器提交数据的部分回发）。当 javascript 被禁用时，它应该进行正常的服务器端发布。
jquery - 逐步增强 html 表单，jQuery UI datepicker 不起作用
我是逐步增强 HTML5 表单的新手，我目前正在尝试使用 jQuery UI 和 HTML5 的新输入类型来创建跨浏览器表单。我正在使用Modernizr和Yepnope有条件地加载脚本并遵循CSS-tricks.com上提供的教程。但我遇到了Object [object Object] has no method 'datepicker'错误。
我发现有Modernizr.load()which 可以用来代替yepnope()，但这没有用并最终出现Object #<Object> has no method 'load'错误，所以我回到yepnope(). 以下是<Head>网页的部分内容。
并且<body>有一个形式<input type='date' name='dtTest'/>
经过一番谷歌搜索，我发现错误的原因是两次加载 jQuery Core，我也跟着这个，但无法解决问题。
谢谢。
注意：我正在 Chrome 17 和 Opera 11.61 中测试页面。
firefox - Firefox 和 Chrome 的按钮宽度差异
我知道有很多 FF/Chrome CSS 问题，但我似乎找不到这个确切的问题。
这是一个显示问题的 JS Fiddle：http: //jsfiddle.net/ajkochanowicz/G5rdD/1/
（为长 CSS 道歉，这是从网站上复制的。）
本质上，Firefox 和 Chrome 为按钮的最内层宽度提供了两个不同的值，4 和 6。我希望两者都为 4 或更少。这是什么原因造成的？
javascript - MVC3“Unobtrusive JavaScript”模型验证
我曾经像这样进行ajax调用：
到目前为止，我的设计正在逐步增强。
现在我也想在客户端实现模型验证，然后再发出实际请求。
我jquery.validation.js在项目中包含了插件以及最新的jquery.validation.unobtrusive.js脚本。
然后我将代码更改为：
我认为，这将完全相同，除非它不会发出请求，除非首先通过验证。
验证方面完全符合预期，使用模型中的数据属性 mvc 设置到我的视图的 DOM 中。
这失败的部分，我不知道为什么，是我回到不是 ajax 的状态。页面只是重新加载，我submitHandler从不触发（与此链接的建议相反）
submitHandler我为( onSuccess,等)尝试了其他一些常用名称，success但它们似乎都不起作用。
jquery - 花哨的盒子和优雅的退化？
我正在尝试使用内联内容通过灯箱输入登录表单，但是，如果用户没有 javascript，我希望能够优雅地降级。根据 fancybox 文档，我的锚标记应该有一个href要显示的内容的 ID，如下所示：
这很好，直到有人在关闭 JavaScript 的情况下访问。然后它们与不存在的东西相关联。在我看来，更好的解决方案是这样的标记：
这样，如果出现故障，用户将被定向到外部登录页面。有没有办法通过fancybox或其他一些灯箱解决方案来实现这一点？
css - :not(:hover) 和 :hover 是隐藏可访问元素的安全方法吗？
有时，使某些页面元素仅在悬停时可见似乎很有帮助。一个例子是 stackoverflow 的“反馈 - 这篇文章对你有用吗？” - 小部件。由于这些元素可能对界面至关重要，因此这种“悬停时显示”功能应该是一种渐进式增强功能，或者换句话说，不显眼并优雅地降级。
通常的方法似乎是使用javascript，例如隐藏元素并在父元素悬停时使它们可用。该选择的原因可能:hover是不支持所有元素，尤其是在旧版浏览器中，因此禁止您首先隐藏元素，直到 css2。（对于 js/jQuery 示例，请参见jquery 在悬停时显示元素）
我想知道您是否可以使用纯 css3 安全地*实现这样的功能，使用:not(:hover)and :hover，而不影响旧版浏览器。据我所知，要求是每个支持的浏览器都:not()必须支持:hover所有元素。根据以下消息来源，情况似乎如此
示例实现：http: //jsfiddle.net/LGQMJ/
你怎么看？有任何反对意见或其他来源吗？
*安全我的意思是浏览器应该始终显示所有元素作为最后的手段。