Передвижные кнопки на Jquery-UI

Сегодня представляю вам урок в котором покажу подвижные кнопки, хотя это могут быть и не кнопки а любые объекты. Но все по порядку.

Демо Скачать

1. Первое что мы сделаем это подключим библиотеки и стили.

1 2 3 4 5 6 7 8 9 10 11 12 13

<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, пропишем размеры контейнера где могут передвигаться кнопки, а также картинку заднего фона и отступы.

1 2 3

.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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<?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. Собственно сам код передвижных кнопок а также сохранение их положения и добавление новых.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

<?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   } ?>

Posted in: Javascript