boxPortionPicker.js Example

Shows basic functionality of boxPortionPicker.js JQuery plugin. Here is the github repo: https://github.com/wpatter6/BoxPortionPicker.js

by wpatter6

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://rawgit.com/wpatter6/BoxPortionPicker.js/master/boxPortionPicker.js"></script>
<span id="SpanPercentage"></span> Selected
<div id="TablePickerDiv" style="height:400px"></div>
<br/>
<input type="number" id="TextSelect" style="width:40px" min="1" />
<input type="button" id="ButtonSelect" value="Select" />
<input type="button" id="ButtonClear" value="Clear" />

JavaScript

var TOTAL_CELL_COUNT = 9;
var SELECTED_CELL = 2;
var CELL_MARGIN = 1;

$(function () {
  $("#TablePickerDiv").boxPortionPicker({
    cells: TOTAL_CELL_COUNT,
    selected: SELECTED_CELL,
    cellMargin: CELL_MARGIN,
    cellSelect: function (sender, number) {
      $("#TextSelect").val(number);
      $("#SpanPercentage").text(sender.get_percentageText());
    },
    cellCss: { "text-align": "center" },
    cellHtml: "{1}"//it will replace {0} with the cell number, and {1} with the percentage text
  });
  
  /* Set up click events for buttons */
  $("#ButtonClear").click(function () {
    $("#TablePickerDiv").data("boxPortionPicker").clearSelection()
  })
  $("#ButtonSelect").click(function () {
    $("#TablePickerDiv").data("boxPortionPicker").selectCell($("#TextSelect").val())
  })

  /* Set initial values for display textboxes */
  $("#TextSelect").val($("#TablePickerDiv").data("boxPortionPicker").get_selected());
  $("#TextSelect").attr("max", TOTAL_CELL_COUNT);
  $("#SpanPercentage").text($("#TablePickerDiv").data("boxPortionPicker").get_percentageText());
})