Tải bản đầy đủ - 0 (trang)
Chapter 4. The Multiple Search Engine Interface

Chapter 4. The Multiple Search Engine Interface

Tải bản đầy đủ - 0trang

That's really all there is to it. Notice the search results frame is surrounded by a black border. That's

my award-winning attempt at web page design. It's a personal preference and easy to change to a more

basic two-frame (top and bottom) layout.

By the way, if you've been following the chapters in order, you'll soon notice that this one is different

in that it doesn't present entirely new code. Actually, I'll show you how to get extra mileage out of the

code we covered in Chapter 3. This will be a great way to see how you can reapply code that you

already have to save time.



4.1 Execution Requirements

This application uses DHTML, so you'll need NN or MSIE 4.x to use it. I included 20 search engines.

The number of search engines you use can easily reach the hundreds. But that's probably more than

the average user will ever need. Keep in mind, too, that this application might run really well on your

local machine, but, as with the slideshow, lots of graphics will increase the load time for Internet

users.



4.2 The Syntax Breakdown

This application involves two files: index.html and multi.html. index.html, shown in Example 4.1,

utilizes nested framesets to achieve the surrounding border effect.

Example 4.1. index.html



1

2

3

4







Multi-Search Engine Interface Site
















SCROLLING=NO>











The two JavaScript variables black and white at lines 6 and 7 are evaluated as HTML strings in the

SRC attribute of the frames in lines 12 and 14-16. We reviewed this in the sidebar JavaScript

Technique: Cheating the SRC Attribute in Chapter 2. If you've been following along in order, this

shouldn't be rocket science. The only frames that see any real action are frames[2], which

displays the search results, and frames[4], which houses the search engine interface. The rest are

purely for show. Let's move on to multi.html, shown in Example 4.2.

Example 4.2. multi.html



1

2

3 Multi-Engine Menu

4

199

200

201

202

207


208

209



210



214



217



218


211



212



213



215



216



219


220



221







More than 200 lines of code, but you've seen most of it already. This shouldn't be that bad. Let's begin

at line 7.



parent.frames[2].location.href ='javascript: parent.white';

If you count the frames in index.html, you'll see that frames[2] is where the search results show

up. Setting the location.href property in this frame makes things a bit smoother if you decide

to reload the application. This automatically sets the results document content to some "local" HTML

so that you don't have to wait for any previous search queries to reload.

By the way, even though you get a neat display of search engine results in frames[2], once you

follow a search results link, you're at the mercy of the search engine designers. Some will let you

follow the links while staying in the same frame. Others, unfortunately, like InfoSeek, will force the

document into the top window of the browser.



4.2.1 Strolling down Memory Lane

Let's take a trip down Memory Lane (RAM, in case you're wondering). As you examine the variables

below, you'll see some newcomers, but several will bear a striking resemblance to those you've

worked with in Chapter 3. Look, there's NN and curSlide! And they brought hideName and

showName, too. Not to mention imagePath and zIdx:



var

var

var

var

var

var

var

var

var

var

var

var



NN

curSlide

hideName

showName

perLyr

engWdh

engHgt

left

top

zIdx

imgPath

arrayHandles



=

=

=

=

=

=

=

=

=

=

=

=



(document.layers ? true : false);

0;

(NN ? 'hide' : 'hidden');

(NN ? 'show' : 'visible');

4;

100;

20;

375;

10;

-1;

'images/';

new Array('out', 'over');



These variables all have the same function they did in Chapter 3. They just pick up where they left off.

As for the new ones, perLyr defines the number of search engines you want to display per layer.

Variables engWdh and engHgt define default width and height values for each layer, respectively.

Variables left and top hold values for positioning the layers. Variable arrayHandlescontains an array

used for dynamically preloading images. Hold that thought for just a bit; we'll go over it shortly.

Talking about family reunions, the variables aren't the only familiar code. Check out the functions

from way back when.

Lines 142-156:



function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy)

