This time I will share jQuery Plugin and tutorial about jQuery & JSON Based Backend Hierarchical Menu Creator – DoMenu, hope it will help you in programming stack.
| File Size: | 198 KB |
|---|---|
| Views Total: | 5094 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
DoMenu is a jQuery plugin which generates a draggable, editable, JSON based hierarchical menu creator for your CMS or blog system.
How to use it:
1. Load jQuery JavaScript library and the jQuery DoMenu plugin at the end of the document.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="jquery.domenu-0.0.1.js"></script> |
2. Build the html structure for the menu creator.
01 |
<div class="dd" id="domenu"> |
02 |
<button class="dd-new-item">+</button> |
03 |
<!-- .dd-item-blueprint is a template for all .dd-item's --> |
04 |
<li class="dd-item-blueprint"> |
05 |
<div class="dd-handle dd3-handle">Drag</div> |
06 |
<div class="dd3-content"> <span>[item_name]</span> |
07 |
<button class="item-remove">×</button> |
08 |
<div class="dd-edit-box" style="display: none;"> |
09 |
<input type="text" name="title" placeholder="name"> |
10 |
<input type="url" name="http" placeholder="http://"> |
11 |
<i>✎</i> </div> |
12 |
</div> |
13 |
</li> |
14 |
<ol class="dd-list"> |
15 |
</ol> |
16 |
</div> |
3. Initialize the plugin and add initial data to the menu creator.
1 |
$('#domenu').domenu({ |
2 |
data: '[{"id":1,"title":"Item 1","http":""}]' |
3 |
}) |
4. Add your custom CSS styles to the menu creator.
001 |
.dd { |
002 |
position: relative; |
003 |
display: block; |
004 |
margin: 0; |
005 |
padding: 0; |
006 |
max-width: 600px; |
007 |
list-style: none; |
008 |
font-size: 13px; |
009 |
line-height: 20px; |
010 |
} |
011 |
012 |
.dd-edit-box input { |
013 |
border: none; |
014 |
background: transparent; |
015 |
outline: none; |
016 |
font-size: 13px; |
017 |
color: #444; |
018 |
text-shadow: 0 1px 0 #fff; |
019 |
width: 45%; |
020 |
} |
021 |
022 |
.dd-edit-box { position: relative; } |
023 |
024 |
.dd-edit-box i { |
025 |
right: 0; |
026 |
overflow: hidden; |
027 |
cursor: pointer; |
028 |
position: absolute; |
029 |
} |
030 |
031 |
.dd-item-blueprint { display: none; } |
032 |
033 |
.dd-list { |
034 |
display: block; |
035 |
position: relative; |
036 |
margin: 0; |
037 |
padding: 0; |
038 |
list-style: none; |
039 |
} |
040 |
041 |
.dd-list .dd-list { padding-left: 30px; } |
042 |
043 |
.dd-collapsed .dd-list { display: none; } |
044 |
045 |
.dd-item, .dd-empty, .dd-placeholder { |
046 |
text-shadow: 0 1px 0 #fff; |
047 |
display: block; |
048 |
position: relative; |
049 |
margin: 0; |
050 |
padding: 0; |
051 |
min-height: 20px; |
052 |
font-size: 13px; |
053 |
line-height: 20px; |
054 |
} |
055 |
056 |
.dd-handle { |
057 |
cursor: move; |
058 |
display: block; |
059 |
height: 30px; |
060 |
margin: 5px 0; |
061 |
padding: 5px 10px; |
062 |
color: #333; |
063 |
text-decoration: none; |
064 |
font-weight: bold; |
065 |
border: 1px solid #AAA; |
066 |
background: #E74C3C; |
067 |
background: -webkit-linear-gradient(top, #E74C3C 0%, #C0392B 100%); |
068 |
background: -moz-linear-gradient(top, #E74C3C 0%, #C0392B 100%); |
