先看个例子吧¶

看到有个球在飞来飞去么，你能抓到他么？

HTML¶

<style type="text/css">
  #show-ball{
      overflow:hidden;
      height:300px;
      background:#eee;
      position:relative;
  }

  #show-ball .ball{
    display:inline-block;
      width:50px;
      height:50px;
      border-radius:25px;
      background:#4679BD;
      transition:all 1s ease;
      -webkit-transition:all 1s ease;
      -moz-transition:all 1s ease;
  }
</style>

<div id="show-ball">
    <span class="ball"></span>
</div>

JS¶

var Position = FNX.include('position/position');

var stop = false;
var target = $('#show-ball .ball')
            .hover(function () {
                stop = true;
            }, function () {
                stop = false;
            });

setInterval(function () {
    if (stop) return;
    var x = Math.floor(Math.random() * 100);
    var y = Math.floor(Math.random() * 100);
    Position.pin({
        element : target,
        x : 'center',
        y : 'center'
    }, {
        element : $('#show-ball').parent(),
        x : x + '%',
        y : y + '%'
    });
}, 800);

使用¶

1. 引入文件¶

<script type="text/javascript" src="js/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/fnx/fnx.min.js"></script>

<script type="text/javascript">
    var Widget = FNX.include('widget/widget');
    var widgetInstance = new Widget({
        //options
        template: '<p>内容</p>'
    });
</script>

2. ID 的构成¶

FNX 的 ID 由两部分组成：{{module}}/{{name}}

module 为模块的名字
name 为具体的文件，可以有多个，一般与模块名相同

当你拿到上面的 ID 后，就可以直接用 FNX.include 来使用这个模块了。

var Position = FNX.include('position/position');

// use Position ...

3. 模块列表¶

模块列表

5 分钟快速上手

先看个例子吧¶

HTML¶

JS¶

使用¶

1. 引入文件¶

2. ID 的构成¶

3. 模块列表¶