Adatum
Фев
21
2013
JavaScript // jQuery // PHP // Базы данных /

Передвижные кнопки на 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   
}
?>

Источник урока: http://www.adatum.ru
Автор: Сергоманов Дмитрий

Метки: , ,

Похожие статьи

Оставить комментарий