Lightbox image notice for web page Widgets

Now let's talk about ext core, the application of Web Page widgets.

The first is the classic lightbox effect (CLICK I

Enter the demo ). Ext. UX. lightbox supports two registration methods (Register (). One is to register a single image. The other is batch, it has the effect of "previous"/"Next" for the user to move forward or backward. It should be said that these two methods have already met the general lightbox effect requirements, and the images appear with animated effects, so that users can have a more lively feeling.

• Ext. UX. lightbox. Register ('a [rel ^ = lightbox] ');
• Ext. UX. lightbox. Register ('A. lb-flower ', true); // true to show them as a set

You do not need to create an instance. Run Ext. UX. lightbox. Register to add lightbox to the image. How do I select images on the page? The answer is the CSS selector. For example, the first parameter in register () is the CSS selector. For example, in the first item of a [rel ^ = lightbox] above, that is, if you select Element A That must have the rel attribute as lightbox, a set of a elements that meet the condition will produce the lightbox effect. A is a connection, and its href points to the content displayed in the lightbox image.

Let's take a look at the first method's HTML structure:

<Div class = "thumbnail"> <br/> <a href = "http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image1.jpg" mce_href = "http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image1.jpg" <br/> rel = "lightbox"> <br/> </a> <br/> </div>

The title attribute is optional. If it is set, it will appear below the box.

The second usage is sent to the second parameter of true, indicating that multiple images are registered this time. For example, let's take a look at the following a element, and there will be more class = "LB-flower", matching the CSS selector of 'a. lb-flower.

<Div class = "thumbnail"> <br/> <a class = "LB-flower" Title = "this is a narrow image with a long description. notice how the bottom of the lightbox automatically expands to accommodate the longer caption. "<br/> href =" http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image6.jpg "mce_href =" http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image6.jpg "> <br/> </a> <br/> </div> <br/> <Div class =" thumbnail "> <br/> <class = "LB-flower" Title = "Press 'esc 'to close the gallery. "href =" http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image7.jpg "mce_href =" http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image7.jpg "> <br/> </a> <br/> </div>

The following results are displayed:

 

Go to the Ext. UX. lightbox source code and find that its structure is still in JS Singleton mode. Therefore, we can call the singleton method register. The small widget is always as clean and clear as the ext code! -- Yes, I did not read the entire code, but I found a key hack!

Init: function () {<br/> ...... <Br/> If (! Initialized) {<br/> Ext. apply (this, ext. util. observable. prototype); <br/> Ext. util. observable. constructor. call (this); <br/> This. addevents ('open', 'close'); <br/> This. initmarkup (); <br/> This. initevents (); <br/> initialized = true; <br/>}< br/> },

I also found traces of hack, which is "hijacking" the obserable class. First, prototype, and then the constructor call, the result is that the singleton and observable are grafted. This inheritance is acceptable, but it is not worth advocating for the younger brother.

 

The package file in this example can beClick here to download

, 989kb in size.