fenix-ui-filter
Version:
176 lines (114 loc) • 6.25 kB
HTML
<html>
<head>
<title>FENIX Filter: Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="FENIX Filter: showcase">
<meta name="author" content="Daniele Salvatore <daniele.salvatore [at] fao.org>">
<meta name="author" content="Nicola Selleri <nicola.selleri [at] fao.org>">
<link rel="stylesheet" href="http://fenixrepo.fao.org/cdn/js/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- dropdown item -->
<link rel="stylesheet" href="http://fenixrepo.fao.org/cdn/js/selectize/0.12.1/css/selectize.bootstrap3.css"/>
<!-- tree item -->
<link rel="stylesheet" href='http://fenixrepo.fao.org/cdn/js/jstree/3.3.0/dist/themes/default/style.min.css'>
<!-- range item -->
<link rel="stylesheet" href='http://fenixrepo.fao.org/cdn/js/ion.rangeSlider/2.1.2/css/ion.rangeSlider.css'>
<link rel="stylesheet"
href='http://fenixrepo.fao.org/cdn/js/ion.rangeSlider/2.1.2/css/ion.rangeSlider.skinHTML5.css'>
<!-- time item -->
<link rel="stylesheet"
href='http://fenixrepo.fao.org/cdn/js/bootstrap-datetimepicker/4.17.37/build/css/bootstrap-datetimepicker.min.css'>
<link rel="stylesheet" href='http://fenixrepo.fao.org/cdn/js/bootstrap-daterangepicker/2.1.19/daterangepicker.css'>
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500,900,400italic' rel='stylesheet' type='text/css'>
<link href='../dist/fenix-ui-filter.min.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="alert alert-warning" role="alert">Open console for logs</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>FENIX Filter:
<small>Demo</small>
<div class="parent">
<div class="close-btn"></div>
</div>
<!--<span class="pull-right">-->
<!--<button id="snippet-btn" type="button" class="btn btn-default">-->
<!--<span class="glyphicon glyphicon-console" aria-hidden="true"></span> Show snippets-->
<!--</button>-->
<!--</span>-->
</h1>
</div>
</div>
</div>
<hr>
<!-- All -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="all">
<div class="row">
<div class="col-md-12"><h2>Input</h2></div>
</div>
<div class="row">
<div class="col-md-6"><div data-selector="checkbox" class="panel"></div></div>
<div class="col-md-6"><div data-selector="radio" class="panel"></div></div>
<div class="col-md-6"><div data-selector="text" class="panel"></div></div>
<div class="col-md-6"><div data-selector="textDisabled" class="panel"></div></div>
</div>
<hr>
<div class="row">
<div class="col-md-12"><h2>Tree</h2></div>
</div>
<div class="row">
<div class="col-md-3"><div data-selector="tree" class="panel"></div></div>
<!-- NB data-semantic instead of data-selector-->
<div class="col-md-3"><div data-group="treeTriple" class="panel"></div></div>
<div class="col-md-3"><div data-selector="treeDisabled" class="panel"></div></div>
<div class="col-md-3"><div data-selector="treeSingle" class="panel"></div></div>
</div>
<hr>
<div class="row">
<div class="col-md-12"><h2>Dropdown</h2></div>
<div class="col-md-6"><div data-selector="dropdown" class="panel"></div></div>
<div class="col-md-6"><div data-selector="dropdownSingle" class="panel"></div></div>
<div class="col-md-6"><div data-selector="dropdownDisabled" class="panel"></div></div>
</div>
<hr>
<div class="row">
<div class="col-md-12"><h2>Range</h2></div>
<div class="col-md-6"><div data-selector="range" class="panel"></div></div>
<div class="col-md-6"><div data-selector="rangeDouble" class="panel"></div></div>
<div class="col-md-6"><div data-selector="rangeDisabled" class="panel"></div></div>
</div>
<hr>
<div class="row">
<div class="col-md-12"><h2>Sortable</h2></div>
<div class="col-md-6"><div data-selector="sortable" class="panel"></div></div>
<div class="col-md-6"><div data-selector="sortableDisabled" class="panel"></div></div>
<div class="col-md-6"><div data-selector="drag" class="panel"></div></div>
<div class="col-md-6"><div data-selector="sortableCustomRender" class="panel"></div></div>
</div>
<hr>
<div class="row">
<div class="col-md-12"><h2>Time</h2></div>
<div class="col-md-6"><div data-selector="time" class="panel"></div></div>
<div class="col-md-6"><div data-selector="timeDisabled" class="panel"></div></div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default" id="all-summary"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./index.js"></script></body>
</html>