rails_dialog
rails_dialog
is sass mixin for rails to implement a dialog easily. This gem is based on sass-dialog.
Demonstration
You can try how this works here.
(This demonstration is based on sass-dialog version, but works in the same way.)
Instration
Put these lines in your Gemfile and run the bundle command to install.
gem 'sass-rails'
gem 'compass-rails'
gem 'rails_dialog'
Import rails_dialog
. (This is example of application.css.scss
)
@import 'compass';
@import 'rails_dialog';
Usage
HTML
Write nested div tags to express a dialog. Outer one needs a id attribute and a class attribute. In addition, link or button to show dialog is necessary.
<div id="dialog" class="dialog">
<div>
<!-- Content in dialog -->
<h2>Dialog</h2>
<div>
<a href="javascript:void(0);" id="hide-link">Hide Dialog</a>
</div>
</div>
</div>
<a href="javascript:void(0);" id="show-link">Show Dialog</a>
Sass
Include dialog
mixin. You have to specify width and height of dialog as parameters.
.dialog {
@include dialog(700px, 400px);
}
Coffeescript
Javascript shows and hides the dialog.
$ ->
$('#show-link').click ->
$('#dialog').show()
$('#hide-link').click ->
$('#dialog').hide()