jquery plug-ins: Slide show based on CSS3 and HTML5

Article Introduction: zslide-based on CSS3/HTML5 demo documentation jquery plugin.

What kind of gourd medicine do you sell?

Jquery.zSlide.js is my zhangxinxu recently toss a jquery plugin, with the help of some of the new features of CSS3 and HTML5, in the browser similar to the PowerPoint slide show.

Second, why need?

Whether it's inside the company, or at some technical meetings, when we share, it's probably PowerPoint. But the thing about PowerPoint is that it lacks the spirit of "freedom" and "sharing" because it cannot be shared online at the moment. To learn something that Daniel shares in a technical meeting, most of them have to find resources to →download→ or unpack or open, and so on, the resources are not good.

Oh, my! such as I do not bother to cramp the person, will not be willing to do this "boil water to wash feet" thing! At this point, I always sigh with regret, if you can directly in the browser to see how good ah-mouth, clothing.

Actually, there is a special website to do such a thing. For example, the domestic bean, the Baidu Library of the storm, foreign well-known slideshare, but, taking into account product compatibility, these sites document demonstration media are flash, in fact, there is nothing bad, is the chocolate inside the nuts outside also wrapped a shell, a bit unpleasant gas!

Obviously, if you can use HTML+JS to implement a page effect similar to PowerPoint presentation documents, that is, easy resource sharing and technology diffusion, but also simple and efficient persistence. This is the meaning of the birth of Zslide. ZXX: I'll attach a zslide slide version for some future sharing.

Third, the main use of the crowd

Zslide plugin under the presentation of the document page, although simple, but still need a certain degree of CSS and HTML technology base, therefore, the main user of Zslide Plug-ins is the Web developers, especially the Web front-end development ER.

Iv. demo experience and sample downloads

Demo
You may mercilessly click here: Demo document jquery Plugin Zslide Demo

Download
You can ruthlessly click here: The above example demo source file package download

The resources used by the plugin itself are:
JQUERY.ZSLIDE.CSS,
Jquery.js (official latest)
Jquery.zSlide.js
A character set font and some HTML
Not using any pictures

V. About browsing

There are two ways to browse:
One is shortcut keys, pageup keys and PageDown, respectively, pointing forward and backward;
The second button (see the Lower right corner toolbar), there is back to the start page, forward, back and quick index. The following figure:

Zslide plugin If you want to cross-border browsing, the page will prompt "not before" or "has played the end", the following screenshot:

You may notice that the Zslide plugin contains the mouse hiding function, that is, if the mouse is kept in the main area of the demo page for more than 3 seconds, the mouse will be hidden and will appear when it moves. This is to browse the time for a better experience, like video browsing ~ ~

Vi. about browser support

Because of the use of a lot of CSS3 and HTML5 technology, as well as ES5 things. Therefore, the supported browsers are ie9+, recent versions of Firefox, opera, and Chrome browsers. In combination, Chrome has the best interaction effect.

Incidentally, this plugin has a lot of idea and practices borrowed from jquery Mobile.

Seven, about the interface

1. Top of
The top is the progress bar, the rightmost number is the total page, the number that will change is the current pages.

2. Main body
The subject is the main body, there is nothing to say.

3. Bottom
Please keep the copyright information on the left of the bottom. The right-hand side is the toolbar that contains some interactive and custom functionality.

tip: the top progress bar and the bottom bar can be hidden and displayed by double-clicking the blank area of the page.

Viii. about the bottom tool bar

Some of the buttons on the bottom toolbar have been shown above, no longer to repeat, and now highlight the other two important interactive buttons.

1. Timing reminding function
The icon in the lower right corner of the clock represents the timing reminder function. Usually we do document presentation should have time limit, such as 45 minutes of speech, 15 minutes to ask questions. Maybe we talked too much and forgot the time is not too good, then if the demo document can be sold to wake up, it is very interesting!

Clicking on it will have a frame similar to the following figure:

The total time is required, less than 720 minutes, that is, 12 hours, the time is sure to remind. How many time reminders before the end can enter multiple values separated by a value, the plug-in will automatically filter the appropriate time value (should be less than the total time), click the OK button to enter a timed reminder.

The timing reminder function uses the HTML5 localstorage storage is, namely when you are not less than closes the page, opens the page again, if detects your local has not expired reminder time, will remind you whether to use that time, the following screenshot:

Zslide plug-in is to go to sell Meng Route, all of its tips are "master, ~" Beginning, that time to remind examples, according to the distance between the time, the hint of its selling Meng will also be different, which is a:

2. Custom background function
The default background under the Zslide plugin is the dark color of my personal site color #34538b plus a radial highlight gradient. You can modify it to suit your liking.

Click the icon button below:

