您的位置：首页 > 其它

Investigation on PhotoSwipe - 02

2012-06-13 15:13 169 查看

And now, use Firefox console to inspect all the classes structure:

PhotoSwipe structure:

Util structure:

We can easily figure out the design pattern of the classes, for certain entry, it has a specific class name, and it serves as a data structure, it has CssClass, EventTypes and a class definition in general, and action types perhaps:

EntryName

|

| - - - CssClass

| - - - EventTypes

| - - - EntryNameClass

| - - - XXXAction (optional)

| - - - other functions (optional)

| - - - other variables (optional)

And even PhotoSwipe it uses this pattern. The EntryNameClass embody the operating logic of that entry, and others serve as static member variables, such as EventTypes defines what event types that entry may dispatch.

Now is time to inspect it from top to down, use WinHTTrack to download the files from the demo, and solve some little problems. Then we set up the demo kit locally, and the HTML:

<body>

<div data-role="page" id="Home">

<div data-role="header">
<h1>PhotoSwipe</h1>
</div>

<div data-role="content" >

<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>

<ul data-role="listview" data-inset="true">
<li><a href="#Gallery1">First Gallery</a></li>
<li><a href="#Gallery2">Second Gallery</a></li>
</ul>

<p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>

<ul data-role="listview" data-inset="true">
<li><a href="01-default.html" target="_blank">Code Computerlove</a></li>
</ul>

</div>

<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>

</div>

<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">

<div data-role="header">
<h1>First Gallery</h1>
</div>

<div data-role="content">

<ul class="gallery">

<li><a href="images/full/001.jpg" rel="external"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
<li><a href="images/full/002.jpg" rel="external"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
<li><a href="images/full/003.jpg" rel="external"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
<li><a href="images/full/004.jpg" rel="external"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
<li><a href="images/full/005.jpg" rel="external"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
<li><a href="images/full/006.jpg" rel="external"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
<li><a href="images/full/007.jpg" rel="external"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li>
<li><a href="images/full/008.jpg" rel="external"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li>
<li><a href="images/full/009.jpg" rel="external"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li>

</ul>

</div>

<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>

</div>

<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">

<div data-role="header">
<h1>Second Gallery</h1>
</div>

<div data-role="content">

<ul class="gallery">

<li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>
<li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>
<li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>
<li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>
<li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li>
<li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li>
<li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li>
<li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li>
<li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>

</ul>

</div>

<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>

</div>

</body>

According to jQueryMobile official docs: http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html

The structure of the HTML is formed to follow jQueryMobile framework, and the navigation among pages is handled by jQM. So let's focus on its script part:

<script type="text/javascript">

(function(window, $, PhotoSwipe){

$(document).ready(function(){

$('div.gallery-page')
.live('pageshow', function(e){

var currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));

return true;

})

.live('pagehide', function(e){

var currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}

return true;

});

});

}(window, window.jQuery, window.Code.PhotoSwipe));

</script>

This script tell browser to do that after DOM loaded: bind anonymous function on pageShow event to 'gallery-page' class
DIV tag. And what the handler function does is to create a photoSwipe instance, passing all the a tags within the showed page.

photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));

photoSwipe() seems to be declared as a jQuery wrapper method now.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航