Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сделать два фрейма / 6 сообщений из 6, страница 1 из 1
02.11.2015, 13:33
    #39092684
Alexey Agafonov
Alexey Agafonov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать два фрейма
Всем привет.

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

Заранее спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.11.2015, 16:42
    #39092984
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать два фрейма
Alexey AgafonovВ идеале это два div
Как вариант...
http://www.jqwidgets.com/jquery-ui-splitter/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.11.2015, 17:04
    #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:07
    #39093022
Alexey Agafonov
Alexey Agafonov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать два фрейма
Вот тут выложил результат и это то, что надо. Спасибо огромное!!!!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.11.2015, 21:14
    #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
| Ответить | Цитировать | Написать  
22.01.2016, 12:29
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сделать два фрейма / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 417ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445473]:
 0ms
get settings:
 10ms
get forum list:
 23ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 73ms
get topic data:
 12ms
get forum data:
 4ms
get page messages:
 42ms
get tp. blocked users:
 2ms
others: 243ms
total:  417ms
x
x
Закрыть


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