JavaScript плагины, библиотеки и фреймворки

Пример использования

<div class="grid-stack">
    <div class="grid-stack-item" 
        data-gs-x="0" data-gs-y="0" 
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content"></div>
    </div>
    <div class="grid-stack-item" 
        data-gs-x="4" data-gs-y="0" 
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var options = {
        cell_height: 80,
        vertical_margin: 10
    };
    $('.grid-stack').gridstack(options);
});
</script>

http://troolee.github.io/gridstack.js/

https://github.com/dvnc/annotator

Ищет новые версии зависимостей в composer.json
https://github.com/vinkla/climb

Пример

<div class="banner">
    <ul><li>This is my slider.</li><li>Pretty cool, huh?</li></ul>
</div>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/unslider.js"></script> 
<script>$(function() { $('.banner').unslider() })</script>

Пример использования

function start() {
  microm.startRecording().then(function() {
    console.log('recording...')
  }).catch(function() {
    console.log('error recording');
  });
}

function stop() {
  microm.stop().then(function(result) {
    mp3 = result;
    console.log(mp3.url, mp3.blob, mp3.buffer);

    play();
    download();
  });
}

http://responsifyjs.space/

<img src="image.png" alt="" 
  data-focus-left=".30" data-focus-top=".12" data-focus-right=".79" data-focus-bottom=".66" />

Демонстрация: http://jsfiddle.net/lesson8/u66Qa/show/

$(function () {
     function FullTextContains(innerText, searchTerm) {
         for (x = 0; x < searchTerm.length; x++) {
             if (innerText.toLowerCase().indexOf(searchTerm[x].toLowerCase()) >= 0) {
                 return true;
             }
         }
         return false;
     }

     $('.faq').on('keyup input', function (e) {
         var text = $.trim($(this).val());
         if (e.keyCode == 13) {
             SearchFAQ(text);
         } else if (text == '') {
             SearchFAQ('');
         }
     });

     $('#btnFaqSearch').on('click', function (e) {
         var text = $.trim($('.faq').val());
         SearchFAQ(text);
     });

     function SearchFAQ(searchTermText) {
         var searchTerm = searchTermText.split(' ');
         if (searchTermText != '') {
             $(".faq-list .panel").filter(function (index) {
                 var panelText = $.trim($(this).text());
                 if (FullTextContains(panelText, searchTerm) == true) {
                     //console.log("found it");
                     return true;
                 } else {
                     //console.log("not found");
                     $(this).slideUp();
                     return false;
                 }
             }).slideDown();
         } else {
             $(".faq-list .panel").slideDown();
         }
     }
 });

https://github.com/ashh640/Highway

Без зависимостей, разделяется как вертикально так и горизонтально. Пример

(function() {
    function HomeViewModel() {
    }
    HomeViewModel.prototype.init = function(element) {
        //this will be called when page is navigated to
    }
    HomeViewModel.prototype.destroy = function() {
        //this is called when page is left
    }
    highway.configureRoutes({
        routes: [{
            state: 'home',
            template: 'pages/home/home.html',
            viewmodel: new HomeViewModel()
        }, {
            state: 'gettingstarted',
            template: 'pages/gettingstarted/gettingstarted.html'
        }, {
            state: 'changelog',
            template: '#changelog'
        }],
        default: 'home'
    });
})();

http://nathancahill.github.io/Split.js/