jQuery Plugin To Run Ruby Code On Your Website - OpalBox

File Size: 47.1 KB
Views Total: 403
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Run Ruby Code On Your Website - OpalBox

OpalBox is a jQuery plugin which takes advantage of Opal Ruby to Javascript Compiler to parse and execute Ruby scripts on your website.

How to use it:

1. Load the Opal Ruby to Javascript Compiler from a CDN into your document.

<script src="//cdn.opalrb.org/opal/current/opal.min.js"></script>
<script src="//cdn.opalrb.org/opal/current/opal-parser.min.js"></script>

2. Load the core CSS and a theme CSS of your choice in the head section.

<link href="opalbox.min.css" rel="stylesheet">
<link href="all_themes.min.css" rel="stylesheet">

3. Load jQuery library and the jQuery OpalBox plugin at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="opalbox.jquery.min.js"></script>

4. Wrap your Ruby code into a DIV element.

<div class="demo">
def hello
  return 'hello'


5. Call the function on the DIV element you just created and done.


6. Default plugin options.


  // Theme of the opalBox
  // light or dark
  theme: 'light',

  // Listener when compile and show the data
  onComplete: null,

  // Title of the block
  title: 'Ruby code',

  // Placeholder when there aren't any result
  result: 'Result will appear here'

Change logs:


  • Update Opal libraries to 0.8.1. Fixed an error with puts sentences


  • Added a class to errors on result.


  • Fixed some styles errors like multistrings and semicolons

This awesome jQuery plugin is developed by Angelmmiguel. For more Advanced Usages, please check the demo page or visit the official website.