Myfocus library and style instructions

Myfocus library and style instructions

Only three steps are required:

Step 1. Introduce the myfocus library and style application file in the HTML

<SCRIPT type = "text/JavaScript" src = "myfocus-1.0.4.min.js"> </SCRIPT> <! -- First introduce the myfocus library -->
<SCRIPT type = "text/JavaScript" src = "pattern/mf_name.js"> </SCRIPT> <! -- Introduce the style application JS -->
<LINK rel = "stylesheet" href = "pattern/mf_name.css"/> <! -- Introduce the style application CSS -->

(For ease of use, myfocus library files and style application files are hosted in Google Code and can be directly introduced and used)

Step 2. Create a standard (myfocus) HTML structure and fill in your content (tip1: In this example, the number of Li is 5, which can be increased or decreased at will, but at least 2)

<Div id = "boxid"> <! -- Focus graph box -->
<Div class = "loading"> <span> Please wait... </span> </div> <! -- Load the screen (which can be deleted) -->
<Ul class = "pic"> <! -- Content list -->
<Li> <a href = "#"> </ a> </LI>
<Li> <a href = "#"> </ a> </LI>
<Li> <a href = "#"> </ a> </LI>
<Li> <a href = "#"> </ a> </LI>
<Li> <a href = "#"> </ a> </LI>
</Ul>
</Div>
Step 3. Call any location after Step 1 code (it is recommended to call before the

// You can call simple parameters:
<SCRIPT type = "text/JavaScript">
Myfocus. Set ({
ID: 'boxid', // the ID of the focus graph box.
Pattern: 'mf _ name', // name of the style Application
Time: 3, // switch interval (seconds). If you omit the setting, automatic switch is disabled.
Width: 450, // set the width (main graph Area)
Height: 296 // set the height (main image area)
});
</SCRIPT>

// Or call a specific parameter (recommended ):
<SCRIPT type = "text/JavaScript">
Myfocus. Set ({
ID: 'boxid', // the ID of the focus graph box.
Pattern: 'mf _ name', // name of the style Application
Time: 3, // switch interval (seconds). If you omit the setting, automatic switch is disabled.
Trigger: 'click', // trigger switch mode: 'click'/'mouseover' (hover), default: 'click'
Width: 450, // set the width (main graph Area)
Height: 296, // set the height (main image area)
Txtheight: 'default' // specifies the height of the text layer. 'default' indicates the default height, 0 indicates the hidden height, and 'default' indicates the default height'
});
</SCRIPT>

Explanation of the name of the myfocus chart

1. Style applications:

All style applications include two files: JS and CSS. You can download more style applications and introduce them to your HTML files;
The name of the style application file is mf_name; Mf indicates myfocus, and name is of course the name of the style application;
For a thumbnail, mf_name_tb is used. For a thumbnail, the following TB indicates a thumbnail;
The user-defined structure is mf_sd_name, where SD indicates the user-defined structure;

2. Define the IMG tag attributes in the standard HTML Structure

SRC is the big image address. (Do you still use this?-| ..)
Thumb is a thumbnail (that is, a thumbnail address is used as the thumbnail address if left empty );
ALT is the title text displayed
Text is a more detailed description text
The number of likes in the content list (that is, the number of pictures in the focus chart) can be added or deleted at will.

» Problems that may occur during use

1. How is myfocus compatible? Can I use it for free? Myfocus is compatible with all mainstream browsers, including IE6 +, ff3.5 +, and chrome5.0 +, and ensures consistent performance in different browsers. Myfocus can be used free of charge while retaining the basic book information.

2. Why does the page experience poor when the focus chart is opened? How to fix it? The main reason for the huge page is the latency on the network and the Code Execution Delay of IE, which leads to the failure of the correct style on the application in a timely manner. There are three solutions: first, manually add the corresponding class to the DIV of the focus chart. For example, if the application style is mf_taobao2010, add:
<Div id = "myfocus" class = "mf_taobao2010">... </div>;

In addition, the style is directly added to its Div, for example:
<Div id = "myfocus" style = "width:. PX; Height:. PX; overflow: hidden;">... </div>

The last one is to fundamentally solve the code execution latency, because myfocus normally runs the style code only after the page onload/loads all the images, but when there are too many page elements, this kind of wait is a waste. You can choose to execute it immediately. You only need to add a true parameter after the call parameter: myfocus. set ({Your parameter settings}, true); but note that such a call can only be placed after the DIV structure of myfocus, this is recommended when applying myfocus on complex pages.

3. Does myfocus use gb2312 encoding? Must I use UTF-8?

Myfocus files are in UTF-8 format by default. Use charset = "UTF-8" as needed on gb2312 encoded webpages"

Example: <SCRIPT type = "text/JavaScript" src = "XXX. js" charset = "UTF-8"> </SCRIPT>

Another solution is to save the JS file as gb2312 encoding (the default saving format of Windows notepad ).