提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|使用教程|编辑:我只采一朵|2013-11-18 09:53:13.000|阅读 407 次
概述:演示如何使用jQuery HTML5 UI框架Ignite UI的线性仪表Linear Gauge控件制作一个jQuery音乐播放器
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
Ignite UI 是Infragistics开发的一款高级jQuery HTML5 UI框架,它下面有一个非常好用的控件:线性仪表(Linear Gauge)。今天就跟大家演示一下如何用这个控件制作一个jQuery音乐播放器。
首先,我们需要一些HTML标签来表示播放器的元素,这里用的是HTML5 audio tag:
<audio src="/Music/song.mp3"></audio>
接下来设置播放器的基础部分。我们需要播放/暂停按钮、音量按钮和进度条。这里用了一些CSS样式来定义这些元素:
<div class="musicPlayer"> <div class="buttons"> <a class="playpause" href="#"> <span class="ui-icon ui-icon-play"></span> <span class="ui-icon ui-icon-pause"></span> </a> </div> <span class="currenttime"></span> <div id="linearGauge"></div> <span class="duration"></span> <div class="volume-container"> <div class="volume"> <a href="#" > <span class="vol ui-icon ui-icon-volume-on"></span> </a> </div> </div> <div id="linearGauge1"></div> </div>
这样播放器的基本架构就出来了,但是还不能播放。首先需要一些代码来启用播放/暂停按钮:
$('.buttons .playpause').click(function () { var player = $(this).parents('.musicPlayer'); if (player.is('.paused')) { $('.musicPlayer').removeClass('paused'); audioEl.play(); } else { $('.musicPlayer').addClass('paused'); audioEl.pause(); } return false; }).hover(function () { $(this).addClass('ui-state-hover'); }, function () { $(this).removeClass('ui-state-hover'); }) .focus(function () { $(this).addClass('ui-state-focus'); }) .blur(function () { $(this).removeClass('ui-state-focus'); }); $('.musicPlayer').addClass('paused');
而进度条部分则用到了Ignite UI的 linear gauge 控件。进度条的最大值取决于歌曲的持续时间,所以图表要持续响应当前曲目的长度。这里我们用了两个范围:一个静态一个动态。
var newduration = audioEl.duration / 60; //linear gauge $(".musicPlayer #linearGauge").igLinearGauge({ width: "65%", height: "45px", minimumValue: "0", maximumValue: newduration, minorTickCount: 1, needleBreadth: 4, interval: 1, value: 1.2, labelInterval: 1, needleShape: "custom", needleInnerBaseWidth: 0.1, needleOuterBaseWidth: 0.1, needleInnerExtent: .6, needleOuterExtent: 0.1, needleInnerPointExtent: .3, needleInnerPointWidth: 0.3, needleOuterPointExtent: 0.4, needleOuterPointWidth: .3, needleBrush: "black", backingBrush: "#e6e6e6", backingOutline: "#e6e6e6", fontBrush: "black", ranges: [ { name: "666", startValue: 0, endValue: newduration, brush: "#666", innerStartExtent: .2, innerEndExtent: .2, outerStartExtent: 0.5, outerEndExtent: 0.5 }, { name: "track", startValue: 0, endValue: 0, brush: "#19A3A3", innerStartExtent: .2, innerEndExtent: .2, outerStartExtent: 0.5, outerEndExtent: 0.5 }] });
要获取曲面的持续时间则必须确保能加载它的元数据。为了避免时间计算的错误,我们为控件设置一个函数,让它只有在loadmetadata事件触发时才会执行计算。
audioEl.addEventListener("loadedmetadata", function () { . . . }
在这个函数中我们将初始化用于改变控件值的timeupdate事件的handler函数,因为我们要指针显示当前时间。另外,还要指定当前时间的值,这样我们就可以设定歌曲播放过的刻度的颜色。
$('audio').bind('timeupdate', function (event) { $('.musicPlayer .currenttime').text(minAndSec(audioEl.currentTime)); $(".musicPlayer #linearGauge").igLinearGauge("option", "value", audioEl.currentTime / 60); $(".musicPlayer #linearGauge").igLinearGauge("option", "ranges", [{ name: "track", endValue: audioEl.currentTime / 60 }]); });
你还可以用同样的方法设置缓冲区的颜色。
如果想改变曲目的当前时间,则必须启动指针拖放,同时还要确保曲目的当前时间与拖动后指针指向的时间一致。
var lastPointX = 0, lastPointY = 0, isDragging = false, lastPointXVol = 0, lastPointYVol = 0; // Start the needle drag only on a mousedown on the needle document.getElementById("linearGauge").addEventListener("mousedown", function (e) { dragNeedle(e, true); document.addEventListener("mousemove", mousemove); document.addEventListener("mouseup", mouseup); }); // Function that performs the needle drag/tap to the new point dragNeedle = function (e, isMouseDown) { if (!isMouseDown && !isDragging) { return; } e.preventDefault(); var pointX = e.pageX - $("#linearGauge").offset().left; var pointY = e.pageY - $("#linearGauge").offset().top; if (isMouseDown) { var isClickPointValid = $("#linearGauge").igLinearGauge("needleContainsPoint", pointX, pointY); if (isClickPointValid) { lastPointX = pointX; lastPointY = pointY; } else { isClickPointValid = $("#linearGauge").igLinearGauge("needleContainsPoint", (pointX + 4 * lastPointX) / 5, (pointY + 4 * lastPointY) / 5); } isDragging = true; if (!isClickPointValid) { isDragging = false; return; } } var value = $("#linearGauge").igLinearGauge("getValueForPoint", pointX, pointY); if (isNaN(value)) return; // Prevent needle from dragging beyond the scale bounds var minimumValue = $("#linearGauge").igLinearGauge("option", "minimumValue"); var maximumValue = $("#linearGauge").igLinearGauge("option", "maximumValue"); var startValue = minimumValue <= maximumValue ? minimumValue : maximumValue; var endValue = minimumValue > maximumValue ? minimumValue : maximumValue; if (value > startValue && value < endValue) { $("#linearGauge").igLinearGauge("option", "value", value); $(".musicPlayer #linearGauge").igLinearGauge("option", "ranges", [{ name: "track", endValue: value }]); audioEl['currentTime'] = value * 60; } else { value = value >= endValue ? endValue : startValue; $("#linearGauge").igLinearGauge("option", "value", value); $(".musicPlayer #linearGauge").igLinearGauge("option", "ranges", [{ name: "track", endValue: value }]); audioEl['currentTime'] = value * 60; } }
接下来要设置曲目的音量控件。这里我们将它设置为一个垂直的音量条,范围为0到1。再用hide和toggle jQuery函数,这样只有在鼠标移动到音量图标上时音量条才会显示。
$("#linearGauge1").hide(); $(".vol").click(function () { $("#linearGauge1").toggle(); }); $("#linearGauge1").igLinearGauge({ width: "40px", height: "110px", minimumValue: "0", maximumValue: "1", orientation: "vertical", minorTickCount: 1, interval: 1, tickEndExtent: 0.5, scaleStartExtent: .1, scaleEndExtent: 0.9, value: 1, fontBrush: "black", ickStrokeThickness: 1, labelInterval: 1, backingBrush: "#B2CCCC", ranges: [{ name: "volume", startValue: 0, endValue: audioEl.volume, brush: "#D1E0E0", outerStartExtent: 0, outerEndExtent: 0.9 }] });
这里同样使用上面提到的dragNeedle用于控制音量,唯一不同的就是这里不需要设置当前时间,只需要确保音量值和指针值一致就行了:
audioEl['volume'] = value;
Ignite UI的linear gauge小巧精悍,可用来制作各种音乐、视频播放器,温度计和任何你能用到的地方。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:慧都控件本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