risorse in linea con twitter bootstrap

risorse bootstrap:

  • http://jaymorrow.github.com/validatr/ libreria di validazione
  • http://dl.dropbox.com/u/140543/FresherEditor/demo.html
  • http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources lista di estensioni
  • http://jasny.github.com/bootstrap/javascript.html#fileupload ottime estensioni
  • http://jasny.github.com/bootstrap/javascript.html#inputmask inputmask!
  • http://bootboxjs.com/#api prompt alert confirm replacement
  • http://zf-boilerplate.com/ ZF extension with bootstrap built in
  • EasyBib_Form_Decorator ZF form for bootstrap
  • http://jschr.github.io/bootstrap-modal/
  • https://github.com/ifightcrime/bootstrap-growl
  • http://jbutz.github.io/bootstrap-lightbox/ lightbox compatibile
  • http://www.bootstraptor.com/
  • https://bootsnipp.com/index.php/resources
  • http://bootswatchr.com/gallery personalizzazione colori
  • http://bootswatch.com/ modifica boottstrap base
  • http://www.lavishbootstrap.com/ bootstrap colorscheme

temi/ FW TWB based

  • http://bootflat.github.io/ tema flat

code loaders

backbone or underscore which removed support for AMD style module loaders

  • http://browserify.org/
  • http://requirejs.org/ permette di usare moduli npm nel browser
  • http://bower.io/ by twitter

loaders più semplici per gestire poche dipendenze

  • http://headjs.com/ JS LOADER
  • https://github.com/rgrove/lazyload/ JS LOADER

tabelle

forms

  • http://jaymorrow.github.io/validatr/fields.html bootstrap validation
  • http://www.unwrongest.com/projects/elastic/ textarea espandibile
  • http://digitalbush.com/projects/masked-input-plugin/ masked input

form validation

autocomplete

  • http://www.devbridge.com/projects/autocomplete/jquery/
<script language="JavaScript" type="text/JavaScript">
    $('#ragione_sociale').autocomplete({
        serviceUrl: '/client/ajax_search',
        minChars: 3,
        onSelect: function (suggestion) {
            // alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
    });
    </script>
<style>
.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}
.autocomplete-suggestion {
    padding: @paddingSmall;
    white-space: nowrap;
    overflow: hidden;
}
.autocomplete-selected {
    background: @linkColor;
    color: #fff;
    font-weight: bold;
}
// testo corrispondente nella risposta alla ricerca in input
.autocomplete-suggestions strong {
    font-weight: bold;
    text-decoration: underline;
    color: @textColor;
    //background: @linkColor;
}
</style>
<?php
// Controller
    public function ajaxsearchAction() {
        $ragione_sociale = $this->getRequest()->getParam('query');
        $suggestions = array();
        // your DAO
        foreach($oCustomersPage->getObjectArray() as $customer){
            $suggestions[] = array(
              'value'=> $customer->getRagSoc(),
              'data'=> $customer->getRagSoc() );
        }
        $data = array(
            'query' => "$ragione_sociale",
            'suggestions' => $suggestions
        );
        header('Cache-Control: no-cache, must-revalidate');
        header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
        header('Content-type: application/json');
        die(json_encode($data));
    }
?>

altre implementazioni:

  • http://jasny.github.io/bootstrap/javascript.html#typeahead autocomplite ajax
  • http://ivaynberg.github.io/select2/ bootstrap compatible

date picker

  • http://vincentlamanna.com/BootstrapFormHelpers/datepicker.html bootstrap date picker
  • http://eternicode.github.io/bootstrap-datepicker/ date picker
  • https://github.com/eternicode/bootstrap-datepicker

immagini e carousel

  • http://toddmotto.com/labs/superbox/
  • http://unslider.com/ slider component
  • http://jquerypicture.com/ richiede al server una immagine di dimensione calcolata in base alla larghezza dello schermo sul device
  • http://fancybox.net modale
  • http://www.appelsiini.net/projects/lazyload delay loading images out of viewport

tree/treeview/treetableview/Menu

  • http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html