Flight Indicators Plugin是一款可以制作高质量飞行仪表指示器的jQuery插件。该插件通过html、CSS3、jQuery和SVG图片来制作各种飞行仪表指示器。插件中的方法非常容易定制和实现,并且使用的图片都是矢量图片,放大也不会有失真现象。
该插件当前支持的飞行指示器类型有:
- 人工地平线
- Heading
- 垂直速度
- 空气速度
- 高度计
下面是一些示例图片。
下图是800像素的飞行仪表指示器的截图,使用矢量图片不会发生失真现象。
使用方法
使用该飞行仪表指示器插件首先要引入必要的js和css文件。
HTML结构
可以通过插件一个元素来存放一个指示器。
调用插件
然后在页面加载完毕之后,可以通过下面的方法来调用该飞行仪表指示器插件。
var indicator = $.flightIndicator('#attitude', type, options);
第一个参数是一个jQuery选择器,type
参数用于指定指示器的类型,options
参数可以覆盖默认的参数。
最简单的调用方法可以如下:
var indicator = $.flightIndicator('#attitude', 'attitude');
指示器的类型可以是:attitude
、heading
、variometer
、airspeed
或altimeter
。如果type
参数没有设置将使用默认的指示器类型。
配置参数
下面是该飞行仪表指示器的默认参数设置:
var options = { size : 200, // Sets the size in pixels of the indicator (square) roll : 0, // Roll angle in degrees for an attitude indicator pitch : 0, // Pitch angle in degrees for an attitude indicator heading: 0, // Heading angle in degrees for an heading indicator vario: 0, // Variometer in 1000 feets/min for the variometer indicator airspeed: 0, // Air speed in knots for an air speed indicator altitude: 0, // Altitude in feets for an altimeter indicator pressure: 1000, // Pressure in hPa for an altimeter indicator showBox : true, // Sets if the outer squared box is visible or not (true or false) img_directory : 'img/' // The directory where the images are saved to }
所有的参数选项都是可选项。
更新指示器信息
插件中提供了一些可用的方法来更新指示器,下面是一个小例子:
var attitude = $.flightIndicator('#attitude', 'attitude'); attitude.setRoll(30); // Sets the roll to 30 degrees
下面是所有可用方法。
indicator.setRoll(roll); // Sets the roll of an attitude indicator indicator.setPitch(pitch); // Sets the pitch of an attitude indicator indicator.setHeading(heading); // Sets the heading of an heading indicator indicator.setVario(vario); // Sets the climb speed of an variometer indicator indicator.setAirSpeed(speed); // Sets the speed of an airspeed indicator indicator.setAltitude(altitude); // Sets the altitude of an altimeter indicator indicator.setPressure(pressure); // Sets the pressure of an altimeter indicator indicator.resize(size); // Sets the size of any indicators indicator.showBox(); // Make the outer squared box of any instrument visible indicator.hideBox(); // Make the outer squared box of any instrument invisible
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!