Блог  |   Карта сайта  |   Поиск  |   Language:  eng рус
Главная
Ajax GUI FrameworkПримерыРасширения

Модуль Drag&Drop

Попробуйте переместить желтые квадраты из верхнего зеленого прямоугольника в нижний.

Исходный код

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml"> <div aml:droppable="true" class="droppable" ondragenter="event.dataTransfer.dropEffect = 'move'"> <div aml:draggable="true" class="draggable"> Обьект 1 </div> <div aml:draggable="true" class="draggable"> Обьект 2 </div> <div aml:draggable="true" class="draggable"> Обьект 3 </div> <div aml:draggable="true" class="draggable"> Обьект 4 </div> </div> <br /> <div aml:droppable="true" class="droppable" ondragenter="event.dataTransfer.dropEffect = 'move'"></div> </script>

Модуль Resize

Попробуйте изменить размеры прямоугольника.

Исходный код

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml" style="height:200px;"> <div aml:resizable="true" class="resizable">Элемент</div> </script>

Модуль Effects

Анимация координат (нажмите на кнопку для проигрывания):

Исходный код

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml"> <button onclick="this.$play('left:300px', 1000);this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">равномерно</button> <br /> <button onclick="this.$play('left:300px', 1000, AMLElement.EFFECT_DECELERATE);this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">с замедлением</button> <br /> <button onclick="this.$play('left:300px', 1000, AMLElement.EFFECT_ACCELERATE);this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">с ускорением</button> <br /> </script>
Анимация цвета (поместите указатель мыши над текстом):

Исходный код

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml"> <div onmouseenter="this.$play('color:#dfff48, backgroundColor:#3333cd', 500);" onmouseleave="this.$play('color:#205088, backgroundColor:#fff665', 500);" class="playcolor"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div> </script>

Модуль Lazy Loader

Нажатие кнопок должно приводить к динамической подгрузке содержимого.

Исходный код

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml"> <button onclick="ample.getElementById('cl_content').$load('/share/examples/xhtml/content1.xml')">Загрузить содержание 1 </button> - <button onclick="ample.getElementById('cl_content').$load('/share/examples/xhtml/content2.xml')">Загрузить содержание 2 </button> <br /> <br /> <div id="cl_loading" style="display:none">загружается...</div> <div id="cl_content" onload="ample.getElementById('cl_loading').style.display='none'" onunload="ample.getElementById('cl_loading').style.display=''"></div> </script>

Модуль History

Нажатие на одну из трех кнопок, расположенных ниже, передвигает голубой квадрат в соответствующую позицию. Новое положение запоминается в истории веб-браузера. Таким образом, последующая навигация с помощью кнопок браузера (вперед или назад) будет возвращать квадрат в соответствующе положение.
Если вы занесете страницу (с квадратом, расположенном в позиции, отличной от начальной) в закладки браузера, то позже, при открытии страницы из закладок, вы можете заметить, что квадрат находится на том самом месте, на котором он был при добавлении в закладки!

Исходный код

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml"> <button onclick="historyMove('position1');this.ownerDocument.$bookmark('position1')" style="width:120px;">положение 1</button> <button onclick="historyMove('position2');this.ownerDocument.$bookmark('position2')" style="width:120px;">положение 2</button> <button onclick="historyMove('position3');this.ownerDocument.$bookmark('position3')" style="width:120px;">положение 3</button><br /> <br /> <div id="history"><br /></div> </script>