пятница, 21 сентября 2012 г.

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

15:46 Maxmatik No comments

Передвижные кнопки
Сегодня представляю вам урок в котором покажу подвижные кнопки, хотя это могут быть и не кнопки а любые объекты. Но все по порядку.
Демо Скачать
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:

0 коммент.:

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

Технологии Blogger.

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Hot Sonakshi Sinha, Car Price in India