In the Open bomb box you can set your favorite background color (the recommended dark background, such as #123456), or your favorite online picture address, or directly from the local selection of your favorite image (HTML5 file Ajax upload local preview).

All background modifications are instant previews, and the 100% is adapted to the browser form, and the background is restored from the preview state when you click the Cancel button to close.
Now let's pick a picture locally (less than 500K), and then the page background will:

If you click on the OK button "Remember my Choice" is checked, the next time you open this page will use the background image, otherwise, the browser once closed, the background is still old.

3. Use of Help
This is a link, is the rightmost icon button, is pointing to this article. This feature is not customizable.

About Tool button Customization
In fact, the toolbar options in the lower-right corner can be customized. The complete toolbar options are as follows:

$.zslide.arraytool = ["Home", "Time", "Background", "Prev", "Index", "Next"];

Before initializing, you can decide which toolbar items to display by changing the array options, for example, we now remove the "back to initial page" option, and the following code:

$ (function () {
    $.zslide.arraytool = ["Time", "Background", "Prev", "Index", "Next"];
    $.zslide.init ();
});

Nine, about the use of the Code section

CSS Section
As follows:

<link rel= "stylesheet" href= "Css/jquery.zslide-min.css" type= "Text/css"/> <ink rel= "stylesheet" href= "
Css/yourslide.css "type=" Text/css "/>

Because of the variety of slides, so, generally speaking, each slide corresponds to a particular content of the CSS file, corresponding to the above yourslide.css. For example, the demo.cssin the demo page makes some special style settings for dynamically loaded pictures.

Hint:jquery.zSlide.css only on the body tag reset a margin attribute and Microsoft ya Black font, then a label color and click Style, The Pre label style, all other tags are not reset.

JS part
As follows:

<script src= "Js/jquery-min.js" ></script>
<script src= "Js/jquery.zslide-min.js" ></script >
<script src= "js/yourslide.js" ></script>
<script>
$ (function () {/
    * Some information can be changed before initialization *
    /$.zslide.init ();
});
</script>

Like CSS, there may be special interactions in the slides. For example, in the demo page to improve performance, the picture is done by dynamic delay loading.

Hint:The Zslide plug-in uses a literal writing style in which all parameters, methods, can be accessed globally, but other properties or methods are not recommended or modified except for the Arraytool parameters mentioned above. The Zslide plug-in also has a built-in pop-up plugin for this type of Zdialog page, which will be further described later.

HTML section
The head and tail of the HTML section are fixed and do not have any modifications. As follows:

<div id= "header" class= "Zsl_header" data-role= "header" ></div>

<<div id= "Footer" class= "Zsl_" Footer "data-role=" Footer >
    <!--please retain the copyright information-->
    ©<a href= "http://www.zhangxinxu.com/" > Zhangxinxu</a>
</div>

The body part is a list that has a specific format. As mentioned earlier, this plugin has taken advantage of some jquery mobile practices, such as not adopting a new label for HTML5, which is similar to using a custom attribute to data- a label, and is essential for interactive behavior.

Take the first very simple slide page in the demo page for example, the following HTML code:

<div id= "Slide1" class= "zsl_slide Slide" data-role= "slide" >
    
 
First, each slide page needs to be included in a data-role= "slide" div tag, where the class name zsl_slide is used for spacing beautification,slide For the WebKit Core browser to toggle the animation effect on the page, theID is required and unique (can be irregular, and of course an orderly ID is easy to identify).
 
If there are elements in the slide page that need to be rendered progressively, you need to set data-role= "Fade"for these elements and apply the two class names Zsl_fade and fade.
Generally speaking, the structure ofzsl_title and zsl_section is fixed.
 
In use, we need to change the <div class= "Zsl_section" between the main content of the >. It is also recommended that you use semantically labeled tags (div tags to avoid using them).
 
Specific HTML, then, all the other interactions are given to zslide to complete, from the use of speaking can not be simple. It's just that it takes a bit of effort to make a presentation, because it's not as visible as a PowerPoint drag, but it's a piece of cake for our kind of front-end developers who often interact with browsers, so Zslide can be said to be dedicated to front-end developers to use the demo document jquery plugin!
 
Event
Add on 2012-01-04 too much content, this to forget, fill up.
 
You can bind a slideload event to the elements of the data-role= "slide" and execute the method when the slide page is loaded. For example, the dynamic loading of a picture in a demo page is the relevant code:
 
$ ("#slide3"). Bind ("Slideload", function () {
    var, = $ (this);
    In order to clearly see the effect of delay loading, here set a 1-second timer
    //...
});
 
This event API is believed to be useful.
 
Jump between pages
Add on 2012-01-04
 
You can use a label on a page to make a customized jump between slide pages, for example:
 
<a href= "#slide3" > Jump jump </a>
 
Click on this "Jump Jump" link, the entire presentation document will point to  the ID slide3 slide page, to achieve a no refresh jump. If this ID points to an element that does not exist or is data-role= "Slide", the demo document jumps to the first page, which is to be noted.
 
X. Introduction of built-in Zdialog plugin
 
The Zslide plug-in also has a built-in Zdialog plug-in to display some hint text or toolbar interaction. This plugin can be accessed globally, you can use it at will, now briefly.
 
Zdialog Overview
The Zdialog plug-in is a targeted (specifically for this non-scrolling page design) plug-in, its UI applied a lot of CSS3 properties, positioning with the help of CSS (JS can also be adjusted, only in some cases), one can only open a frame, the frame closed, all the elements will be removed, Therefore, you cannot directly load the existing elements on the current page, or it will be done at once.
 
Parameters
Unlike Zslide, Zdialog provides a number of parameter APIs, such as the following table:
 

 
 
 
  
 
   
 
    
title
 
    
Description
 
    
default
 
   
 
   
 
    
Url
 
    
Ajax page address, text or HTML string
 
    
""
 
   
 
   
 
    
Ajax
 
    
Whether the Boolean is an AJAX-loaded. If true, the URL parameter is treated as an AJAX request address
 
    
True
 
   
 
   
 
    
Ajaxdata
 
    
Object Ajax Send attached parameters
 
    
{}
 
   
 
   
 
    
Overlay
 
    
Whether the Boolean displays a black light transparent mask layer. The default is to display
 
    
True
 
   
 
   
 
    
Closable
 
    
Whether the Boolean displays a close button. Default is not displayed
 
    
False
 
   
 
   
 
    
Title
 
    
The title of the string bullet frame. Display, no display
 
    
“”
 
   
 
   
 
    
Pagecontainer
 
    
jquery element Object loading frame HTML container
 
    
$ ("Body")
 
   
 
   
 
    
OnShow
 
    
The method that is called when the function bullet box is displayed
 
    
$.noop
 
   
 
   
 
    
OnClose
 
    
method to call when a function frame is completely closed
 
    
$.noop
 
   
 
  

 
 
The basic use is as follows:
 
$.zdialog.open ({
    URL: "ajax.php",
    title: "Test",
    closable:true,
    onshow:function () {
        alert (" Load Success ~ ~ ");
    }
;
 
Some of the built-in API methods are:
1. $.zdialog.alert (Message, Callback, options);

For example, the effect of this picture above is the following line of code to fix:
 
$.zdialog.alert ("Master, Time has come, Meow ~ ~");
 
callback parameters for the click to determine the button to perform when the callback,options parameters are generally soy sauce.
 
2. $.zdialog.confirm (Message, Surecall, Cancelcall, Options);
Confirm the prompt box, such as the following effect, even if this method is used:
 
The meaning of each parameter at a glance, I will not long-winded. The options parameters are also generally soy sauce.
 
3. $.zdialog.remind (message, options);
Direct Prompt box, no close button, for example:
 
$.zdialog.remind ("page jump ...");
 
4. $.zdialog.loading (options);
Load effect prompt box, such as the AJAX load page, the plug-in automatically invokes the method.
 
5. $.zdialog.position ();
The JS reposition of the frame. This method is used when the content width of the frame is more than the minimum width or the height exceeds the minimum height, for example, the frame of a custom background effect in the Zslide plugin-
 
$.zdialog.open ({
    URL: "Some HTML",
    ajax:false
}). position ();
 
6. $.zdialog.close ();
The balloon closes the method, and invoking the method triggers the OnClose callback, and a pop animation effect is available in browsers such as Chrome.
 
7. $.zdialog.remove ();
The frame move out method, call this method does not trigger the OnClose callback, also does not have any animation effect, the element bye directly from the page bye.
 
Xi. conclusion, nagging and supplementing
 
First about naming, why Plug-ins are called Zslide, because the English name of the slide is slide, and HTML5 exactly has a slide element. However, simply slide.js the container with other naming conflicts. Need to add a name, start their own use of the ZSL(you can see my CSS classes are the prefix), that is, zslslide, but obviously SL and slide repeated, so, pound, the SL to remove, so is zslide. As for why to use Z is very simple, like Zorro like to use the sword on the enemy's chest painting "Z" pattern, because it is the surname "Zuo", surname Pinyin first letter "z", mine is also "z". I remember that I used to write plug-ins using zxx as the name of the head, but later found that seemingly not enough low-key, so now xx have been removed.
 
With the zslide Nature also has Zdialog~ ~
 
Although I write this plug-in is still very attentively, every detail is very hard to carve, but, the level is limited, so there must be more than n size problem, welcome to ask a bug (as far as possible) or improve the views.
 
I have not done a stress test, only three slide page, so, when the slide page a lot, such as hundreds of performance problems on their own ghost, welcome feedback, Welcome to exchange.