ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сделать два фрейма
6 сообщений из 6, страница 1 из 1
Сделать два фрейма
    #39092684
Alexey Agafonov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alexey Agafonov
Участник
Всем привет.

Такой вопрос - как сделать два фрейма на странице (левый и правый) так, чтобы их границу можно было двигать? В идеале это два div ну или в крайнем случае таблица из двух полей (тоже нежелательно, не хотелось бы табличной верстки). Нужен только каркас (без красивого css оформления), и без ушедших в историю frame, а именно с помощь css, jquery, js или еще как? Можно это?

Заранее спасибо.
...
Рейтинг: 0 / 0
02.11.2015, 13:33
| Ответить | Цитировать | Написать  
Сделать два фрейма
    #39092984
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alexey AgafonovВ идеале это два div
Как вариант...
http://www.jqwidgets.com/jquery-ui-splitter/
...
Рейтинг: 0 / 0
02.11.2015, 16:42
| Ответить | Цитировать | Написать  
Сделать два фрейма
    #39093016
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Alexey Agafonov,

очень простой вариант, даже в IE10 работает
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {margin:0; padding:0;}
#cont {
  display:table;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
}
#d1, #split, #d2 {display:table-cell;}
#d1 {background:#eee8aa; width:20%;}
#split {
  background:#4580B1;
  width:3px;
  cursor:col-resize;
}
#d2 {background:#abcdef;}
</style>
</head>

<div id="cont">
  <div id="d1">div 1</div>
  <div id="split"> </div>
  <div id="d2">div 2</div>
</div>

<script>
function gid(i) {return document.getElementById(i);}
d1 = gid('d1');
split = gid('split');
split.onmousedown = dragOBJ;

function dragOBJ(event) {
  function drag(event) {if (!stop) {d1.style.width = event.clientX + 'px';} }
  var stop = false;
  document.onmousemove = drag;
  document.onmouseup = function() {stop = true; document.onmousemove = ''; document.onmouseup = '';};
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
02.11.2015, 17:04
| Ответить | Цитировать | Написать  
Сделать два фрейма
    #39093022
Alexey Agafonov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alexey Agafonov
Участник
Вот тут выложил результат и это то, что надо. Спасибо огромное!!!!
...
Рейтинг: 0 / 0
02.11.2015, 17:07
| Ответить | Цитировать | Написать  
Сделать два фрейма
    #39115832
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
 
Более продвинутый вариант
Код: html
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.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {margin:0; padding:0;}
#layout {
  position:absolute;
  top:0; left:0; bottom:0; right:0;
  z-index:1;
}
#layout div {position:absolute; height:100%;}
#d1 {background:#C5E4ED; width:250px;}
#split {
  background:#4682B4;
  left:250px;
  width:3px;
  cursor:col-resize;
}
#d2 {background:#cfc; left:253px; right:0;}
</style>
</head>
<body>
<div id="layout">
  <div id="d1">Панелька 1</div>
  <div id="split"></div>
  <div id="d2">Панелька 2</div>
</div>
 
<script>
function gid(i) {return document.getElementById(i);}
var layout = gid('layout'), d1 = gid('d1'), d2 = gid('d2'), split = gid('split');
split.onmousedown = dragSplit;

function dragSplit(e) {
  var stop = false;
  layout.onmousedown = function() {return false;};
  document.addEventListener('mousemove', splitMouseMove);
  document.addEventListener('mouseup', splitMouseUp);
  function splitMouseMove(e) {
    if (stop) {return;}
    layout.style.cursor = 'col-resize';
    split.style.zIndex = 2;
    split.style.left = e.pageX + 'px';
  }
  function splitMouseUp(e) {
    stop = true;
    split.style.zIndex = '';
    split.style.left = e.pageX + 'px';
    d1.style.width = e.pageX + 'px';
    d2.style.left = d1.offsetWidth + split.offsetWidth + 'px';
    layout.style.cursor = '';
    layout.onmousedown = '';
    document.removeEventListener('mousemove', splitMouseMove);
    document.removeEventListener('mouseup', splitMouseUp);
  }
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
29.11.2015, 21:14
| Ответить | Цитировать | Написать  
Сделать два фрейма
    #39152904
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
 
Чтобы размер панелей не уменьшался до 0. Также исправлен баг с прокруткой
Код: html
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.
<!DOCTYPE HTML>
<html>
<head>
<title>Splitter</title>
<meta charset="utf-8">
<style>
html, body {margin:0; padding:0;}
#layout {
  position:absolute;
  top:0; left:0; bottom:0; right:0;
  overflow:hidden;
  z-index:1;
}
#layout div {position:absolute; height:100%;}
#d1 {background:#C5E4ED; width:250px;}
#split {
  background:#4682B4;
  left:250px;
  width:3px;
  cursor:col-resize;
}
#d2 {background:#cfc; left:253px; right:0;}
</style>
</head>
<body>
<div id="layout">
  <div id="d1">Панелька 1</div>
  <div id="split"></div>
  <div id="d2">Панелька 2</div>
</div>
 
<script>
function gid(i) {return document.getElementById(i);}
var layout = gid('layout'), d1 = gid('d1'), d2 = gid('d2'), split = gid('split');
split.onmousedown = dragSplit;

function dragSplit(e) {
  var stop = false;
  split.style.zIndex = 2;
  layout.onmousedown = function() {return false;};
  document.addEventListener('mousemove', splitMouseMove);
  document.addEventListener('mouseup', splitMouseUp);
  function splitMouseMove(e) {
    if (stop) {return;}
    layout.style.cursor = 'col-resize';
    if (e.pageX > 15 && e.pageX < document.body.offsetWidth-15) {split.style.left = e.pageX + 'px';}
  }
  function splitMouseUp(e) {
    stop = true;
    split.style.zIndex = '';
    d1.style.width = split.offsetLeft + 'px';
    d2.style.left = d1.offsetWidth + split.offsetWidth + 'px';
    layout.style.cursor = '';
    layout.onmousedown = '';
    document.removeEventListener('mousemove', splitMouseMove);
    document.removeEventListener('mouseup', splitMouseUp);
  }
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
22.01.2016, 12:29
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сделать два фрейма
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]