Download Protostrap

JavaScript


This is an overview of useful Helper Classes and Javascript functions.
They help you make your prototype interactive and playful.

Helper Classes



Class Description and attributes
.btn-spinner If a button with this class is clicked its label is replaced by a spinner for the duration of a second.
Copy Code      
<button class="btn btn-default btn-spinner">Label</button>
<button class="btn btn-default btn-spinner">Label</button>

Data attributes

None.

.checkall Used in table headers to check all checkboxes in the column.
Copy Code      
<table class="table ">
    <tr>
        <th>
            <input type="checkbox" class="checkall"
                   data-class="checkme" ... >
        </th>
        <th>Col 2</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="checkme" ... >
        </td>
        <td> ... </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="checkme" ... >
        </td>
        <td>2</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="checkme" ... >
        </td>
        <td>3</td>
    </tr>
</table>
<table class="table "> <tr> <th> <input type="checkbox" class="checkall" data-class="checkme" ... > </th> <th>Col 2</th> </tr> <tr> <td> <input type="checkbox" class="checkme" ... > </td> <td> ... </td> </tr> <tr> <td> <input type="checkbox" class="checkme" ... > </td> <td>2</td> </tr> <tr> <td> <input type="checkbox" class="checkme" ... > </td> <td>3</td> </tr> </table>

Data attributes

data-class
The class the checkboxes have to have in order to be
.copyToClipboard Copies the content of the element specified in the data-target attribute to the clipborat
Copy Code      
<button class="btn copyToClipboard" data-target="copyContent">Copy that</button>
<div id="copyContent">
    Copy this
</div>
<button class="btn copyToClipboard" data-target="copyContent">Copy that</button> <div id="copyContent"> Copy this </div>

Data attributes

data-target
The element of which the content is to be copied
.fakeReload When clicked elements with this class trigger a fake reload for the element specified in the data-target attribute. The target element is replaced with a spinner for 1 second after which the original content is shown again.
Copy Code      
<button class="btn fakeReload" data-target="reloadTarget">Reload text</button>
<div id="reloadTarget">
    Lore...
</div>
<button class="btn fakeReload" data-target="reloadTarget">Reload text</button> <div id="reloadTarget"> Lore... </div>

Data attributes

data-target
The element that is to be replaced by the spinner.
.loginUser When an element with this class is clicked the user specified by the <b class="code">data-key</b> attribute is logged in. There has to be a login form on the page for this to work.
Copy Code      
<button class="btn btn-default loginUser" data-key="one@c...y.com">
    Login
</button>
<button class="btn btn-default loginUser" data-key="one@c...y.com"> Login </button>

Data attributes

data-key
The email address that identyfies the user you want to log in.
.passwordToggle Is added to an input-group-addon with a .fa-square icon. Clicking it toggles the visibility of the password.
Copy Code      
<div class="input-group">
    <input type="password" class="form-control" name="" placeholder="Password" >
    <span class="input-group-addon passwordToggle"><i class="fa fa-square-o"></i> Show</span>
</div>
<div class="input-group"> <input type="password" class="form-control" name="" placeholder="Password" > <span class="input-group-addon passwordToggle"><i class="fa fa-square-o"></i> Show</span> </div>

Data attributes

None.

.selectOnFocus When added to an input field the content gets selected on focus
Copy Code      
<input type="text" class="form-control selectOnFocus" name="field">
<input type="text" class="form-control selectOnFocus" name="field">

Data attributes

None.

.toggleMultiPrimary When added to a button group clicking its buttons get the class <b class="code">.btn-primary</b>. Multiple buttons can have the primary class. Clicking on the button a second time removes the class
Copy Code      
<div class="btn-group toggleMultiPrimary">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group toggleMultiPrimary"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

Data attributes

None.

.toggleSinglePrimary When added to a button group clicking its buttons get the class <b class="code">.btn-primary</b> removing it from the other buttons
Copy Code      
<div class="btn-group toggleSinglePrimary">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group toggleSinglePrimary"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

Data attributes

None.

.tooltiptrigger Add this class to elements to get a Bootstrap tooltip. All data-* attributes of the Bootstrap tooltip apply. Add the data-hide attribute with the number of milliseconds after which the tooltip is hidden.
Copy Code      
<button type="button" class="btn tooltiptrigger" data-toggle="tooltip" data-hide="1000" title="Tooltip on top">Tooltip </button>
<button type="button" class="btn tooltiptrigger" data-toggle="tooltip" data-hide="1000" title="Tooltip on top">Tooltip </button>

Data attributes

data-hide   (optional)
Number of milliseconds after which the tooltip is closed. If not specified the tooltip will stay open.
.trigger Buttons with this class filter elements of a group. The data-group attribute specifies the selector class for the elements.
The data-item attribute specifies the selector class of the elements that are to be shown. The class of the elements follows the construct group-item
Copy Code      
<div class="btn-group toggleSinglePrimary">
    <button class="btn trigger" data-group="contacts" data-item="people">
        People
    </button>
    <button class="btn trigger" data-group="contacts" data-item="companies">
        Companies
    </button>
</div>

<ul class="list-group">
    <li class="list-group-item contacts contacts-people">
        Berta Miller
    </li>
    <li class="list-group-item contacts contacts-companies">
        ACME Inc.
    </li>
    <li class="list-group-item contacts contacts-people">
        Giuseppe Mortacci
    </li>
    <li class="list-group-item contacts contacts-companies">
        Grand Total Corp
    </li>
    ...
</ul>
<div class="btn-group toggleSinglePrimary"> <button class="btn trigger" data-group="contacts" data-item="people"> People </button> <button class="btn trigger" data-group="contacts" data-item="companies"> Companies </button> </div> <ul class="list-group"> <li class="list-group-item contacts contacts-people"> Berta Miller </li> <li class="list-group-item contacts contacts-companies"> ACME Inc. </li> <li class="list-group-item contacts contacts-people"> Giuseppe Mortacci </li> <li class="list-group-item contacts contacts-companies"> Grand Total Corp </li> ... </ul>

Data attributes

data-group
The class of the elements that could be filtered
data-item
The class of the elements belonging to the group thatare not hidden

Function Reference



Function Description and Parameters
countDown() Reads the content of the specified element, subtracts 11% and writes a rounded value back into the element. The element has to contain an number for this to work.
countDown(target);

Parameters

target
The element affected
showTooltip() Triggers a tooltip programmatically from inside jQuery on the element specified by the parameter target.
showTooltip(target, text);

Parameters

target
The element over which the tooltip is to be shown.
text
The text of the tooltip.
updateSessionVar() Sends an AJAX request to the server to update the specified session variable
updateSessionVar(updateType, variable, value);

Parameters

updateType
Specifies the type of update that can be performed. Admissible values: set, push, remove and null,
See the segment on changing data for further information
variable
The name of the variable. If it is an element of an array the name can be the full path including all levels, e.g. news.1.title
value
The new value of the variable