Galleries and Animations with javascript using UIZE Framework
Powerful and free JavaScript framework supports widgets, DOM, templates and AJAX. It has a lot of ajax examples, animation examples, galleries, accordions and more.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.dotfusion.in/
">
<html xmlns="http://www.dotfusion.in/">
<head>
<title>Dynamic Collection | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="featured drag-and-drop ipad touch widget Uize.Widget.Collection.Dynamic"/>
<meta name="description" content="See an example of a dynamic grid of images, where you can select one or more, drag-and-drop to rearrange, remove, select all, clear selection, etc."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.dotfusion.in/category/blog/"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.collection.css"/>
<link rel="stylesheet" href="../css/widget.collectionitem.css"/>
<link rel="stylesheet" href="../css/widget.dialog.css"/>
<link rel="stylesheet" href="../css/widget.dialog.confirm.css"/>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Dynamic Collection
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/collection-dynamic.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>In this example, an instance of the <a href="../reference/Uize.Widget.Collection.Dynamic.html"><code>Uize.Widget.Collection.Dynamic</code></a> widget class is being used to wire up an editable grid of photos. You can select items in the grid by clicking on them. You can make a non-contiguous selection by ctrl-clicking on items. You can make a range selection by clicking on one item and then shift-clicking on another. Use the "<b>SELECT NONE</b>" button above the grid to clear a selection, or use the "<b>SELECT ALL</b>" button to select all the items. With some items selected, click the "<b>REMOVE</b>" button to remove the selected items. Also with a selection, click-and-drag to reposition the selected items within the collection.</p>
<p>Each item in the grid utilizes the <a href="../reference/Uize.Widget.CollectionItem.html"><code>Uize.Widget.CollectionItem</code></a> widget class. This limited utilization of the <code>Uize.Widget.Collection.Dynamic</code> class is not connected up to an application, so there are no consequences to reordering or removing items. To restore the grid contents, just <a href="collection-dynamic.html">reload the page</a>.</p>
</div>
<!-- slot for dynamically generated photo grid -->
<div id="page-collection"></div>
<div style="clear:left;"></div>
</div>
<!-- JavaScript code to make the dynamic collection "come alive" -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Widget.Collection.Dynamic',
'Uize.Widget.CollectionItem',
'Uize.Templates.Collection',
'Uize.Templates.CollectionItem',
'UizeSite.TestData.Photos'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** add the Uize.Widget.Bar.Slider child widget ***/
var collection = page.addChild (
'collection',
Uize.Widget.Collection.Dynamic,
{
built:false,
html:Uize.Templates.Collection,
itemWidgetClass:Uize.Widget.CollectionItem,
itemWidgetProperties:{
html:Uize.Templates.CollectionItem,
cssClassBase:'collectionItem',
cssClassActive:'collectionItemActive',
cssClassOver:'collectionItemOver',
previewClickAction:'Select'
},
dragToReorder:true,
makeNewlyAddedSelected:false,
localized:{
draggingToReorderSingular:'Moving one item.',
draggingToReorderPlural:'Moving {totalItems} items.',
removeItemConfirmation:'Are you sure you would like to remove this image?',
removeItemsConfirmation:'Are you sure you would like to remove the {0} selected images?',
removeItemConfirmationTitle:'Remove Image?',
removeItemsConfirmationTitle:'Remove Images?'
}
}
);
/*** wire up the page widget ***/
page.wireUi ();
/*** add initial items ***/
var
items = [],
photos = UizeSite.TestData.Photos ()
;
for (var photoNo = -1, photosLength = photos.length; ++photoNo < photosLength;) {
var photo = photos [photoNo];
items.push ({
title:photo.title,
previewUrl:photo.image.replace ('max_dim=500','max_dim=105')
})
}
collection.add (items);
}
);
</script>
</body>
</html>
