Theme Template for Bootstrap

Code Samples

Click the RADIO Publishers

Radio sample 1 Radio sample 2 Radio sample 3 Radio sample 4

These radio buttons control the paragraphs below. Click them and see the subscribers react.

The radio buttons will publish a single event with a single value. It is the subsribers (the container below) - who listen for the { event : value } pair.
If there is a match - the subscriber element will show. If no match is found the subscriber element will hide.


<!-- Publishers -->
<div class="jqr-delegate-hook">
  <label>
    <input type="radio" name="radios" class="jqr-publisher"
      data-jqr-publish-events="/radio/events/" value="radio.attr.val1" /> radio.attr.val1
  </label>

  <label>
    <input type="radio" name="radios" class="jqr-publisher"
      data-jqr-publish-events="/radio/events/" value="radio.attr.val2" /> radio.attr.val2
  </label>
</div>

Subscibers

These sections are shown by default. Simply becuase there is no hidden style applied.

Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero nobis accusamus corporis, repellendus esse possimus numquam est deleniti vero laudantium in, facilis nisi ratione beatae, nostrum reprehenderit labore tempore? Quam!

Section 2

Section 3

Section 4


<!-- Subscribers -->
<div class="jqr-subscriber"
        data-jqr-subscribe-events="/radio/events/"
        data-jqr-subscribe-values="radio.attr.val1">
  ...Single event, single value
</div>

<div class="jqr-subscriber"
        data-jqr-subscribe-events="/radio/events/"
        data-jqr-subscribe-values="radio.attr.val2|radio.attr.val3">
  ...Single event, multiple values
</div>