Permalink
Switch branches/tags
Nothing to show
Find file Copy path
a504b54 Jun 2, 2018
1 contributor

Users who have contributed to this file

162 lines (157 sloc) 9.79 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Menu Editor - Demo</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="bs-iconpicker/css/bootstrap-iconpicker.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://codeignitertutoriales.com/jquery-menu-editor-multinivel/"><i class="glyphicon glyphicon-arrow-left"></i> Volver al Tutorial</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://codeignitertutoriales.com" target="_self"><i class="glyphicon glyphicon-home"></i> Blog</a></li>
<li class="active"><a href="https://github.com/davicotico/jQuery-Menu-Editor" target="_self"><i class="fa fa-github"></i> Please, rate the repository</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12"><h2>Demo</h2></div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading clearfix"><h5 class="pull-left">Menu</h5>
<div class="pull-right">
<button id="btnReload" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-triangle-right"></i> Load Data</button>
</div>
</div>
<div class="panel-body" id="cont">
<ul id="myEditor" class="sortableLists list-group">
</ul>
</div>
</div>
<div class="form-group">
<button id="btnOut" type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Output</button>
</div>
<div class="form-group"><textarea id="out" class="form-control" cols="50" rows="10"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">Edit item</div>
<div class="panel-body">
<form id="frmEdit" class="form-horizontal">
<div class="form-group">
<label for="text" class="col-sm-2 control-label">Text</label>
<div class="col-sm-10">
<div class="input-group">
<input type="text" class="form-control item-menu" name="text" id="text" placeholder="Text">
<div class="input-group-btn">
<button type="button" id="myEditor_icon" class="btn btn-default" data-iconset="fontawesome"></button>
</div>
<input type="hidden" name="icon" class="item-menu">
</div>
</div>
</div>
<div class="form-group">
<label for="href" class="col-sm-2 control-label">URL</label>
<div class="col-sm-10">
<input type="text" class="form-control item-menu" id="href" name="href" placeholder="URL">
</div>
</div>
<div class="form-group">
<label for="target" class="col-sm-2 control-label">Target</label>
<div class="col-sm-10">
<select name="target" id="target" class="form-control item-menu">
<option value="_self">Self</option>
<option value="_blank">Blank</option>
<option value="_top">Top</option>
</select>
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Tooltip</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control item-menu" id="title" placeholder="Tooltip">
</div>
</div>
</form>
</div>
<div class="panel-footer">
<button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fa fa-refresh"></i> Update</button>
<button type="button" id="btnAdd" class="btn btn-success"><i class="fa fa-plus"></i> Add</button>
</div>
</div>
<h2>Projects</h2>
<ul>
<li><a href="https://github.com/davicotico/PHP-Quick-Menu" target="_blank">PHP Quick Menu</a></li>
<li><a href="https://github.com/davicotico/jQuery-Menu-From-JSON" target="_blank">jQuery Menu from JSON</a></li>
<li><a href="https://github.com/davicotico/Codeigniter-Form-Validation-Extension" target="_blank">Form Validator Extension for Codeigniter</a></li>
<li><a href="https://github.com/davicotico/Codeigniter-Imagify" target="_blank">Codeigniter Imagify (Image optimization)</a></li>
<li><a href="https://github.com/davicotico/jQuery-formHelper" target="_blank">jQuery formHelper</a></li>
</ul>
</div>
</div>
<hr>
<footer>
<p>&copy; 2018 David Ticona Saravia</p>
</footer>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src='bs-iconpicker/js/iconset/iconset-fontawesome-4.7.0.min.js'></script>
<script src='bs-iconpicker/js/bootstrap-iconpicker.js'></script>
<script src='jquery-menu-editor.min.js'></script>
<script>
jQuery(document).ready(function () {
// menu items
var strjson = [{"href":"http://home.com","icon":"fa fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fa fa-bar-chart-o","text":"Opcion2"},{"icon":"fa fa-cloud-upload","text":"Opcion3"},{"icon":"fa fa-crop","text":"Opcion4"},{"icon":"fa fa-flask","text":"Opcion5"},{"icon":"fa fa-map-marker","text":"Opcion6"},{"icon":"fa fa-search","text":"Opcion7","children":[{"icon":"fa fa-plug","text":"Opcion7-1","children":[{"icon":"fa fa-filter","text":"Opcion7-1-1"}]}]}];
//icon picker options
var iconPickerOptions = {searchText: 'Buscar...', labelHeader: '{0} de {1} Pags.'};
//sortable list options
var sortableListOptions = {
placeholderCss: {'background-color': 'cyan'}
};
var editor = new MenuEditor('myEditor', {listOptions: sortableListOptions, iconPicker: iconPickerOptions, labelEdit: 'Edit'});
editor.setForm($('#frmEdit'));
editor.setUpdateButton($('#btnUpdate'));
$('#btnReload').on('click', function () {
editor.setData(strjson);
});
$('#btnOut').on('click', function () {
var str = editor.getString();
$("#out").text(str);
});
$("#btnUpdate").click(function(){
editor.update();
});
$('#btnAdd').click(function(){
editor.add();
});
});
</script>
</body>
</html>