https://github.com/tb/nested_form_ui

nested_form UI helpers (sortable list, sortable tabs)
https://github.com/tb/nested_form_ui

Last synced: 10 months ago
JSON representation

nested_form UI helpers (sortable list, sortable tabs)

• Host: GitHub
• URL: https://github.com/tb/nested_form_ui
• Owner: tb
• License: mit
• Created: 2013-05-30T14:14:34.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2013-05-30T20:55:54.000Z (about 13 years ago)
• Last Synced: 2025-04-08T06:37:42.342Z (about 1 year ago)
• Language: JavaScript
• Size: 133 KB
• Stars: 6
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE

Awesome Lists containing this project

README

          
# NestedFormUI

## Getting Started

Gemfile:

    gem 'nested_form_ui', '~> 0.0.1'

application.js:

    //= require nested_form_ui/sortable

application.scss:

    @import "nested_form_ui/sortable";

## Usage

### nestedFormSortable

    = semantic_nested_form_for @page do |f|

      #parts.nested-form-sortable.inputs-vertical-list{ data: { association: 'parts' } }

        = f.semantic_fields_for :parts do |pf|

          .nested-form-drag.ui-icon.ui-icon-grip-dotted-vertical

          = pf.text_field :name

          = pf.hidden_field :position

          = pf.link_to_remove do

            .ui-icon.ui-icon-close

      = f.link_to_add 'Add part', :parts

      = f.actions

    :javascript

      $(function(){

        $('#parts').nestedFormSortable();

      })

![nestedFormSortable](https://github.com/tb/nested_form_ui/raw/master/img/sortable.png)

### nestedFormSortableTabs

    = semantic_nested_form_for @page do |f|

      #parts.nested-form-sortable{ data: { association: 'parts' } }

        %ul.nested-form-nav.nested-form-tabs

          %li.nested-form-action

            = f.link_to_add 'Add part', :parts

        = f.semantic_fields_for :parts do |pf|

          = pf.inputs do

            = pf.input :name

            = pf.input :body

            = pf.input :position, as: :hidden

            = pf.hidden_field :_destroy

      = f.actions

    :plain

      $(function(){

        $('#parts').nestedFormSortableTabs({

          templates: {

            tab: '
{{dragIcon}}{{text}}{{removeIcon}}
',

            dragIcon: '' ,

            removeIcon: ''

          }

        });

      })


![nestedFormSortableTabs](https://github.com/tb/nested_form_ui/raw/master/img/sortableTabs.png)

# Copyright

This project rocks and uses MIT-LICENSE.