Tag: html5

使用jquery暂停mediaelement.js: 我使用以下方法初始化了元素： $(‘video’).mediaelementplayer(); 现在我想定位该video并在按下链接时暂停它： $(‘.page_button’).live(‘click’, function() { $(‘video’).pause(); }); 谢谢。

如何构建优雅降级的HTML5范围？: 我想将HTML5中的用于支持它的浏览器，如果没有，则降级为。我正在使用Ruby-on-Rails，所以其他方面都失败了，我可以在服务器端做类似的事情。不过，我更喜欢通过Javascript进行渐进增强的想法。如果它是JQuery，奖励积分。

使用fabric.js在canvas上自由绘图: 我正在尝试使用fabric.js在canvas上绘制一个免费的绘图，但我无法在我这边自由绘制像喷雾，圆圈，纹理模式我使用此代码只有铅笔模式绘图工作，但当我选择喷雾和模式绘制为铅笔的其他模式。这是我的HTML 这里是小提琴墨水 Mode: Pencil Circle Spray Pattern hline vline square diamond texture Line width: Line color: Line shadow width: 这是我的脚本代码 var canvas = new fabric.Canvas(‘canvas’) var drawingModeEl = document.getElementById(‘drawing-mode’), drawingOptionsEl = document.getElementById(‘drawing-mode-options’), drawingColorEl = document.getElementById(‘drawing-color’), drawingLineWidthEl = document.getElementById(‘drawing-line-width’), drawingShadowWidth = document.getElementById(‘drawing-shadow-width’); drawingModeEl.onclick = function() { canvas.isDrawingMode = !canvas.isDrawingMode; if (canvas.isDrawingMode) { drawingModeEl.innerHTML = ‘Cancel […]

使用jQuery get（0）索引暂停和播放多个HTML5video？: 我有几个video的页面。可以单击缩略图来播放每个video。问题是对于超过2个video，点击第3个缩略图不会暂停第2个video，所以我同时播放了2个video。我还使用fadeOut()切换每个video的可见性，无论video数量多少，这都可以正常工作。因此，我认为问题在于代码的get(0)部分。这是一个显示问题的jsfiddle： http ： //jsfiddle.net/trpeters1/EyZdy/28/ 此外，这里有一个更详细的代码块，可以解决问题： $(function(){ $(‘#video_1,#video_2,#video_3,#video_4,#video_5,#video_6’).hide(); $(‘.icon_1’).click(function(){ $(‘#video_2,#video_3,#video_4,#video_5,#video_6’).fadeOut(function(){ $(‘#video_1’).fadeIn(); $(‘.video_2,.video_3,.video_4,.video_5,.video_6’).get(0).pause(); $(‘.video_2,.video_3,.video_4,.video_5,.video_6’).get(0).currentTime = 0; $(‘.video_1’).get(0).play(); }); }); $(‘.icon_2’).click(function(){ $(‘#video_1,#video_3,#video_4,#video_5,#video_6’).fadeOut(function(){ $(‘#video_2’).fadeIn(); $(‘.video_1,.video_2,.video_4,.video_5,.video_6’).get(0).pause(); $(‘.video_1,.video_2,.video_4,.video_5,.video_6’).get(0).currentTime = 0; $(‘.video_2’).get(0).play(); }); }); $(‘.icon_3’).click(function(){ $(‘#video_1,#video_2,#video_4,#video_5,#video_6’).fadeOut(function(){ $(‘#video_3’).fadeIn(); $(‘.video_1,.video_2,.video_4,.video_5,.video_6’).get(0).pause(); $(‘.video_1,.video_2,.video_4,.video_5,.video_6’).get(0).currentTime = 0; $(‘.video_3’).get(0).play(); }); }); }); 和HTML： cadillac nike russian standard

任何干净的方式来下载像html5下载属性的文件: 我完全清楚在javascript / jQuery中下载文件方面有很多争论（和解决方案），比如iFrame ， jQueryPlugin 。但是，我对HTML5中 download属性等内置工具更感兴趣。问题是它支持几个浏览器：这就是我想要下载文件的方式，而无需创建框架或使用任何插件。问题是还有其他任何跨浏览器内置（比方说，更简单或更清洁）的方法吗？ Internet Explorer 8+ Firefox 19+ Chrome 17+ Safari 5.1.9+ Opera 12.1

jquery.validate，jquery.metadata和html5数据: 我正在研究使用html5数据属性将validation规则传递给jquery.validate作为停止间隙，直到插件更新为HTML5支持。我正在使用jquery 1.4.2，jquery.validate 1.7和jquery.validate 2.1。在我的HTML中，我使用的代码如下：在我的jQuery中，我正在做以下事情： $.metadata.setType (“html5”); $(function () { $(‘#myForm’).validate ({debug:true}); }); 这只会导致错误消息，validator.methods [method]未定义我确实在元素上使用了data-validate属性做了一个元数据（），我得到了一个名为validate的对象，其中设置了我的属性，所以我知道元数据是找到属性并从中加载，但是validate插件可以似乎处理它。如果我回到class =“{validate：{…}}”并注释掉配置元数据以使用HTML 5的行，那么它一切正常。我做错了什么，或者validation和/或元数据插件是否存在问题？

LocalStorage和JSON.stringify JSON.parse: 我一直致力于一个项目，允许用户提交他们访问过的地方的记忆，并跟踪记忆提交的位置。我唯一的问题是尝试将localStorage与app一起使用，我读到了JSON.stringify和JSON.parse，并且还不明白如何在我的代码中使用它们。这是我的form.js它处理表单并抓取文本字段。当单击添加按钮（在显示详细信息页面上）或输入详细信息按钮时，它会清除表单。最后，它接收信息并将消息发送回窗口。 function processForm(){ var locate = document.myform.locate.value; var details = document.myform.details.value; var storeData = []; localStorage.setItem(“locate”, JSON.stringify(locate)); localStorage.setItem(“details”, JSON.stringify(details)); alert(“Saved: ” + localStorage.getItem(“locate”) + “, and ” + localStorage.getItem(“details”)); var date = new Date, day = date.getDate(), month = date.getMonth() + 1, year = date.getFullYear(), hour = date.getHours(), minute = date.getMinutes(), […]

带有history.pushState和popstate的Ajax – 当popstate state属性为null时，我该怎么办？: 我正在尝试使用ajax加载内容的HTML5历史API。我有一堆通过相关链接连接的测试页面。我有这个JS，它处理这些链接的点击。单击链接时，处理程序会获取其href属性并将其传递给ajaxLoadPage（），该页面将所请求页面中的内容加载到当前页面的内容区域中。（我的PHP页面设置为在正常请求时返回完整的HTML页面，但只有一小部分内容，如果？fragment = true附加到请求的URL。）然后我的click处理程序调用history.pushState（）以在地址栏中显示URL并将其添加到浏览器历史记录中。 $(document).ready(function(){ var content = $(‘#content’); var ajaxLoadPage = function (url) { console.log(‘Loading ‘ + url + ‘ fragment’); content.load(url + ‘?fragment=true’); } // Handle click event of all links with href not starting with http, https or # $(‘a’).not(‘[href^=http], [href^=https], [href^=#]’).on(‘click’, function(e){ e.preventDefault(); var href = $(this).attr(‘href’); […]

Internet Explorer中的HTML5拖放问题（无法访问dataTransfer属性）: 我正在尝试使用HTML5实现基本的拖放function。它在Chrome中完全正常，但在IE10中我得到一个0x8000ffff – JavaScript runtime error: Unexpected call to method or property access. 行setData错误。 function handleDragStart(e) { e.dataTransfer.effectAllowed = ‘move’; e.dataTransfer.setData(“dropTarget”, g.destination); } var cols = $(“#” + g.source + ” tbody > tr”); [].forEach.call(cols, function (col) { col.addEventListener(‘dragstart’, handleDragStart, false); }); 我究竟做错了什么？

HTML5拖放行为: 我正在广泛使用HTML5本机拖放，它几乎完全表现自己，只有一个小例外。当任何东西被拖到页面上时，我正在尝试突出显示我的下拉区域。我最初试图通过在文档体上放置jQuery侦听器来实现这一点，如下所示： $(“body”).live(‘dragover’,function(event){lightdz(event)}); $(“body”).live(‘dragexit dragleave drop’,function(event){dimdz(event)}); 使用lightdz（）和dimdz（）更改页面上所有dropzones的背景颜色样式属性，使它们脱颖而出。这没用。每当拖动的对象进入页面上的子元素（如div容器）时，侦听器就会将其标记为dragleave事件并使dropzones变暗。我通过将侦听器应用于页面上的所有可见元素而不仅仅是正文来解决这个问题。当它跨越一个元素和另一个元素之间的边界时，它们偶尔会有一些轻微的可见闪烁，但它看起来很好。无论如何，现在我已经改变了lightdz（）和dimdz（），以便他们将快速的jQuery fadeTo（）动画应用到所有非dropzones。这在它工作时看起来很棒，并且使用户非常清楚它们能够做什么，也不能放弃。麻烦的是当它在元素边界之间传递时，它应用淡入淡出动画。这比背景颜色的偶然闪烁要明显得多，特别是因为如果对象被快速拖过多个边界，它将对动画进行排队并使页面反复淡入淡出。即使我不打扰fadeTo（）动画，只是改变不透明度，它比背景颜色闪烁更明显，因为整个页面改变而不仅仅是dropzone元素。有没有办法将整个页面作为单一元素引用，以用于dragover和dragleave事件？如果失败了，有没有办法检测在浏览器窗口之外发生的丢弃？如果我跳过dragleave事件，它看起来很好，但如果任何对象被拖过浏览器窗口然后掉到它外面，整个页面都会褪色。