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

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

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

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

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />      
<!-- Importing jQuery library -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- Importing the FlightIndicators library -->
<script src="js/jquery.flightindicators.js"></script>

HTML结构
可以通过插件一个元素来存放一个指示器。

1
<span id="attitude"></span>

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

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

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

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

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

指示器的类型可以是:attitude、heading、variometer、airspeed或altimeter。如果type参数没有设置将使用默认的指示器类型。

配置参数

1
2
3
4
5
6
7
8
9
10
11
12
var options = {
    size:200//设置指标(正方形)的像素大小
    roll:0//用于姿态指示器的滚动角度(度)
    pitch:0//姿态指示器的俯仰角度(度)
    heading:0//标题指示符的标题角度(以度为单位)
    vario:0//变量计指示器以1000英尺/分钟为单位的变化计
    airspeed: 0//空气速度指示器的空气速度
    altitude:0//高度计指示器的高度
    pressure:1000//高压计指示器的压力单位为hPa
    showBox:true//设置外部方形框是否可见(true或false)
    img_directory:'img /'//保存图像的目录
}
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论