阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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.

      目录
      目录