Introduction to extjs.com special effects for web page Widgets

Speaking of this, I think that when I first learned the web page, I used a button to flip the JavaScript code using Dreamweaver. That's a typical web page effect. Do you still remember to say the function name ?...... Mm_preloadimages ('images/2.jpg '),

Mm_swapimage ('rotator', '', 'images/2.jpg ', 1) haha

. We can also easily implement it in ext core. This part is described in the third section of this article. Update 2010.1.2

Using your own library on your own page is naturally not a rare thing, And the JS effects of extjs.com are not that complicated, and several functions are enough to complete the task. Today, I continued last night's celebration of the widget.

To copy and paste her code. Of course, you can also go to extjs.com

The page is taken back directly, but the download of CSS background images is hard to address. We recommend this Firefox plug-in scrapbook.

. In a sense, the JS Code used has a menu and simple message prompts (messages). messages is a prompt with only one or two sentences, but the position is eye-catching, can play a very good role in prompting. The following two JS scripts will be merged.

I. Menus

The menu of extjs.com is not actually a "menu" in the software definition, because we can see that the menu shows more elements, and its understanding is to add an onmouseover event on the navigation bar, when this event is triggered, the "Panel" is displayed. As you can see from the HTML, the "Panel" consists of various menus ". It's easy to implement this... Taking the last store item as an example, the HTML structure of its "Panel" is as follows:

<Div class = "flyout-menu" id = "store-menu" style = "display: none;" mce_style = "display: none; "> <br/> <Div style =" width: 200px; "> <br/> <p> <br/> <a href =" http://www.extjs.com/store/extjs/ "mce_href =" http://www.extjs.com/store/extjs/ "> ext JS </a> </p> <br/> <ul> <br/> <li> <a href = "http://www.extjs.com/store/extjs/" mce_href = "http://www.extjs.com/store/extjs/"> licenses </a> </LI> <br/> <li> <a href = "http://www.extjs.com/store/extjs/#support-table" mce_href = "http://www.extjs.com/store/extjs/#support-table"> support subscriptions </a> </LI> <br/> </ul> <br/> <p> <br/> <a href = "http://www.extjs.com/store/gxt/" mce_href = "http://www.extjs.com/store/gxt/"> ext GWT </a> </p> <br/> <ul> <br /> <li> <a href = "http://www.extjs.com/store/gxt/" mce_href = "http://www.extjs.com/store/gxt/"> licenses </a> </LI> <br/> <li> <a href = "http://www.extjs.com/store/gxt/#support-table "mce_href =" http://www.extjs.com/store/gxt/#support-table "> support subscriptions </a> </LI> <br/> </ul> <br/> <p> <br/> <a href = "http://www.extjs.com/store/faq.php" mce_href = "http://www.extjs.com/store/faq.php"> help </a> </p> <br/> <ul> <br/> <li> <a href = "http://www.extjs.com/store/faq.php" mce_href = "http://www.extjs.com/store/faq.php"> ordering FAQ </a> </LI> <br/> </ul> <br/> </div> <br /> </div>

The style of the outermost Div should be class = "flyout-menu", which is classified as a menu type and also hides the menu style = "display: none ;", it is hidden by default and displayed only when used. After introducing the structure, let's look at the code, which is also relatively simple:

