Подвижный и изменяемый размер div, дочерние изменяемые размеры div с ним? - PullRequest
0 голосов
/ 27 марта 2011

Хорошо, поэтому я буквально сделал окно «Мой компьютер» исключительно из CSS3.Я собираюсь закончить это, и что я хотел бы сделать, это переместить его и сделать окно изменяемого размера.

Некоторые дочерние классы хотят изменить размер только по ширине, а некоторые хотят изменить размер по ширине и высоте.Это кажется довольно сложной задачей, и я на самом деле больше обеспокоен перемещением div.Я попробовал несколько раз, и я просто не могу заставить его работать!

Может ли кто-нибудь мне помочь?Может быть, JFiddle это работает?Я ценю это, ребята!

РЕДАКТИРОВАТЬ: Вот сайт, извините!:

http://projects.beauaugust.co.uk/windows98/

Просмотр источника, это все там!

Ответы [ 4 ]

2 голосов
/ 27 марта 2011

Вы смотрели на http://jqueryui.com/demos/resizable/ и http://jqueryui.com/demos/draggable/? Я полагаю, что вы можете получить желаемую функциональность между этими двумя и некоторым пользовательским кодом.

Я только что посмотрел на ваш кодна jfiddle и поместите это:

$(function() {
    $( ".window" ).draggable().resizable();
});

, который отлично работал, чтобы сделать его перетаскиваемым.Это тоже изменилось до некоторой степени.Чтобы изменение размера работало лучше, было бы лучше, если бы вы указали относительные размеры дочерних элементов окна (например, 100%) вместо размеров в пикселях.

Надеюсь, это поможет.Если да, отметьте как ответ.

1 голос
/ 27 марта 2011

Вы можете рассмотреть возможность использования Интерфейсных элементов с JQuery

Вот список демонстраций .

В частности, вы можете посмотреть наэтот один

Другие вещи из этого плагин интерфейса может помочь вам, как это один (когда реализуете прокрутку)

Но естьиграть с интерфейсным плагином для JQuery.Это очень полезно на мой взгляд.

0 голосов
/ 27 марта 2011

Проверьте рабочий пример на http://jsfiddle.net/Sc2Qm/1/

В настоящее время изменяемый размер будет изменять только .window из-за того, как у вас есть HTML и CSS.

0 голосов
/ 27 марта 2011

Я прямо там с Робертом. Я не уверен, что CSS обладает способностью делать вещи такими динамичными. В этом случае решение - Javascript или как предложено (и намного более просто) jquery.

Я могу ошибаться, но я думаю, что для того, чтобы javascript (возможно, и jquery) точно указывал, что вы хотите, чтобы иметь возможность что-либо делать, вам нужно использовать атрибут 'id'.

<div class="window" id="window_main">

Затем, когда вы используете функции jquery, вы можете применить качество перетаскивания к "window_main".

Надеюсь, это поможет.

Удачи!

...