.
Derniers snippets
Bienvenue sur l'espace SnippetVamp de Bronco.
SnippetVamp est une application libre et open-source destinée à conserver, créer, modifier, retrouver, gérer, partager simplement et rapidement des snippets.
Vous pouvez la télécharger sur Github (github.com/broncowdd/SnippetVamp), l'installer sur votre serveur (php 5.2 sans base de données) et en modifier les thèmes et le code comme bon vous semble (en laissant quelque part une référence à la source ;) )
deep_strip_tags - un strip_tags pour arrays
function deep_strip_tags($var){
if (is_string($var)){return strip_tags($var);}
if (is_array($var)){return array_map('deep_strip_tags',$var);}
return $var;
}
fonctions php securite texte
http://warriordudimanche.net
<iframe width="100%" height="272" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=556843e4ee746" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 29/05/2015
savejson-loadjson - sauver/lire des données en une ligne
<?php
function savejson($file,$datas){return file_put_contents($file,'<?php/*'.serialize($datas).'*/?>');}
function loadjson($file){return unserialize(str_replace(array('<?php/*','*/?>'),'',file_get_contents($file)));}
?>
fichiers fonctions php
<iframe width="100%" height="290" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=553b4aadc85f0" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 25/04/2015
Parcourir un tableau d'éléments en partant de la fin en jquery
jQuery.fn.reverse = [].reverse; // on définit la fonction reverse() comme un plugin ^^
$('.SELECTEUR').reverse().each(function () {
//CODE ...
});
jquery
http://stackoverflow.com/questions/1394020/jquery-each-backwards
<iframe width="100%" height="272" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=552f6dc7d298d" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 16/04/2015
dropdown - exemples
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
avec headers
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
...
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>
avec séparateurs
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
...
<li role="presentation" class="divider"></li>
...
</ul>
bootstrap css html javascript jquery
http://getbootstrap.com/components/
<iframe width="100%" height="938" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a9f24f242" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
button dropdown menus
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
bootstrap css html javascript jquery
<iframe width="100%" height="740" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a90fb6677" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
Nav bar complète - exemple
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
bootstrap css html
http://getbootstrap.com/components/
<iframe width="100%" height="1136" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a8853a986" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
labels - exemples (étiquettes)
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
bootstrap css html
http://getbootstrap.com/components/
<iframe width="100%" height="290" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a803e8af6" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
Alertes - exmples
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Avec un bouton de fermeture
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
bootstrap css html
http://getbootstrap.com/components/
<iframe width="100%" height="362" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a76a5128b" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
Media - exemple
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
bootstrap css html
http://getbootstrap.com/components/
<iframe width="100%" height="380" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a741b3a2d" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
Listgroups - exemples
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Groupes contextualisés
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
bootstrap css html
http://getbootstrap.com/components/
<iframe width="100%" height="614" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a6ea12d8c" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
Panel - exemples
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Avec contextes
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Avec un tableau dedans
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Avec un liste group dedans
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
bootstrap css html
http://getbootstrap.com/components/
<iframe width="100%" height="1100" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a62a08ffd" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
Menu en accordeon
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
bootstrap css javascript jquery
http://getbootstrap.com/javascript/#collapse-example-accordion
<iframe width="100%" height="974" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521802e35ab0" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
Collapse un div via un bouton
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
bootstrap css javascript jquery
http://getbootstrap.com/javascript/#collapse-example
<iframe width="100%" height="380" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=55217f5ae2fb0" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
checkbox et radio sous forme de boutons
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
bootstrap css javascript jquery
http://getbootstrap.com/javascript/#buttons-checkbox-radio
<iframe width="100%" height="596" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=55217f111412a" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015
popover
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
bootstrap css jquery
http://getbootstrap.com/javascript/#popovers
<iframe width="100%" height="506" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=55217a9aeaca1" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 05/04/2015