0.0
No commit activity in last 3 years
No release in over 3 years
nested_form UI helpers (sortable list, sortable tabs)
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Runtime

 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

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: '<li class="tabs-tab">{{dragIcon}}<a href="\#{{id}}">{{text}}</a>{{removeIcon}}</li>',
        dragIcon: '<span class="nested-form-drag ui-icon ui-icon-grip-dotted-vertical"></span>' ,
        removeIcon: '<span class="nested-form-remove ui-icon ui-icon-close"></span>'
      }
    });
  })

nestedFormSortableTabs

Copyright

This project rocks and uses MIT-LICENSE.