VaR activemenu; </P> <p> function createmenu (name) {<br/> var El = ext. get (name + '-link'); <br/> var tid = 0, menu, Doc = ext. getdoc (); </P> <p> var handleover = function (E, T) {<br/> If (T! = El. DOM & T! = Menu. DOM &&! E. Within (EL )&&! E. within (menu) {<br/> hidemenu (); <br/>}< br/>}; </P> <p> var hidemenu = function () {<br/> If (menu) {<br/> menu. hide (); <br/> el. setstyle ('text-recoration', ''); <br/> Doc. UN ('mouseover', handleover); <br/> Doc. UN ('mouseunder', handledown); <br/>}</P> <p> var handledown = function (E) {<br/> If (! E. within (menu) {<br/> hidemenu (); <br/>}</P> <p> var showmenu = function () {<br/> cleartimeout (TID); <br/> tid = 0; </P> <p> If (! Menu) {<br/> menu = new Ext. layer ({shadow: 'side', hidemode: 'display'}, name + '-menu'); <br/>}< br/> menu. hidemenu = hidemenu; </P> <p> menu. el = El; <br/> If (activemenu & menu! = Activemenu) {<br/> activemenu. hidemenu (); <br/>}< br/> activemenu = menu; </P> <p> If (! Menu. isvisible () {<br/> menu. Show (); <br/> menu. alignto (El, 'tl-Bl? '); <Br/> menu. sync (); <br/> el. setstyle ('text-recoration', 'underline'); </P> <p> Doc. on ('mouseover', handleover, null, {Buffer: 150}); <br/> Doc. on ('mousedown', handledown); <br/>}</P> <p> el. on ('mouseover', function (e) {<br/> If (! TID) {<br/> tid = showmenu. defer (150); <br/>}< br/>}); </P> <p> el. on ('mouseout', function (e) {<br/> If (TID &&! E. within (El, true) {<br/> cleartimeout (TID); <br/> tid = 0; <br/>}< br/> }); <br/>}</P> <p> createmenu ('products'); <br/> createmenu ('support '); <br/> createmenu ('store ');

Through the above steps, you can create a simple navigation menu, I believe the code is also very understandable, hurry up to use it in your project!

Ii. Messages

Messages is simpler. Messages must define two containers: MSG = ext. Get ('msg ') and msginner = ext. Get ('msg-inner ').

<Div style = "position: static; visibility: visible; left: auto; top: auto; Z-index: auto; "id =" MSG "> <br/> <Div class =" "id =" MSG-inner "> <br/> ext 3.0.0 release now available» </div> <br/> </div>

 

// Messages <br/> var msgs = [<br/> {text: 'ext enterprise training now available» ', URL: 'http: // extjs.com/support/training /'}, <br/> {text: 'ext GWT 2.0 release now available» ', URL: 'http: // extjs.com/products/gxt/'}, <br/> {text: 'ext 3.0.0 release now available» ', URL: 'http: // extjs.com/products/extjs/download.php'} <br/>]; <br/> var msgindex = 0; <br/> var MSG = ext. get ('msg '), <br/> msginn ER = ext. get ('msg-inner '), <br/> active = NULL; <br/> If (msginner) {<br/> msginner. addclassonover ('msg-over'); <br/>}< br/> If (MSG) {<br/> MSG. on ('click', function () {<br/> window. location = active. URL; <br/>}); <br/>}< br/> function doupdate () {<br/> If (msginner) {<br/> msginner. update (active. text); <br/>}< br/> If (MSG) {<br/> MSG. slidein ('B'); <br/>}< br/> function showmsg (INDEX) {<Br/> If (msginner &&! Msginner. hasclass ('msg-over') {<br/> active = msgs [Index]; <br/> If (MSG & MSG. isvisible () {<br/> MSG. slideout ('B', {callback: doupdate}); <br/>}else {<br/> doupdate (); <br/>}< br/> setinterval (function () {<br/> msgindex = msgs [msgindex + 1]? Msgindex + 1: 0; <br/> showmsg (msgindex); <br/>}, 5000); <br/> showmsg (0 );

Obviously, you can define a new msgs array to modify the content to be displayed.

3. Ext webpage effect: Flip menu.

* Set the reverse menu. This is a classic network effect. You need to set the following CSS style:

* Meaning :! Important is the word related to ff;

* Configuration steps:

* 1. html is:
<Textarea class = "html"> <br/> <ul id = 'gobalmenu '> <br/> <li id = "Index"> <br/> <a href = ".. /"mce_href =" "Title =" Homepage "> </a> <br/> </LI> <br/> ...... <Br/> <ul id = 'gobalmenu '> <br/> <textarea>

* 2. Set the display: line, Li height, and slice height as follows:

* Computation: font-size: 18px indicates the computation word required for ff.
<Textarea class = "CSS"> <br/> # gobalmenu Li {<br/> display: inline; <br/> Height: 22px; <br/> margin-left: 10px; <br/> font-size: 18px; <br/> background-repeat: No-Repeat; <br/>}< br/> # gobalmenu Li IMG {<br/> Height: 22px; <br/>}< br/>

* 3. The anti-bot format must be "Li element name" + onhover
<Textarea class = "CSS"> <br/> li # docs {<br/> Background: url(main_15.gif) No-Repeat; <br/>}< br/>. docsonhover {<br/> Background: url(index_hover_16.gif) No-repeat! Important; <br/>}< br/>

Run the Code:

Callhovermenu = function (li_selector) {<br/> Ext. onready (function () {<br/> Ext. select (li_selector ). each (this); <br/>}, function (LI) {<br/> Ext. get (Li. dom. ID ). addclassonover (Li. dom. ID + 'onhover '); <br/>}); <br/>}

Iv. Summary

In the demo officially released, ext
Core, in addition to lightbox, there are also new widgets provided by javasusel, menu, and tabs. In the first lecture, we have already talked about ligiht. This article will take a look at: 1. Carousel album controls; 2. Menu
Menu; 3. Tab tabs. Friends who know ext may be curious. Isn't ext already containing the menu and tabs components? Why is ext
Core also provides these two controls? The positioning of the two is obviously different. It is required to add components such as component/container to the page with the portal as the background. The code is sufficient, and the maintenance is difficult and the page logic is complex-thankless, therefore, it is completely unnecessary, so more lightweight widgets have emerged.

The HTML, CSS, and JavaScript components behind each special effect are the objects of research. We research html/CSS to ensure that our end users constantly modify the widgets to meet our requirements. JS is generally a encapsulated logic, how can we spend time studying it for no additional reason? EXT
The demo released by core this time is quite impressive, and it is really a good research object. As first introduced, "Find and learn something
New ", greatly satisfying the impulse to learn new and new, there is no better reason than this?

In the next lecture, if you have the opportunity, the younger brother will talk about carousel, menu, and tabs. I hope you will pay more attention to them.

I'm not a younger brother. I'm pleased with ext, because the demo's "a minimal amount of elegant and readable code" seems to have been confirmed. The code is written in this way. You can take a quick look. Finally, I wish you a smooth use of ext! Shun.

 

The package file in this example can beClick here to download

, 989kb in size.