jquery Easyui Tab Introduction page problem

JQuery Easyui's Tabs plugin has two ways to load the contents of a tab (tab): "HREF remote request" and "content local contents", this article makes a simple analysis and thinking about the pros and cons of both approaches.

Features of both: href mode loading data:

1. The loaded page is only loaded with the contents of the inside of the body element, which is just the HTML fragment of jquery's Ajax request.
2. There is a matte effect when loading a remote URL, which is the "waiting ..." effect, and the user experience is better.
3. When loading the page layout is more complex, or there are more JS scripts need to run, coding often need to be cautious, prone to problems, will be discussed in detail later.

Content-Mode loading data features:

1. More flexible, you can spell the HTML code in the script and then assign the content property to the tab, but this will make the code easier to read.
2. You can assign an IFRAME to content and embed an IFRAME with nothing to complete.
3. The use of IFRAME will cause the client JS repeatedly loading, wasting resources, such as your home page to reference Easyui Library, your IFrame also to reference, waste generated.

Simple summary:

According to the above analysis, the use of content in a more concise manner, and can be introduced into the IFRAME to do everything, the shortcomings are obvious, the system is more complex, will bring enormous resources waste, only for a relatively simple page system;

and the HREF way to the coding ability requirements slightly higher, because the HTML fragment, a little attention will be handled poorly, but skilled, personally feel that the href method is the perfect choice.

HREF FAQ: 1.href loading only HTML fragments of the destination URL

This feature is determined by the AJAX request processing mechanism in the jquery package, so there is no need for tags such as html,head,body in the target URL page, and even those elements are ignored, so any script placed inside the head tag will not be introduced or executed.

2. Short page clutter:

When the page of the href link is more complex, Easyui often need a longer process to render it, when the loaded HTML fragment is no layout, and it will be good after a while, Easyui has finished rendering it. How to avoid this chaotic process, but also rely on the easyui of a basic plug-in-parser (Parser).

Parser has a OnComplete event, this event refers to the Easyui to the page to complete the rendering of the trigger, so the idea is clear: with a DIV cover to let the HTML fragment loaded in, in the OnComplete event, let this div fade out, At this time rendered good HTML fragment can beauty out of the bath, but also the whole of a waiting for the effect, double benefit. There are two things to do:

The first is to put a mask with a div in the HTML fragment to be loaded:

Show Sourceview source print?

1	<divid="loading"style="position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #DDDDDB; text-align: center; padding-top: 20%;"></div>

The second is to handle related events at the end of the loaded HTML fragment:

Show Sourceview source print?

1	functionshow(){

2	$("#loading").fadeOut("normal", function(){

3	$(this).remove();

4

});

5

}

6	vardelayTime;

7	$.parser.onComplete = function(){

8	if(delayTime)

9	clearTimeout(delayTime);

10	delayTime = setTimeout(show,500);

11

}

It is important to note that if multiple tab pages use the OnComplete event, the current definition overrides the one previously defined. The OnComplete event is called every time the Easyui render is completed, so the OnComplete event is called each Open tab page that contains the Easyui control.

The Easyui component-related script for the 3.html fragment has an inexplicable error:

In fact, this phenomenon is the same as the first phenomenon, the Easyui to complete the rendering of HTML fragments takes a certain amount of time, the more complex the page, the longer the time, it is difficult to avoid the existence of HTML script Easyui some plug-in calls, such as the DataGrid, this time will be error, The solution above, put these scripts in the OnComplete event processing, will ensure that the rendering is completed, will not be executed.

4. The message that the form is validated in the window will be randomly set:

This phenomenon should be the plug-in itself bug, the location of the calculation does not take into account these special things, the solution can be opportunistic, after opening the window, let the form does not meet the validation of input to get the focus on it.

5. Two or more times to load remote data problems:

The official has already explained that this bug has been fixed in the 1.2.5 version, but there are still a lot of people who are reacting to the phenomenon of loading remote data two times, even in the 1.2.6 version, if you do encounter this situation, please check the following way:

• Whether the data returned by the remote data contains a style such as class= "Easyui-tabs" or class= "Easyui-datagrid", and if so, Easyui is automatically rendered when the HTML fragment is obtained, a request has been made to the remote data source ；
• Do you use JavaScript again to $ (' #tabsId '). Tabs ({...}); or $ (' #tabsId '). DataGrid ({...}); To bind an event or set a property, the corresponding control is actually rendered again, and the remote data is requested again.

Why this, look at the source code will know:

$.fn.tabs = function(options, param){

2	if(typeofoptions == ‘string‘) {

3	//这个地方的分支很清楚，只有当options为字符串的时候，才是直接调用控件本身提供的方法。

4	return$.fn.tabs.methods[options](this, param);

5

}

6	//如果options不是字符串，直接构造控件，inxing渲染。

7	options = options || {};

8	returnthis.each(function(){

9	varstate = $.data(this, ‘tabs‘);

10

varopts;

11	if(state) {

12	opts = $.extend(state.options, options);

13	state.options = opts;

14

}

15

else{

16	$.data(this, ‘tabs‘, {

17	options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),

18	tabs: wrapTabs(this),

19	selectHis: []

20

});

21

}

22	buildButton(this);

23	setProperties(this);

24	setSize(this);

25	initSelectTab(this);

26

});

27

};

As a result, all controls are re-constructed when passed directly to the object, and most of the problems with tabs multiple loads occur.

jquery Easyui Tab Introduction page problem