assets/css/bootstrap-editable.css
assets/js/x-editable/bootstrap-editable.js
assets/js/x-editable/ace-editable.js
mustache/app/views/assets/scripts/profile.js
assets/js/jquery.validate.js
assets/js/additional-methods.js
$('#my-form').validate({
errorElement: 'div',
errorClass: 'help-block',
focusInvalid: false,
rules: {
email: {
required: true,
email: true
},
name: {
required: true
},
url: {
required: true,
url: true
}
},
messages: {
email: {
required: "Please provide a valid email.",
email: "Please provide a valid email."
}
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
},
success: function (e) {
$(e).closest('.form-group').removeClass('has-error').addClass('has-info');
$(e).remove();
},
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});
Error placement and highlighting is arbitrary and depends on your HTML structure.
ignore option for more control:
$('#my-form').validate({
//...
ignore: ":hidden:not(select.chosen-select)"
//...
});
In this example, because Chosen plugin hides original select element,
we can use this to make sure validation is performed.
assets/css/colorbox.css
assets/js/jquery.colorbox-min.js
var colorbox_params = {
rel: 'colorbox',
reposition: true,
scalePhotos: true,
scrolling: false,
previous: '<i class="ace-icon fa fa-arrow-left"></i>',
next: '<i class="ace-icon fa fa-arrow-right"></i>',
close: '×',
current: '{current} of {total}',
maxWidth: '100%',
maxHeight: '100%',
onComplete: function(){
$.colorbox.resize();
}
}
$('[data-rel="colorbox"]').colorbox(colorbox_params);
$('#cboxLoadingGraphic').append("<i class='ace-icon fa fa-spinner orange'></i>");
assets/css/dropzone.css
assets/js/dropzone.js
.dropzone class will be automaically converted to a file upload area,
unless you set Dropzone.autoDiscover = false
mustache/app/views/assets/scripts/dropzone.js
assets/js/bootbox.js
$('#some-button').on('click', function() {
bootbox.confirm('Are you sure?', function(result) {
if(result) {
//do something
}
})
})
$("#some-button").on('click', function() {
bootbox.confirm({
message: "Are you sure?",
buttons: {
confirm: {
label: "OK",
className: "btn-primary btn-sm",
},
cancel: {
label: "Cancel",
className: "btn-sm",
}
},
callback: function(result) {
//if(result) do something;
}
});
});
$("#some-button").on('click', function() {
bootbox.dialog({
message: "I am a custom dialog with custom buttons,
buttons:
{
"success" :
{
"label" : "<i class='ace-icon fa fa-check'></i> Success!",
"className" : "btn-sm btn-success",
"callback": function() {
//clicked, do something
}
},
"danger" :
{
"label" : "Danger!",
"className" : "btn-sm btn-danger",
"callback": function() {
//clicked, do something
}
}
}
})
})
assets/css/colorpicker.css
assets/js/bootstrap-colorpicker.js
$('#colorpicker1').colorpicker();
var picker = $('#colorpicker1')[0];
if(picker.type !== 'color') {//if browser doesn't have built-in colorpicker
$(picker).colorpicker();
}
assets/css/jquery.gritter.css
assets/css/jquery.gritter.js
.gritter-info.gritter-error.gritter-success.gritter-warning.gritter-light light color style.gritter-center centers the notification box
jQuery.gritter.add({
title: 'This is a sticky notice!',
text: 'Sticky content',
image: 'path/to/image',
sticky: true,
time: '',
class_name: 'gritter-info gritter-light gritter-center'
});
assets/js/jquery.nestable.js
Item 7
In the above example, when dragging starts
Published Articles
.normal-icon will be hidden and
.drag-icon is shown
$('.dd').nestable();
$('.dd-handle a').on('mousedown', function(e){
e.stopPropagation();
});
assets/js/jquery-ui.custom.js
assets/js/jquery.slimscroll.js
assets/js/jquery.raty.js