21
2013
Передвижные кнопки на Jquery-UI
Сегодня представляю вам урок в котором покажу подвижные кнопки, хотя это могут быть и не кнопки а любые объекты. Но все по порядку.
1. Первое что мы сделаем это подключим библиотеки и стили.
<link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="jquery-1.8.3.js"></script> <script src="jquery-ui.js"></script> <script src="bootstrap.min.js"></script> <script type="text/javascript" src="bootstrapx-clickover.js"></script> <script type="text/javascript"> $(function() { $('[rel="clickover"]').clickover(); }) </script>
Здесь подключаются библиотеки jquery, jquery-ui и bootstrap а также надстройка над bootstrap библиотеку clickover при помощи котророй мы сделаем всплывающие окошки с редактированием параметров.
2. Зададим файл стиля style.css, пропишем размеры контейнера где могут передвигаться кнопки, а также картинку заднего фона и отступы.
.main_content{background-image: url("bg_content.jpg"); padding:64px 30px 30px; border-left:1px solid transparent;margin-left:240px;width: 800px;} .draggable { width: 40px; height: 40px; cursor: move;} #containment-wrapper { width: 100%; height:1000px; }
3. Пишем функцию inbtn, при помощи этой функции мы заполняем содержимое окна clickover. Библиотеку jquery нужно подключить заново так как clickover создает изолированный объект. Функция savem
<?php function inbtn($nms) { ?> <script src='js/jquery.min.js'></script> <form id='mmenu'> <table> <?php $db = new PDO('sqlite:./database/main.sqlite'); $st = $db->query('SELECT * FROM mmenu WHERE id = "'.$nms.'"'); $results = $st->fetchAll(); foreach ($results as $row) { echo '<tbody>'; echo '<tr><td>Номер: <input style=\'font-family: tahoma; text-align: center; font-size: 12px;\' size=\'10\' type=\'text\' value=\''.$row['id'].'\' id=\'id\'></td></th>'; echo '<tr><td>Название: <input style=\'font-family: tahoma; text-align: center; font-size: 12px;\' size=\'30\' type=\'text\' value=\''.$row['name'].'\' id=\'name\'></td></tr>'; echo '<tr><td>Иконка: <input style=\'font-family: tahoma; text-align: center; font-size: 12px;\' size=\'20\' type=\'text\' value=\''.$row['img'].'\' id=\'img\'></td></tr>'; echo '<tr><td align=\'left\'><input class=\'btn \' type=\'button\' onclick=\'savem()\' value=\'Сохранить\'></td>'; echo '<td align=\'left\'><input class=\'btn btn-danger\' type=\'button\' onclick=\'remm()\' value=\'Удалить\'></td></tr>'; } echo ('</tbody></table>'); ?> </form> <script type='text/javascript'> function savem() { window.location.reload(); $.ajax({ type: 'POST',url: 'upmmenu.php', data:{ 'id' : $('#id').val(), 'name' : $('#name').val(), 'img' : $('#img').val(), }, });return true; } function remm() { window.location.reload(); $.ajax({ type: 'POST',url: 'delmmenu.php', data:{ 'id' : $('#id').val() }, });return true; } </script> <?php } ?>
4. Собственно сам код передвижных кнопок а также сохранение их положения и добавление новых.
<?php if(isset($_POST['submitaddbtn'])) { $db = new PDO('sqlite:./database/main.sqlite'); $st = $db->query('SELECT id FROM mmenu'); $db->exec('INSERT INTO mmenu (name) VALUES ("New")'); } if(isset($_POST['submit'])) { $db = new PDO('sqlite:./database/main.sqlite'); $st = $db->query('SELECT id FROM mmenu'); $results = $st->fetchAll(); foreach ($results as $row) { $i = $row['id']; $db->exec('UPDATE mmenu SET top="'.$_POST['top'.$i.''].'" WHERE id="'.$i.'"'); $db->exec('UPDATE mmenu SET left="'.$_POST['left'.$i.''].'" WHERE id="'.$i.'"'); } } ?> <?php $db = new PDO('sqlite:./database/main.sqlite'); $st = $db->query('SELECT * FROM mmenu');$results = $st->fetchAll(); foreach ($results as $row) { ?> <div id="dragl<?php echo $row['id']; ?>" style = 'top:<?php echo $row['top']; ?>px; left:<?php echo $row['left']; ?>px; ' class="draggable"> <button data-toggle='modal' href='#advanced' class="btn btn-<?php echo $row['slide']; ?> "><i class=" <?php echo $row['img']; ?>"></i> <?php echo $row['name']; ?></button> <input TYPE=HIDDEN value='<?php echo $row['top']; ?>' size='1' name='top<?php echo $row['id']; ?>' id='top<?php echo $row['id']; ?>'/> <input TYPE=HIDDEN value='<?php echo $row['left']; ?>' size='1' name='left<?php echo $row['id']; ?>' id='left<?php echo $row['id']; ?>'/> <span style=" font-size: 22px; color:#000;" class="icon-move"></span> <a rel="clickover" data-placement="<?php if ($row['left'] > 400){echo 'left';} else {echo 'right';} ?>" data-html="true" data-content="<?php inbtn($row['id']); ?>" data-original-title="Редактирование" style=" font-size: 18px; color:#000;" href='#' class=" icon-cog"></a> </div> <script> $(function() { $( "#dragl<?php echo $row['id']; ?>" ).draggable({ containment: "#containment-wrapper", scroll: false, drag: function(event, ui) { document.getElementById('top<?php echo $row['id']; ?>').value = ui.position.top ; document.getElementById('left<?php echo $row['id']; ?>').value = ui.position.left ; } }); } ); </script> <?php } ?>