Bottom Menu Builder Part 2 (HTML5) Today – our final part of our ‘Bottom Menu Builder’ which we started yesterday. We are going to implement our final features: Preview and Export (optional). So, webmaster will be able to arrange links by drag and drop, and then he can click ‘Preview’ button in order to Preview (and export results). I moved all the links into a separate php file (and now, we can have direct access to these links from PHP). In your case it can be database as example (in case of big project). So, lets start..
底部菜单构建器第2部分(HTML5)今天-我们昨天开始的“底部菜单构建器”的最后一部分。 我们将实现我们的最终功能：预览和导出(可选)。 因此，网站站长将能够通过拖放来安排链接，然后他可以单击“预览”按钮以进行预览(并导出结果)。 我将所有链接移到了单独的php文件中(现在，我们可以从PHP直接访问这些链接)。 在您的情况下，可以以数据库为例(对于大型项目)。 所以，让我们开始吧。
As the first, I would suggest you to download the source files and keep the demo opened in a tab for better understanding.
首先，我建议您下载源文件并在选项卡中保持演示处于打开状态，以便更好地理解。
现场演示
下载结果
So, lets start
所以，让我们开始吧
步骤1. HTML (Step 1. HTML)
Today we do not have a static html files, I moved the contents of our index.html into a new index.php file.
今天我们没有静态的html文件，我将index.html的内容移到了新的index.php文件中。
步骤2. CSS (Step 2. CSS)
In addition to our main.css file, I added a new css file (to stylize our preview page):
除了main.css文件之外，我还添加了一个新CSS文件(以对预览页面进行样式化)：
css / bmenu.css (css/bmenu.css)
/* menu builder styles */
.actions {
border: 1px solid #CCCCCC;
font-size: 24px;
margin: 20px auto 5px;
overflow: hidden;
padding: 10px;
width: 900px;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.columns {
margin: 0 auto;
overflow: hidden;
width: 900px;
}
.column {
border: 1px dotted #ccc;
float: left;
min-height: 100px;
padding: 10px;
position: relative;
width: 33.3%;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.column a {
cursor: pointer;
display: block;
font-size: 16px;
height: 30px;
margin-bottom: 5px;
position: relative;
text-align: center;
}
/* menu builder styles */
.actions {
border: 1px solid #CCCCCC;
font-size: 24px;
margin: 20px auto 5px;
overflow: hidden;
padding: 10px;
width: 900px;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.columns {
margin: 0 auto;
overflow: hidden;
width: 900px;
}
.column {
border: 1px dotted #ccc;
float: left;
min-height: 100px;
padding: 10px;
position: relative;
width: 33.3%;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.column a {
cursor: pointer;
display: block;
font-size: 16px;
height: 30px;
margin-bottom: 5px;
position: relative;
text-align: center;
}
步骤3. JS (Step 3. JS)
Please add next code to our main.js file (at the bottom, right after the call of updateHandlerDrop):
请将下一个代码添加到我们的main.js文件中(在底部，在updateHandlerDrop调用之后)：
js / main.js (js/main.js)
// preview button
var previewBtn = document.querySelectorAll('#preview');
addEvent(previewBtn, 'click', function (event) {
if (event.preventDefault) event.preventDefault();
var params = '';
var oColumns = document.querySelectorAll('div.column');
for (var i = 0; i < oColumns.length; i++) {
var iCol = i+1;
var sColElems = '';
for (var k = 0; k < oColumns[i].childNodes.length; k++) {
if (oColumns[i].childNodes[k].nodeType == document.ELEMENT_NODE && oColumns[i].childNodes[k].tagName == 'A') {
sColElems += oColumns[i].childNodes[k].id + '_';
}
}
params += iCol + '=' + sColElems + '&';
}
// open results
var http = new XMLHttpRequest();
http.open('POST', 'preview.php', true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.setRequestHeader('Content-length', params.length);
http.setRequestHeader('Connection', 'close');
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
document.open();
document.write(http.responseText);
return;
}
}
http.send(params);
return false;
});
// preview button
var previewBtn = document.querySelectorAll('#preview');
addEvent(previewBtn, 'click', function (event) {
if (event.preventDefault) event.preventDefault();
var params = '';
var oColumns = document.querySelectorAll('div.column');
for (var i = 0; i < oColumns.length; i++) {
var iCol = i+1;
var sColElems = '';
for (var k = 0; k < oColumns[i].childNodes.length; k++) {
if (oColumns[i].childNodes[k].nodeType == document.ELEMENT_NODE && oColumns[i].childNodes[k].tagName == 'A') {
sColElems += oColumns[i].childNodes[k].id + '_';
}
}
params += iCol + '=' + sColElems + '&';
}
// open results
var http = new XMLHttpRequest();
http.open('POST', 'preview.php', true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.setRequestHeader('Content-length', params.length);
http.setRequestHeader('Connection', 'close');
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
document.open();
document.write(http.responseText);
return;
}
}
http.send(params);
return false;
});
This is Preview button code. As you can see – it prepares all necessary params in order to send to our new ‘preview.php’. Basically, this is some kind of serialization of our active links (in columns).
这是预览按钮代码。 如您所见–它准备了所有必要的参数，以便发送到我们的新“ preview.php”。 基本上，这是我们的活动链接的某种序列化(在列中)。
步骤4. PHP (Step 4. PHP)
Now, its time to review our server side scripting. As I told before, I moved all the links into separate php file (links.php), here it is:
现在，该回顾我们的服务器端脚本了。 如前所述，我将所有链接移到了单独的php文件(links.php)中，它是：
links.php (links.php)
<?
$aLinks = array(
1 => array('Link 1', '#link1'),
2 => array('Link 2', '#link2'),
3 => array('Link 3', '#link3'),
4 => array('Link 4', '#link4'),
5 => array('Link 5', '#link5'),
6 => array('Link 6', '#link6'),
7 => array('Link 7', '#link7'),
8 => array('Link 8', '#link8'),
9 => array('Link 9', '#link9'),
10 => array('Link 10', '#link10'),
11 => array('Link 11', '#link11'),
12 => array('Link 12', '#link12')
);
<?
$aLinks = array(
1 => array('Link 1', '#link1'),
2 => array('Link 2', '#link2'),
3 => array('Link 3', '#link3'),
4 => array('Link 4', '#link4'),
5 => array('Link 5', '#link5'),
6 => array('Link 6', '#link6'),
7 => array('Link 7', '#link7'),
8 => array('Link 8', '#link8'),
9 => array('Link 9', '#link9'),
10 => array('Link 10', '#link10'),
11 => array('Link 11', '#link11'),
12 => array('Link 12', '#link12')
);
Now I should generate code for our index page (with builder) with using this array:
现在，我应该使用此数组为我们的索引页(带有构建器)生成代码：
index.php (index.php)
<?php
require_once('links.php'); // include set of all possible links
// prepare draggable elements
$sLinks = '';
foreach ($aLinks as $i => $aPair) {
list($sText, $sUrl) = $aPair;
$sLinks .= '<a id="'.$i.'" draggable="true">'.$sText.'</a>';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bottom Menu Builder (HTML5) - Step 2 (of 2) | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header tabindex="0">
<h2>Bottom Menu Builder (HTML5) - Step 2 (of 2)</h2>
<a href="https://www.script-tutorials.com/bottom-menu-builder-html5-2/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="actions">
Actions:
<button id="preview">Preview</button>
<button id="add_col">Add Column</button>
</div>
<div class="actions">Columns (with active elements)</div>
<div class="columns">
<div class="column" id="drop_1" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
<div class="column" id="drop_2" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
<div class="column" id="drop_3" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
</div>
<div style="clear:both"></div>
<div class="actions">All (inactive) elements. You can drag these elements into columns.</div>
<div class="inactive" droppable="true">
<?= $sLinks ?>
</div>
<script src="js/main.js"></script>
</body>
</html>
<?php
require_once('links.php'); // include set of all possible links
// prepare draggable elements
$sLinks = '';
foreach ($aLinks as $i => $aPair) {
list($sText, $sUrl) = $aPair;
$sLinks .= '<a id="'.$i.'" draggable="true">'.$sText.'</a>';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bottom Menu Builder (HTML5) - Step 2 (of 2) | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header tabindex="0">
<h2>Bottom Menu Builder (HTML5) - Step 2 (of 2)</h2>
<a href="https://www.script-tutorials.com/bottom-menu-builder-html5-2/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="actions">
Actions:
<button id="preview">Preview</button>
<button id="add_col">Add Column</button>
</div>
<div class="actions">Columns (with active elements)</div>
<div class="columns">
<div class="column" id="drop_1" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
<div class="column" id="drop_2" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
<div class="column" id="drop_3" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
</div>
<div style="clear:both"></div>
<div class="actions">All (inactive) elements. You can drag these elements into columns.</div>
<div class="inactive" droppable="true">
<?= $sLinks ?>
</div>
<script src="js/main.js"></script>
</body>
</html>
And finally, our preview page:
最后，我们的预览页面：
Preview.php (preview.php)
<?php
require_once('links.php'); // include set of all possible links
$sColumns = '';
$iColCnt = count($_POST); // Columns count
$dWidth = round(100 / $iColCnt, 1); // Column width
foreach ($_POST as $sCol => $sColEls) { // walk through all POST params
$iColId = (int)$sCol; // Column ID
$sColumns .= '<div class="column" style="width:'.$dWidth.'%">';
$aEls = explode('_', $sColEls); // obtain elements in column
if (is_array($aEls) && count($aEls)) {
foreach ($aEls as $iPos => $sEl) { // walk through all elements
$iEl = (int)$sEl;
if ($iEl) {
list($sText, $sUrl) = $aLinks[$iEl];
$sColumns .= '<a href="'.$sUrl.'">'.$sText.'</a>';
}
}
}
$sColumns .= '</div>';
}
// Here you can save current value of $sColumns into some cache file
//file_put_contents('cache/bottom_menu.html', $sColumns);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bottom Menu Builder (HTML5) - Step 2 (of 2) | Script Tutorials</title>
<link href="css/bmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header tabindex="0">
<h2>Bottom Menu Builder (HTML5) - Step 2 (of 2)</h2>
<a href="https://www.script-tutorials.com/bottom-menu-builder-html5-2/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="actions">Result bottom menu (preview)
<a href="index.php" style="float:right">Start again</a>
</div>
<div class="columns">
<?= $sColumns /*and finally - draw our result menu*/ ?>
</div>
</body>
</html>
<?php
require_once('links.php'); // include set of all possible links
$sColumns = '';
$iColCnt = count($_POST); // Columns count
$dWidth = round(100 / $iColCnt, 1); // Column width
foreach ($_POST as $sCol => $sColEls) { // walk through all POST params
$iColId = (int)$sCol; // Column ID
$sColumns .= '<div class="column" style="width:'.$dWidth.'%">';
$aEls = explode('_', $sColEls); // obtain elements in column
if (is_array($aEls) && count($aEls)) {
foreach ($aEls as $iPos => $sEl) { // walk through all elements
$iEl = (int)$sEl;
if ($iEl) {
list($sText, $sUrl) = $aLinks[$iEl];
$sColumns .= '<a href="'.$sUrl.'">'.$sText.'</a>';
}
}
}
$sColumns .= '</div>';
}
// Here you can save current value of $sColumns into some cache file
//file_put_contents('cache/bottom_menu.html', $sColumns);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bottom Menu Builder (HTML5) - Step 2 (of 2) | Script Tutorials</title>
<link href="css/bmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header tabindex="0">
<h2>Bottom Menu Builder (HTML5) - Step 2 (of 2)</h2>
<a href="https://www.script-tutorials.com/bottom-menu-builder-html5-2/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="actions">Result bottom menu (preview)
<a href="index.php" style="float:right">Start again</a>
</div>
<div class="columns">
<?= $sColumns /*and finally - draw our result menu*/ ?>
</div>
</body>
</html>
Small code at the top – preparing of result bottom menu (with columns). As you can see, you even can uncomment ‘file_put_contents’ in order to generate cache file of result menu.
顶部的小代码–准备结果底部的菜单(带列)。 如您所见，您甚至可以取消注释“ file_put_contents”以生成结果菜单的缓存文件。
现场演示
下载结果
结论 (Conclusion)
That’s all, I hope that we have made really user friendly script – html5 drag and drop menu builder. Hope that our tutorial has helped you. Feel free to share our tutorials with your friends. Good luck!
仅此而已，我希望我们已经制作了非常用户友好的脚本– html5拖放菜单构建器。 希望我们的教程对您有所帮助。 随时与您的朋友分享我们的教程。 祝好运！
翻译自: https://www.script-tutorials.com/bottom-menu-builder-html5-2/
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
