6f5a42b596aa6eba9b9d6a9cbd5408f90d6cae52.svn-base
35.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
/// <reference path="jquery.js"/>
/*
* jerichotab
* version: release-2.0.1 (05/13/2009)
* @ jQuery v1.3.*
*
* Licensed under the GPL:
* http://gplv3.fsf.org
*
* Copyright 2008, 2009 Jericho [ thisnamemeansnothing[at]gmail.com ]
========================================
#example:
========================================
========================================
#API:
#$.fn.initJerichoTab(Function):
*renderTo(String): the tab render to('#sample')
*uniqueId(String): the tab's id(It must be unique)
*tabs(Array): the tabs will be initialized, whose items will be formated as follows:
{
**title(String): the tab title text
**iconImg(String): the tab icon that displayed from title text,
**closeable(Boolean): the switch that controls whether the tab can be closed (true as default)
}
*activeTabIndex(Int): the tab you'd like to select after loading(0 as default)
*contentHeight(Int): height of the content div tag
*contentCss(Object): the same as style sheet
*loadOnce(Boolean): the switch controls if load tab content at the first time(true as default)
*tabWidth(Int): width of each tab(150 as default)
#$.fn.jerichoTab.addTab(Function):
*tabId(String); the unique tab Id(Unused, private)
*tabFirer(JQuery Object): the object that makes tab shown in a special way
*title(String): the tab title text
*data(Object): the tab data to load,including:
**dataType:type of data,
**dataLink:data link
#example(must use as suited):
##formtag:
*dataType:'formtag',
//***use the html tags in this page
*dataLink:'#example'
//***id of the tag you'd like to display in this tab
##iframe:
*dataType:'iframe',
//***use the iframe to load another page
*dataLink:''
//***such as 'iframetemplates/iframe.htm'
//***the relative url of the page you'd like to display in this tab,
//***and jerichoTab will use an iframe to load it
###html:
*dataType:'html',
//*** load data from html url
*dataLink:''
// *** the relative url of your html page
##ajax:
*dataType:'ajax',
//***use ajax to load data with asynchronous operations
*dataLink:''
//*** yes,u can write down your ajax handler url and then jerichotab'll make a callback,
//*** so the responseText will be displayed in the content holder(u can use html tags in your server callback datas)
*onLoadCompleted(Function): fired after the data has been loaded
*iconImg(String): the tab icon that displayed below title text(relative to...),
*closeable(Boolean): set whether the tab can be closed(true as default)
========================================
*/
//; (function($) {
$.extend($.fn, {
initJerichoTab: function(setting) {
var opts = $.fn.extend({
//the container of jerichotab(is required, a jQuery format selector String as '.container' or '#container')
renderTo: null,
//the unique id of jerichotab(is required and unique, not null)
uniqueId: null,
//format your tab data like this: [{title:'',iconImg:'',closeable:true},{title:'',iconImg:'',closeable:true}]
//it's an Array...
tabs: [],
//when the jerichotab has been loaded, the tab you'ld like to display first(start at 0, and 0 as default)
activeTabIndex: 0,
//the style sheet of tab content
contentCss: {
'height': '500px'
},
//if you set this property as true, the data'll be loaded only at the first time when users click the tab
//in other times jerichotab only swich it's css(display property) from 'none' to 'block'
loadOnce: true,
//the tab width (150 as default)
tabWidth: 110,
//set an ajaxload effect, jerichotab has provided two choices: 'usebg' | 'righttag'
//'usebg': control if set a big loading gif in the contentholder
//'righttag': this will set a small loading gif in the right top of contentholder
loader: 'righttag',
//两边滑块宽度
slidersWidth: 19,
//标题高度
titleHeight: 26
}, setting);
//initialize the jerichotab
function createJerichoTab() {
//make sure that a container and uniqueId were provided
if (opts.renderTo == null) { alert('you must set the \'renderTo\' property\r\t--JeirchoTab'); return; }
if (opts.uniqueId == null) { alert('you must set the \'uniqueId\' property\r\t--JeirchoTab'); return; }
if ($('#' + opts.uniqueId).length > 0) { alert('you must set the \'uniqueId\' property as unique\r\t--JeirchoTab'); return; }
//the jerichotab html tree:
/* <div class="jericho_tab">
<div class="tab_pages" >
<div class="tabs">
<ul /> ###tabpages here
</div>
</div>
<div class="tab_content">
<div id="jerichotab_contentholder" class="content" /> ###tabcontents here
</div>
</div>
*/
var jerichotab = $('<div id="'+opts.uniqueId+'" class="jericho_tab"><div class="tab_pages" ><div class="tabs"><ul /></div></div><div class="tab_content"><div id="jerichotab_contentholder" class="content" /></div></div>')
.appendTo($(opts.renderTo));
//apply contentcss to the contentholder
$('.tab_content>.content', jerichotab).css(opts.contentCss);
//fill data
$.fn.jerichoTab = {
master: jerichotab,
tabWidth: opts.tabWidth,
tabPageWidth: $('.tab_pages', jerichotab).width(),
slidersWidth: opts.slidersWidth,
loader: opts.loader,
loadOnce: opts.loadOnce,
tabpage: $('.tab_pages>.tabs>ul', jerichotab),
addTab: function(tabsetting) {
//set as the unique tab id and tabFirer tag
tagGuid = (typeof tagGuid == 'undefined' ? 0 : tagGuid + 1);
var curIndex = tagGuid;
//this function will be open to all users for them to add tab at any time
var ps = $.fn.extend({
//if there is a DOM that cause the tab to be added to tabpages,
//you should pass it to jerichotab, in which way tab'll only be activated when
//user click the DOM next time
tabFirer: null,
title: '新增页签'+(curIndex+1),
//the dataType and dataLink were suited as:
//1.formtag:
// dataType:'formtag',
// --use the html tags in this page
// dataLink:'#example'
// --id of the tag you'ld like to display in this tab
//2.iframe:
// dataType:'iframe',
// --use the iframe to load another page
// dataLink:''
// --such as 'iframetemplates/iframe.htm', set
// --the relative url of the page u'ld like to display in this tab,
// --and jerichoTab will use an iframe to load it
//3.html:
// dataType:'html',
// --load html tags from a url
// dataLink:''
// --the relative url of your html page
//4.ajax:
// dataType:'ajax',
// --use the ajax to load datas with asynchronous operations
// dataLink:''
// --yes,u can write down your ajax handler url and jerichotab'll make a callback,
// --so the responseText will be displayed in the content holder(u can use html tags in your server callback datas)
data: { dataType: '', dataLink: '' },
//set the tab icon of each(relative to...)
iconImg: '',
//whether this tab can be closed(ture as default)
closeable: true,
//this function will be fired after all data has been loaded
onLoadCompleted: null,
// the tab's name
name:''
}, tabsetting);
//window.console && console.log('%o', tabsetting);
//check whether the tabFirer exists or not, and that it has an attribute['jerichotabindex'], then set the tab that tabFirer was connected activated
//otherwise attach the jerichotabindex' attribute
if (ps.tabFirer != null) {
var jerichotabindex = ps.tabFirer.attr('jerichotabindex');
if (typeof jerichotabindex != 'undefined' && $('#jerichotab_' + jerichotabindex).length > 0)
return $.fn.setTabActive(jerichotabindex).adaptSlider().loadData();
ps.tabFirer.attr('jerichotabindex', curIndex);
}
// set name
if(ps.name == ''){
ps.name = ps.title;
}
//newTab html tree:
/*
<li>
<div class="tab_left" >
<div class="tab_icon" />
<div class="tab_text" >JerichoTab</div>
<div class="tab_close">
<a href="javascript:void(0)" title="Close"> </a>
</div>
</div>
<div class="tab_right"> </div>
</li>
*/
/*var newTab = $('<li class="jericho_tabs tab_selected" style="width:0px" id="jerichotab_' + curIndex + '" dataType="' + ps.data.dataType + '" dataLink="' + ps.data.dataLink + '">' +
'<div class="tab_left" style="width:' + (opts.tabWidth - 5) + 'px" >' +
(ps.iconImg == '' ? '' : '<div class="tab_icon" style="' + 'background-image:url(' + ps.iconImg + ')' + '"> </div>') +
'<div class="tab_text" title="' + ps.title + '" style="width:' + (opts.tabWidth - 45 + (ps.iconImg == '' ? 25 : 0)) + 'px" >' + ps.title.cut(opts.tabWidth / 10 - 1) + '</div> ' +
'<div class="tab_close">' + (ps.closeable ? '<a href="javascript:" title="关闭"> </a>' : '') + '</div>' +
'</div>' +
'<div class="tab_right"> </div>' +
'</li>')*/
var newTab = $('<li name="'+ps.name+'" class="jericho_tabs tab_selected" style="width:0px" id="jerichotab_' + curIndex + '" dataType="' + ps.data.dataType + '" dataLink="' + ps.data.dataLink + '">' +
'<div class="tab_left" style="width:' + (opts.tabWidth - 5) + 'px" >' +
(ps.iconImg == '' ? '' : '<div class="tab_icon" style="' + 'background-image:url(' + ps.iconImg + ')' + '"> </div>') +
'<div class="tab_text" title="' + ps.title + '" style="width:' + (opts.tabWidth - 45 + (ps.iconImg == '' ? 25 : 0)) + 'px" >' + ps.title.cut(opts.tabWidth / 10 - 1) + '</div> ' +
'<div class="tab_close">' + (ps.closeable ? '<a href="javascript:" title="关闭"> </a>' : '') + '</div>' +
'</div>' +
'<div class="tab_right"> </div>' +
'</li>').appendTo($.fn.jerichoTab.tabpage).css('opacity', '0').applyHover()
.applyCloseEvent().animate({ 'opacity': '1', width: opts.tabWidth }, 100, function() {
$.fn.setTabActive(curIndex);
});
//use an Array named "tabHash" to restore the tab information
tabHash = (typeof tabHash == 'undefined' ? [] : tabHash);
tabHash.push({
index: curIndex,
tabFirer: ps.tabFirer,
tabId: 'jerichotab_' + curIndex,
holderId: 'jerichotabholder_' + curIndex,
iframeId: 'jerichotabiframe_' + curIndex,
onCompleted: ps.onLoadCompleted
});
return newTab.applySlider();
},
closeCurrentTab: function(tabsetting) {
$('.tab_selected .tab_close>a').click();
/*var ps = $.fn.extend({
name:'',
activeTabName:'',
isReaload: false
}, tabsetting);
$.fn.jerichoTab.tabpage.children('li[name='+ps.name+']').remove();
var isLoad = 0;
if(ps.activeTabName != ''){
var lis = $.fn.jerichoTab.tabpage.children('li');
for(var i=0;i<lis.size();i++){
if(lis.eq(i).attr('name')==ps.activeTabName){
$.fn.setTabActive(i).loadData(ps.isReaload);
isLoad = 1;
break;
}
}
}
if(isLoad==0){
$.fn.setTabActive(0).loadData(ps.isReaload);
}*/
},
};
$.each(opts.tabs, function(i, n) {
$.fn.jerichoTab.addTab(n);
});
try{
if (tabHash.length == 0)
jerichotab.css({ 'display': 'none' });
}catch(e){ }
}
createJerichoTab();
$.fn.setTabActive(opts.activeTabIndex).loadData();
$.fn.jerichoTab.resize = function() {
$.fn.jerichoTab.tabPageWidth = $(".tab_pages", $.fn.jerichoTab.master).width() - (($(".jericho_slider").length > 0) ? ($.fn.jerichoTab.slidersWidth * 2) : 0);
$(".tabs", $.fn.jerichoTab.master).width($.fn.jerichoTab.tabPageWidth).applySlider().adaptSlider();
var fixHeight = -2;
//if (Metronic.isIE8()){
// fixHeight = 25;
//}
$('#jerichotab_contentholder').height($(opts.renderTo).height() - opts.titleHeight - 5 - fixHeight);
$(".jericho_tab iframe").height($(".jericho_tab").parent().height() - opts.titleHeight - fixHeight);
};
$(window).resize(function() {
$.fn.jerichoTab.resize();
})
//window.console && console.log('width :' + $.fn.jerichoTab.tabpage.width());
},
//activate the tag(orderkey is the tab order, start at 1)
setTabActiveByOrder: function(orderKey) {
var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
if (lastTab.length > 0) lastTab.swapTabEnable();
return $('#jericho_tabs').filter(':nth-child(' + orderKey + ')').swapTabEnable();
},
//activate the tag(orderKey is the tagGuid of each tab)
setTabActive: function(orderKey) {
var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
if (lastTab.length > 0) lastTab.swapTabEnable();
return $('#jerichotab_' + orderKey).swapTabEnable();
},
addEvent: function(e, h) {
var target = this.get(0);
if (target.addEventListener) {
target.addEventListener(e, h, false);
} else if (target.attachEvent) {
target.attachEvent('on' + e, h);
}
},
//create an iframe in the contentholder to load pages
buildIFrame: function(src) {
return this.each(function() {
var onComleted = null, jerichotabiframe = '';
for (var tab in tabHash) {
if (tabHash[tab].holderId == $(this).attr('id')) {
onComleted = tabHash[tab].onCompleted;
jerichotabiframe = tabHash[tab].iframeId;
break;
}
}
src += (src.indexOf('?') == -1 ? '?' : '&') + 'tabPageId=' + jerichotabiframe;
var iframe = $('<iframe id="' + jerichotabiframe + '" name="' + jerichotabiframe + '" src="' + src + '" frameborder="0" scrolling="auto" />')
.css({ width: '100%', height: $(this).parent().height(), border: 0 }).appendTo($(this));
//add a listener to the load event
$('#' + jerichotabiframe).addEvent('load', function() {
//if onComlete(Function) is not null, then release it
!!onComleted ? onComleted(arguments[1]) : true;
$.fn.removeLoader();
});
});
},
//load data from dataLink
//use the following function after each tab was activated
loadData: function(flag) {
return this.each(function() {
$('.jericho_tab .tab_selected').css('background-color', $('body').css('background-color'));
//show ajaxloader first
$('#jerichotab_contentholder').showLoader();
var onComleted = null, holderId = '', tabId = '';
//search information in tabHash
for (var tab in tabHash) {
if (tabHash[tab].tabId == $(this).attr('id')) {
onComleted = tabHash[tab].onCompleted;
holderId = '#' + tabHash[tab].holderId;
tabId = '#' + tabHash[tab].tabId;
break;
}
}
var dataType = $(this).attr('dataType');
var dataLink = $(this).attr('dataLink');
//if dataType was undefined, nothing will be done
if (typeof dataType == 'undefined' || dataType == '' || dataType == 'undefined') { removeLoading(); return; }
//hide the rest contentholders
$('#jerichotab_contentholder').children('div[class=curholder]').attr('class', 'holder').css({ 'display': 'none' });
var holder = $(holderId);
if (holder.length == 0) {
//if contentholder DOM hasn't been created, create it immediately
holder = $('<div class="curholder" id="' + holderId.replace('#', '') + '" />').appendTo($('#jerichotab_contentholder'));
//load data into holder
load(holder);
}
else {
holder.attr('class', 'curholder').css({ 'display': 'block' });
if ($.fn.jerichoTab.loadOnce && !flag){
removeLoading();
} else {
holder.html('');
load(holder);
}
}
function load(c) {
switch (dataType) {
case 'formtag':
//clone html DOM elements in the page
$(dataLink).css('display', 'none');
var clone = $(dataLink).clone(true).appendTo(c).css('display', 'block');
removeLoading(holder);
break;
case 'html':
//load HTML from page
holder.load(dataLink + '?t=' + Math.floor(Math.random()), function() {
removeLoading(holder);
});
break;
case 'iframe':
//use iframe to load a website
holder.buildIFrame(dataLink, holder);
break;
case 'ajax':
//load a remote page using an HTTP request
$.ajax({
url: dataLink,
data: { t: Math.floor(Math.random()) },
error: function(r) {
holder.html('数据加载失败！');
removeLoading(holder);
},
success: function(r) {
holder.html(r);
removeLoading(holder);
}
});
break;
}
}
function removeLoading(h) {
!!onComleted ? onComleted(h) : true;
$.fn.removeLoader();
}
});
},
//attach the slider event to every tab,
//so users can slide the tabs when there are too much tabs
attachSliderEvent: function() {
return this.each(function() {
var me = this;
$(me).hover(function() {
$(me).swapClass('jericho_slider' + $(me).attr('pos') + '_enable', 'jericho_slider' + $(me).attr('pos') + '_hover');
}, function() {
$(me).swapClass('jericho_slider' + $(me).attr('pos') + '_hover', 'jericho_slider' + $(me).attr('pos') + '_enable');
}).mouseup(function() {
//filter the sliders in order to prevent users from sliding`
if ($(me).is('[slide=no]')) return;
//get the css(left) of tabpage(ul elements)
var offLeft = parseInt($.fn.jerichoTab.tabpage.css('left'));
//the max css(left) of tabpage
var maxLeft = tabHash.length * $.fn.jerichoTab.tabWidth - $.fn.jerichoTab.tabPageWidth + ($.fn.jerichoTab.slidersWidth * 2);
switch ($(me).attr('pos')) {
case 'left':
//slide to the left side
if (offLeft + $.fn.jerichoTab.tabWidth < 0)
$.fn.jerichoTab.tabpage.animate({ left: offLeft + $.fn.jerichoTab.tabWidth }, 100);
else
$.fn.jerichoTab.tabpage.animate({ left: 0 }, 100, function() {
$(me).attr({ 'slide': 'no', 'class': 'jericho_sliders jericho_sliderleft_disable' });
});
$('.jericho_sliders[pos=right]').attr({ 'slide': 'yes', 'class': 'jericho_sliders jericho_sliderright_enable' });
break;
case 'right':
//slide to the right side
if (offLeft - $.fn.jerichoTab.tabWidth > -maxLeft)
$.fn.jerichoTab.tabpage.animate({ left: offLeft - $.fn.jerichoTab.tabWidth }, 100);
else
$.fn.jerichoTab.tabpage.animate({ left: -maxLeft }, 100, function() {
$(me).attr({ 'slide': 'no', 'class': 'jericho_sliders jericho_sliderright_disable' });
});
$('.jericho_sliders[pos=left]').attr({ 'slide': 'yes', 'class': 'jericho_sliders jericho_sliderleft_enable' });
break;
}
});
});
},
//create or activate the slider to tabpage
applySlider: function() {
return this.each(function() {
if (typeof tabHash == 'undefined' || tabHash.length == 0) return;
//get the offwidth of tabpage
var offWidth = tabHash.length * $.fn.jerichoTab.tabWidth - $.fn.jerichoTab.tabPageWidth + ($.fn.jerichoTab.slidersWidth * 2);
if (tabHash.length > 0 && offWidth > 0) {
//make sure that the parent Div of tabpage was fixed(position:relative)
//so jerichotab can control the display position of tabpage by using 'left'
$.fn.jerichoTab.tabpage.parent().css({ width: $.fn.jerichoTab.tabPageWidth - ($.fn.jerichoTab.slidersWidth * 2) });
//auto grow the tabpage(ul) width and reset 'left'
$.fn.jerichoTab.tabpage.css({ width: offWidth + $.fn.jerichoTab.tabPageWidth - ($.fn.jerichoTab.slidersWidth * 2) })
.animate({ left: -offWidth }, 0, function() {
//append 'jerichosliders' to the tabpageholder if 'jerichoslider' has't been added
if ($('.jericho_sliders').length <= 0) {
var s = 'onclick="if(document.selection && document.selection.empty) {document.selection.empty();}else if(window.getSelection) {var sel = window.getSelection();sel.removeAllRanges();}"';
$.fn.jerichoTab.tabpage.parent()
.before($('<div class="jericho_sliders jericho_sliderleft_enable" slide="yes" pos="left" '+s+'></div>'));
$.fn.jerichoTab.tabpage.parent()
.after($('<div class="jericho_sliders jericho_sliderright_disable" pos="right" slide="yes" '+s+'></div>'));
$('.jericho_sliders').attachSliderEvent();
}
//$('.jericho_sliders').adaptSlider();
});
}
else if (tabHash.length > 0 && offWidth <= 0) {
//remove 'jerichosliders' whether the tabs were not go beyond the capacity of tabpageholder
$('.jericho_sliders').remove();
$.fn.jerichoTab.tabpage.parent().css({ width: $.fn.jerichoTab.tabPageWidth });
$.fn.jerichoTab.tabpage.css({ width: -offWidth + $.fn.jerichoTab.tabPageWidth })
.animate({ left: 0 }, 0);
}
});
},
//make sure that the slider will be adjusted quickly to the tabpage after tab 'clicking' or tab 'initializing'
adaptSlider: function() {
return this.each(function() {
if ($('.jericho_sliders').length > 0) {
var offLeft = parseInt($.fn.jerichoTab.tabpage.css('left'));
var curtag = '#', index = 0;
for (var t in tabHash) {
if (tabHash[t].tabId == $(this).attr('id')) {
curtag += tabHash[t].tabId;
index = parseInt(t);
break;
}
}
//set the tabpage width
var tabWidth = $.fn.jerichoTab.tabPageWidth - ($.fn.jerichoTab.slidersWidth * 2);
//calculate the distance from the left side of tabpage
var space_l = $.fn.jerichoTab.tabWidth * index + offLeft;
//calculate the distance from the right side of tabpage
var space_r = $.fn.jerichoTab.tabWidth * (index + 1) + offLeft;
//window.console && console.log(space_l + '||' + space_r);
function setSlider(pos, enable) {
$('.jericho_sliders[pos=' + pos + ']').attr({ 'slide': (enable ? 'yes' : 'no'), 'class': 'jericho_sliders jericho_slider' + pos + '_' + (enable ? 'enable' : 'disable') });
}
//slider to right to check whether it's a tab nearby left slider
if ((space_l < 0 && space_l > -$.fn.jerichoTab.tabWidth) && (space_r > 0 && space_r < $.fn.jerichoTab.tabWidth)) {
//left
$.fn.jerichoTab.tabpage.animate({ left: -$.fn.jerichoTab.tabWidth * index }, 0, function() {
if (index == 0) setSlider('left', false);
else setSlider('left', true);
setSlider('right', true);
});
}
//slider to left to check whether it's a tab nearby right slider
if ((space_l < tabWidth && space_l > tabWidth - $.fn.jerichoTab.tabWidth) && (space_r > tabWidth && space_r < tabWidth + $.fn.jerichoTab.tabWidth)) {
//right
$.fn.jerichoTab.tabpage.animate({ left: -$.fn.jerichoTab.tabWidth * (index + 1) + tabWidth }, 0, function() {
if (index == tabHash.length - 1) setSlider('right', false);
else setSlider('left', true);
setSlider('left', true);
});
}
}
});
},
//apply event to the close anchor
applyCloseEvent: function() {
return this.each(function() {
var me = this;
$('.tab_close>a', this).click(function(e) {
//prevents further propagation of the current event.
e.stopPropagation();
if ($(this).length == 0) return;
//remove tab from tabpageholder
$(me).animate({ 'opacity': '0', width: '0px' }, 100, function() {
//make the previous tab selected whether the removed tab was selected
var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
if (lastTab.attr('id') == $(this).attr('id')) {
if($(this).prev().text() != ''){
$(this).prev().swapTabEnable().loadData();
}else{
$(this).next().swapTabEnable().loadData();
}
}
//clear the information of the removed tab from tabHash
for (var t in tabHash) {
if (tabHash[t].tabId == $(me).attr('id')) {
if (tabHash[t].tabFirer != null)
tabHash[t].tabFirer.removeAttr('jerichotabindex');
tabHash.splice(t, 1);
}
}
//adapt slider
$(me).applySlider().remove();
//remove contentholder
$('#jerichotabholder_' + $(me).attr('id').replace('jerichotab_', '')).remove();
})
});
$(this).RightMenu('jerichotabmenu',{menuList:[
{menuName:"刷新当前",clickEvent:"$('.tab_selected').loadData(true);"},
{menuName:"关闭其它",clickEvent:"$('.tab_unselect .tab_close>a').click();"
+"setTimeout('$.fn.jerichoTab.resize();setTimeout(\\\'$.fn.jerichoTab.resize();"
+"setTimeout(\\\\\\'$.fn.jerichoTab.resize();\\\\\\',1000);\\\',500);',500);"}
]});
});
},
//apply the "hover" effect and "onSelect" event
applyHover: function() {
return this.each(function() {
$(this).hover(function() {
if ($(this).hasClass('tab_unselect')) $(this).addClass('tab_unselect_h');
}, function() {
if ($(this).hasClass('tab_unselect_h')) $(this).removeClass('tab_unselect_h');
}).mouseup(function() {
if ($(this).hasClass('tab_selected')) return;
//select this tab and hide the last selected tab
var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
lastTab.attr('class', 'jericho_tabs tab_unselect');
$('#jerichotabholder_' + lastTab.attr('id').replace('jerichotab_', '')).css({ 'display': 'none' });
$(this).attr('class', 'jericho_tabs tab_selected').loadData().adaptSlider();
});
});
},
//switch the tab between the selected mode and the unselected mode, or v.v...
swapTabEnable: function() {
return this.each(function() {
if ($(this).hasClass('tab_selected'))
$(this).swapClass('tab_selected', 'tab_unselect');
else if ($(this).hasClass('tab_unselect'))
$(this).swapClass('tab_unselect', 'tab_selected');
});
},
//change class from css1 to css2 of DOM
swapClass: function(css1, css2) {
return this.each(function() {
$(this).removeClass(css1).addClass(css2);
})
},
//if it takes a long time to load the data, show a loader to ui
showLoader: function() {
return this.each(function() {
switch ($.fn.jerichoTab.loader) {
case 'usebg':
//add a circular loading gif picture to the background of contentholder
$(this).addClass('loading');
break;
case 'righttag':
//add a small loading gif picture and a banner to the right top corner of contentholder
if ($('#jerichotab_contentholder>.righttag').length == 0)
$('<div class="righttag">正在加载...</div>').appendTo($(this));
else
$('#jerichotab_contentholder>.righttag').css({ display: 'block' });
break;
}
});
},
//remove the loader
removeLoader: function() {
switch ($.fn.jerichoTab.loader) {
case 'usebg':
$('#jerichotab_contentholder').removeClass('loading');
break;
case 'righttag':
$('#jerichotab_contentholder>.righttag').css({ display: 'none' });
break;
}
}
});
//})(jQuery);
String.prototype.cut = function(len) {
var position = 0;
var result = [];
var tale = '';
for (var i = 0; i < this.length; i++) {
if (position >= len) {
tale = '...';
break;
}
if (this.charCodeAt(i) > 255) {
position += 2;
result.push(this.substr(i, 1));
}
else {
position++;
result.push(this.substr(i, 1));
}
}
return result.join("") + tale;
}
/*
* 右键菜单，示例：$(this).RightMenu('myMenu2',{menuList:[{menuName:"菜单1",menuclass:"1",clickEvent:"divClick(1)"}]});
*/
$(function(){
document.oncontextmenu=function(){return false;}//屏蔽右键
document.onmousemove=mouseMove;//记录鼠标位置
});
var mx=0,my=0;
function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;}
function mouseCoords(ev){
if(ev.pageX||ev.pageY){return{x:ev.pageX,y:ev.pageY};}
return{x:ev.clientX,y:ev.clientY+$(document).scrollTop()};
}
$.fn.extend({RightMenu: function(id,options){
options = $.extend({menuList:[]},options);
var menuCount=options.menuList.length;
if (!$("#"+id)[0]){
var divMenuList="<div id=\""+id+"\" class=\"div_RightMenu\"><div><ul class='ico'>";
for(var i=0;i<menuCount;i++){
divMenuList+="<li class=\""+options.menuList[i].menuclass+"\" onclick=\""+options.menuList[i].clickEvent+"\">"+options.menuList[i].menuName+"</li>";
}
divMenuList += "</ul></div><div>";
$("body").append(divMenuList).find("#"+id).hide().find("li")
.bind("mouseover",function(){$(this).addClass("RM_mouseover");})
.bind("mouseout",function(){$(this).removeClass("RM_mouseover");});
$(document).click(function(){$("#"+id).hide();});
}
return this.each(function(){
this.oncontextmenu=function(){
var mw=$('body').width(),mhh=$('html').height(),mbh=$('body').height(),
w=$('#'+id).width(),h=$('#'+id).height(),
mh=(mhh>mbh)?mhh:mbh;//最大高度 比较html与body的高度
if(mh<h+my){my=mh-h;}//超 高
if(mw<w+mx){mx=mw-w;}//超 宽
$("#"+id).hide().css({top:my,left:mx}).show();
$.fn.jerichoTab.resize(); // 修正弹出菜单时tab滚动被挤下去的问题
}
});
}});