jQuery高质量飞行仪表指示器插件

当前位置:主页 > jQuery库 > 图表 > jQuery高质量飞行仪表指示器插件
jQuery高质量飞行仪表指示器插件
分享:

    插件介绍

    Flight Indicators Plugin是一款可以制作高质量飞行仪表指示器的jQuery插件。该插件通过html、CSS3、jQuery和SVG图片来制作各种飞行仪表指示器。插件中的方法非常容易定制和实现,并且使用的图片都是矢量图片,放大也不会有失真现象。

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-21
    阅读:
简要教程

Flight Indicators Plugin是一款可以制作高质量飞行仪表指示器的jQuery插件。该插件通过html、CSS3、jQuery和SVG图片来制作各种飞行仪表指示器。插件中的方法非常容易定制和实现,并且使用的图片都是矢量图片,放大也不会有失真现象。

该插件当前支持的飞行指示器类型有:

  • 人工地平线
  • Heading
  • 垂直速度
  • 空气速度
  • 高度计

下面是一些示例图片。

各种飞行仪表指示器

下图是800像素的飞行仪表指示器的截图,使用矢量图片不会发生失真现象。

高质量的飞行仪表指示器

使用方法

使用该飞行仪表指示器插件首先要引入必要的js和css文件。

<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.flightindicator.js"></script>                
              
HTML结构

可以通过插件一个<span>元素来存放一个指示器。

<span id="attitude"></span>                
              
调用插件

然后在页面加载完毕之后,可以通过下面的方法来调用该飞行仪表指示器插件。

var indicator = $.flightIndicator('#attitude', type, options);                
              

第一个参数是一个jQuery选择器,type参数用于指定指示器的类型,options参数可以覆盖默认的参数。

最简单的调用方法可以如下:

var indicator = $.flightIndicator('#attitude', 'attitude');                
              

指示器的类型可以是:attitudeheadingvariometerairspeedaltimeter。如果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