{



if (NN) {

document.writeln('' +

copy + '
');

}

else {

document.writeln('
' + copy + '
');

}

}

Lines 163-177:



function hideSlide(name) { refSlide(name).visibility =

hideName; }

function showSlide(name) { refSlide(name).visibility =

showName; }

function refSlide(name) {

if (NN) { return document.layers[name]; }

else { return eval('document.all.' + name + '.style'); }

}

function changeSlide(offset) {

hideSlide('slide' + curSlide);

curSlide = (curSlide + offset < 0 ? slideShow.length - 1 :

(curSlide + offset == slideShow.length ? 0 : curSlide +

offset));

showSlide('slide' + curSlide);

}

Five functions: genSlide(), refSlide(), hideSlide(), showSlide(), and

changeSlide(). All of them operate the same way they did in Chapter 3; if you're not clear on

how any of them works, flip back a chapter and check them out. There are actually two more

functions, imagePreLoad() and imageSwap(), which perform the same operations as well,

but they've been modified enough to merit new discussion.



4.2.2 Dynamically Preloading Images

One of the big web paradigms is performing conventionally static operations dynamically. Why do

something statically when you can manage it more easily on the fly? That's what the following code



does with image preloading. What's the typical modus operandi when you want to preload images to

perform rollovers? It might look something like this:



var myImage1On = new Image();

myImage1On.src = 'images/myImgOn1.gif';

var myImage1Off = new Image();

myImage1Off.src = 'images/myImgOff1.gif';

Simple enough. But that's four lines of code for one pair of image rollovers. What if you have five or

ten pairs? That's 20 or 40 lines. If you ever have to make changes, that'll get messy in no time. The

Multiple Search Engine Interface introduces a way to pull off the same preloading, no matter how

many (theoretically) image pairs you have. We'll need three things:

1. An array of Image objects for each set of images you'll need. This application uses one array

for the images used when the mouse pointer arrow is over the link and one array for the

images that roll back when the mouse pointer arrow moves out of the link.

2. A simple naming convention for the images. The myImg1On.gif/myImgOff1.gif convention

will work fine. See the sidebar JavaScript Technique: Using Well-Constructed Naming

Conventions in Chapter 3 for more information. The naming convention must incorporate the

names of the arrays in step 1.

3. The eval() method.

For step 1, this application will use two arrays. One will be named out and will contain Image objects

of those images that roll over when the mouse-pointer arrow is outside the linked image. The other

will be named over and will contain Image objects of those images that roll over when the mousepointer arrow is over the linked image. Those variables will be represented for now in an array of

strings called arrayHandles, line 20:



var arrayHandles = new Array('out', 'over')

For step 2, we'll use a very simple naming convention. All image pairs will have the same prefix

followed by either out.jpg or over.jpg, depending on the image. For example, the image rollovers

associated with InfoSeek are named infoseekout.jpg and infoseekover.jpg.

For step 3, we'll first iterate through each element of arrayHandles and use eval() to create the

arrays soon to hold the Image objects. Enter lines 22-24:



for (var i = 0; i < arrayHandles.length; i++) {

eval('var ' + arrayHandles[i] + ' = new Array()');

}

Performing the above for loop is equivalent to hardcoding this:



var out

var over



= new Array();

= new Array();



To polish off the preloading, we use eval() again in function preLoadImages() to

dynamically create Image objects and assign the SRC property of each. Here is the function in lines

104-110:



function imagePreLoad(imgName, idx) {

for(var j = 0; j < arrayHandles.length; j++) {

eval(arrayHandles[j] + "[" + idx + "] = new Image()");

eval(arrayHandles[j] + "[" + idx + "].src = '" + imgPath +

imgName + arrayHandles[j] + ".jpg'");

}

}

imagePreLoad() accepts two arguments, a name prefix (e.g., Infoseek) and an integer used to

assign the appropriate array element to a new Image object. Once again, a for loop iterates through

arrayHandles, utilizing each element string to access one of the arrays just created and assign it a

unique reference. For example. Calling imagePreLoad('infoseek', 0) is equivalent to

hardcoding the following:



out[0]

out[0].src

over[0]

over[0].src



=

=

=

=



new Image();

'images/infoseekout.jpg';

new Image();

'images/infoseekover.jpg';



But that's four lines of code, exactly what I wanted to avoid doing over and over. Every time I want a

new image rollover pair, I can make a call to preLoadImages(). And that is working smarter,

not harder.



JavaScript Technique: Reusing Your Code

It's not really a JavaScript technique, per se. You can apply this to just about any language.

If you take a higher level approach when coding, particularly when creating objects and

functions, you'll find that you can use the same code in multiple situations. Consider the

functions genSlide(), refSlide(), hideSlide(), and showSlide().

They perform very basic, but necessary operations. The following list explains.











To create cross-browser DHTML layers, use genSlide()

To reference cross-browser DHTML layers, use refSlide()

To hide cross-browser DHTML layers, use hideSlide()

To show cross-browser DHTML layers, use showSlide()



Think of all the mileage we got from those functions in the last chapter. We'll also see them

again later in the book. If you haven't already, consider building a JavaScript source file

library with your reusable code. Chapter 6, tells you all about it. When you devise a great

function or object that you're sure to use again, drop it into a wisely named .js file for easy

future access.



4.2.3 Start Your Engines

Variable engines at lines 26-100 represents an array of elements, each containing another array of

elements with specific search engine information. Variable engines has 20 fairly long elements, so

let's takes a look at just the first one as shown in lines 27-29:



new Array('HotBot',



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 4. The Multiple Search Engine Interface

Tải bản đầy đủ ngay(0 tr)

×