插件 jQuery.Gridly 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Gridly 中文API文档 https://github.com/ksylvest/jquery-gridly

jQuery Gridly

Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.

Installation

To install copy the javascripts and stylesheets directories into your project and add the following snippet to the header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.gridly.js" type="text/javascript"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />

This plugin is also registered under http://bower.io/ to simplify integration. Try:

npm install -g bower
bower install gridly

Lastly this plugin is registered as a https://rails-assets.org/ to simplify integration with Ruby on Rails applications:

Gemfile

+ source 'https://rails-assets.org'
...
+ gem 'rails-assets-gridly'

application.css

/*
 ...
 *= require gridly
 ...
*/

application.js

//= require jquery
...
//= require gridly

Examples

Setting up a gridly is easy. The following snippet is a good start:

<style>
  .brick.small {
    width: 140px;
    height: 140px;
  }

  .brick.large {
    width: 300px;
    height: 300px;
  }
</style>

<div class="gridly">
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
</div>

<script>
  $('.gridly').gridly();
</script>

Configuration

Gridly uses a fairly standard pattern for handling grids and offers three configuration options for sizing: base, gutter and columns:

$('.gridly').gridly({
  base: 60, // px 
  gutter: 20, // px
  columns: 12
});

When using the drag and drop sorting callbacks can be passed in when initializing:

var reordering = function($elements) {
  // Called before the drag and drop starts with the elements in their starting position.
};

var reordered = function($elements) {
  // Called after the drag and drop ends with the elements in their ending position.
};

$('.gridly').gridly({
  callbacks: { reordering: reordering , reordered: reordered }
});


$('.gridly').gridly('draggable', 'off'); // disables dragging
$('.gridly').gridly('draggable', 'on);  // enables dragging

Contributing

Gridly is maintained in CoffeeScript. All contributions need to be submitted in CoffeeScript. The project includes a Cakefile that can be used to compile all assets (see: cake watch). For more information about CoffeeScript see:

Status

Status

Copyright (c) 2013 - 2015 Kevin Sylvestre. See LICENSE for details.

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了