Wiki  |   Blog  |   Sitemap  |   Search  
Home
JavaScript UI FrameworkExamplesRuntime (DOM, SMIL..)jQuery APIs

Ajax

Pressing buttons should initiate dynamic loading content.

Source code

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml"> <button onclick="ample.query('#cl_content').load('/share/examples/xhtml/content1.xml')">Load content 1 </button> - <button onclick="ample.query('#cl_content').load('/share/examples/xhtml/content2.xml')">Load content 2 </button> <br /> <br /> <div id="cl_loading" style="display:none">loading...</div> <div id="cl_content" onload="ample.query('#cl_loading')[0].style.display='none'" onunload="ample.query('#cl_loading')[0].style.display=''"></div> </script>

Effects

Position animation (press the button for play):

Source code

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml"> <button onclick="ample.query(this).animate({left:'300px'});this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">normal</button> <br /> <button onclick="ample.query(this).animate({left:'300px'}, 'slow');this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">slow</button> <br /> <button onclick="ample.query(this).animate({left:'300px'}, 'fast');this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">fast</button> <br /> </script>
Color animation (move the mouse over the text):

Source code

<script type="application/ample+xml" xmlns="http://www.w3.org/1999/xhtml" xmlns:aml="http://www.amplesdk.com/ns/aml"> <div onmouseenter="ample.query(this).animate({color:'#dfff48', backgroundColor:'#3333cd'});" onmouseleave="ample.query(this).animate({color:'#205088', backgroundColor:'#fff665'});" 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>

History

Pressing a button below moves the box to a corresponding position. The new location is saved in the browser history. Thus navigating browser back/forward buttons you can get box moved to the previous/next position.
If you add the page (with a box located in a position different from the initial) to the browser bookmarks and later the page from a bookmark you can see the box is located where it was when bookmarked.

Source code

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