js Plugins, jQuery Plugins, jQuery Tutorials, jQuery Articles, jQuery Examples, jQuery Demos. On www.jsplugins.net
<link rel="stylesheet" type="text/css" href="./components/bootstrap/dist/css/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="bs.sm.css"> <script type="text/javascript" src="./components/jquery/dist/jquery.js"></script> <script type="text/javascript" src="./components/bootstrap/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bs.sm.js"></script>2. HTML
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">[...]</div>
<div class="modal-body">
<!-- Your Sub Modal, requires sub-modal class -->
<div class="modal submodal">[...submodal content...]</div>
<p>[parent modal content]</p>
</div>
<div class="modal-footer">[...]</div>
</div>
</div>
</div>
<a href="#my-submodal" class="btn" data-toggle="submodal">Open Submodal</a>
<a href="#my-submodal" class="btn" data-dismiss="submodal">Close Submodal</a>
// Open
$('#my-submodal').submodal('open');
// Close
$('#my-submodal').submodal('close');
// Toggle
$('#my-submodal').submodal('toggle');
4. EVENTS// Before submodal is shown
$('#my-submodal').on('beforeShow', fn);
// After submodal is shown
$('#my-submodal').on('show', fn);
// Before submodal is hidden
$('#my-submodal').on('beforeHide', fn);
// After submodal is hidden
$('#my-submodal').on('hide', fn);
$('#my-element').setFocus(options);
Focusable.setFocus($('#my-element'), options);
Focusable.refresh();
Focusable.hide();
Focusable.getActiveElement();
Focusable.getOptions();
###### Options
Property | Value | Default | Description
------------ | ------------- | ------------- | -------------
fadeDuration | Number | 700 | Duration of the overlay transition (milliseconds).
hideOnClick | Boolean | false | Hides the overlay when the user click into it.
hideOnESC | Boolean | false | Hides the overlay when the user press Esc.
findOnResize | Boolean | false | Refind the element in the DOM in case that the element don't still exists.
###### Runing tests
* `npm install`
* `grunt`
* See the result of testsuite in [http://localhost:9092](http://localhost:9092)
###### Dependencies
- jQuery
###### Contributing
0. Check [open issues](https://github.com/zzarcon/focusable/issues)
1. [Fork it](https://github.com/zzarcon/focusable/fork)
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request
###### Author
You can follow me on Twitter - https://twitter.com/zzarcon
<link href="css/custom-radio-checkbox.css" rel="stylesheet" type="text/css" media="screen" /><script src="js/jquery.custom-radio-checkbox.js"></script> |
<form method="post" action="" id="form"> <div class="fl w200 mr10"> <h2>Radio group 1</h2> <p> <label for="yes"> <input type="radio" name="radioGroup1" id="yes" value="Yes" />Yes </label> </p> <p> <label for="no"> <input type="radio" name="radioGroup1" id="no" value="No" />No </label> </p> <p> <label for="maybe"> <input type="radio" name="radioGroup1" id="maybe" value="Maybe" />Maybe </label> </p> </div> <div class="fl w200"> <h2>Radio group 2</h2> <p> <label for="uno"> <input type="radio" name="radioGroup2" id="uno" value="Uno" />Uno </label> </p> <p> <label for="dos"> <input type="radio" name="radioGroup2" id="dos" value="Dos" />Dos </label> </p> <p> <label for="tres"> <input type="radio" name="radioGroup2" id="tres" value="Tres" />Tres </label> </p> </div> <div class="separator"></div> <!-- checkbox --> <p> <label for="checkbox1"> <input type="checkbox" name="Checkbox" id="checkbox1" value="1" />Checkbox 1 </label> </p> <p> <label for="checkbox2"> <input type="checkbox" name="Checkbox" id="checkbox2" value="2" />Checkbox 2 </label> </p> <p> <label for="checkbox3"> <input type="checkbox" name="Checkbox" id="checkbox3" value="3" />Checkbox 3 </label> </p> <div class="separator"></div> <p id="submit"><input type="submit" value="Show result" /></p></form>
<link href="css/jquery-valid-lightbox-v1_1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery-valid-lightbox-v1.1.js"></script>
<form name="demo_form" method="POST" action="javascript:void(0)" onsubmit="return checking('success.html');">
<div class="item">
<h6><label>First Name</label></h6>
<div class="input_panel"><input type="text" id="firstname" name="firstname"></div>
</div>
<div class="item">
<h6><label>Last Name</label></h6>
<div class="input_panel"><input type="text" id="lastname" name="lastname"></div>
</div>
<div class="item">
<h6><label>Age</label></h6>
<div class="input_panel">
<select id="age" name="age">
<option value=""> - Please select the range -</option>
<option value="0">0-18</option>
<option value="19">19-35</option>
<option value="36">36-50</option>
<option value="50">50-90</option>
<option value="100">>100</option>
</select>
</div>
</div>
<div class="item">
<h6><label>Gender</label></h6>
<div class="input_panel">
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female
</div>
</div>
<div class="item">
<h6><label>Service you like</label></h6>
<div class="input_panel">
<input type="checkbox" name="service" value="Bike">bike<br>
<input type="checkbox" name="service" value="Car">car
</div>
</div>
<div class="item">
<h6><label>Where to know us</label></h6>
<div class="input_panel">
<input type="checkbox" name="where_from" value="newspaper">newspaper<br>
<input type="checkbox" name="where_from" value="friend">friend<br>
<input type="checkbox" name="where_from" value="internet">internet
</div>
</div<
<input id="submit" type="submit" value="Submit form" >
<br /><br />
</form>
var config = {
"form_name" : "demo_form", //Your form name, not id name
"submit_form" : true, //"true" is submit form, "false" would pop-up an error message.
"title-message" : {
"success_title" :"Validation Success", //Lightbox title when validation was success.
"error_title" :"Error!" //Lightbox title when validation was fail.
},
"success-message" :"Your application is submittted.", //Lightbox content when validation was succes.
"error-message" : [
{"name" :"firstname", //1st input field name (name bt not id)
"err_msg" :"Title 1 is empty"}, //Related error (1st input field) if validation was incorrect.
{"name" :"lastname" , //2st input field name
"err_msg" :"You have fogotten fill in Title 2"}, //Related error (2st input field) if validation was incorrect.
{"name" :"age", //3st input field name
"err_msg" :"Which is the range of your age"}, //Related error (3st input field) if validation was incorrect.
{"name" :"gender", //4st input field name
"err_msg" :"Please select your gender"}, //Related error (4st input field) if validation was incorrect.
{"name" :"service" , //5st input field name
"err_msg" :"Which service you like most ?"}, //Related error (5st input field) if validation was incorrect.
{"name" :"where_from" , //6st input field name
"err_msg" :"You havn't fill in where to know us."} //Related error (6st input field) if validation was incorrect.
],
"footer_close_btn_text" :"Close", //Close button tex on the bottom-right corner of pop-up message box
"close_btn_icon" :"X", //Close button icon on the top-right corner of pop-up message box
};
| value | Default demo value e.g. | Description |
| form_name | demo_form | Your form name |
| submit_form | true | “true” is submit form, “false” would pop-up an error message. |
| title-message.success_title | Validation Success | Lightbox title when validation was success. |
| title-message.error_title | Error! | Lightbox title when validation was fail. |
| success-message | Your application is submittted. | Lightbox content when validation was succes. |
| error-message.name | gender | Your form name, not id name |
| error-message.err_msg | Please select your gender | Your form name, not id name |
| footer_close_btn_text | Close | Close button tex on the bottom-right corner of pop-up message box |
| close_btn_icon | X | Close button tex on the bottom-right corner of pop-up message box |
<!-- Include jQuery --><script src="path/to/jquery.min.js"></script><!-- Include jQuery Sidebar --><script src="path/to/jquery.sidebar.min.js"></script> |
<div class="sidebar left">Hello World</div><div class="sidebar right">I am on right!</div><div class="sidebar top">I am on top!</div><div class="sidebar bottom">I am on bottom!</div> |
// Sidebar on left (default)$(".sidebar.left").sidebar().trigger("sidebar:open");// Sidebar on right side$(".sidebar.right").sidebar({side: "right"});// Sidebar on top side$(".sidebar.top").sidebar({side: "top"});// Sidebar on bottom side$(".sidebar.bottom").sidebar({side: "bottom"}); |
$(".my-sidebar").sidebar({...});
$(".my-sidebar").trigger("sidebar:open");
$(".my-sidebar").trigger("sidebar:close");
$(".my-sidebar").trigger("sidebar:toggle");
$(".my-sidebar").on("sidebar:opened", function () {
// Do something on open
});
$(".my-sidebar").on("sidebar:closed", function () {
// Do something on close
});