JavaScript Page /Include/jquery.tabSlideOut.v1.3.js (VB.NET)
1: /*
2: tabSlideOUt v1.3
3:
4: By William Paoli: http://wpaoli.building58.com
5:
6: To use you must have an image ready to go as your tab
7: Make sure to pass in at minimum the path to the image and its dimensions:
8:
9: example:
10:
11: $('.slide-out-div').tabSlideOut({
12: tabHandle: '.handle', //class of the element that will be your tab -doesnt have to be an anchor
13: pathToTabImage: 'images/contact_tab.gif', //relative path to the image for the tab
14: imageHeight: '133px', //height of tab image
15: imageWidth: '44px', //width of tab image
16: });
17:
18: or you can leave out these options
19: and set the image properties using css
20:
21: */
22:
23:
24: (function($){
25: $.fn.tabSlideOut = function(callerSettings) {
26: var settings = $.extend({
27: tabHandle: '.handle',
28: speed: 300,
29: action: 'click',
30: tabLocation: 'left',
31: topPos: '200px',
32: leftPos: '20px',
33: fixedPosition: false,
34: positioning: 'absolute',
35: pathToTabImage: null,
36: imageHeight: null,
37: imageWidth: null,
38: onLoadSlideOut: false
39: }, callerSettings||{});
40:
41: settings.tabHandle = $(settings.tabHandle);
42: var obj = this;
43: if (settings.fixedPosition === true) {
44: settings.positioning = 'fixed';
45: } else {
46: settings.positioning = 'absolute';
47: }
48:
49: //ie6 doesn't do well with the fixed option
50: if (document.all && !window.opera && !window.XMLHttpRequest) {
51: settings.positioning = 'absolute';
52: }
53:
54:
55:
56: //set initial tabHandle css
57:
58: if (settings.pathToTabImage != null) {
59: settings.tabHandle.css({
60: 'background' : 'url('+settings.pathToTabImage+') no-repeat',
61: 'width' : settings.imageWidth,
62: 'height': settings.imageHeight
63: });
64: }
65:
66: settings.tabHandle.css({
67: 'display': 'block',
68: 'textIndent' : '-99999px',
69: 'outline' : 'none',
70: 'position' : 'absolute'
71: });
72:
73: obj.css({
74: 'line-height' : '1',
75: 'position' : settings.positioning
76: });
77:
78:
79: var properties = {
80: containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
81: containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
82: tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
83: tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
84: };
85:
86: //set calculated css
87: if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
88: obj.css({'left' : settings.leftPos});
89: settings.tabHandle.css({'right' : 0});
90: }
91:
92: if(settings.tabLocation === 'top') {
93: obj.css({'top' : '-' + properties.containerHeight});
94: settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
95: }
96:
97: if(settings.tabLocation === 'bottom') {
98: obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
99: settings.tabHandle.css({'top' : '-' + properties.tabHeight});
100:
101: }
102:
103: if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
104: obj.css({
105: 'height' : properties.containerHeight,
106: 'top' : settings.topPos
107: });
108:
109: settings.tabHandle.css({'top' : 0});
110: }
111:
112: if(settings.tabLocation === 'left') {
113: obj.css({ 'left': '-' + properties.containerWidth});
114: settings.tabHandle.css({'right' : '-' + properties.tabWidth});
115: }
116:
117: if(settings.tabLocation === 'right') {
118: obj.css({ 'right': '-' + properties.containerWidth});
119: settings.tabHandle.css({'left' : '-' + properties.tabWidth});
120:
121: $('html').css('overflow-x', 'hidden');
122: }
123:
124: //functions for animation events
125:
126: settings.tabHandle.click(function(event){
127: event.preventDefault();
128: });
129:
130: var slideIn = function() {
131:
132: if (settings.tabLocation === 'top') {
133: obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
134: } else if (settings.tabLocation === 'left') {
135: obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
136: } else if (settings.tabLocation === 'right') {
137: obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
138: } else if (settings.tabLocation === 'bottom') {
139: obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
140: }
141:
142: };
143:
144: var slideOut = function() {
145:
146: if (settings.tabLocation == 'top') {
147: obj.animate({top:'-3px'}, settings.speed).addClass('open');
148: } else if (settings.tabLocation == 'left') {
149: obj.animate({left:'-3px'}, settings.speed).addClass('open');
150: } else if (settings.tabLocation == 'right') {
151: obj.animate({right:'-3px'}, settings.speed).addClass('open');
152: } else if (settings.tabLocation == 'bottom') {
153: obj.animate({bottom:'-3px'}, settings.speed).addClass('open');
154: }
155: };
156:
157: var clickScreenToClose = function() {
158: obj.click(function(event){
159: event.stopPropagation();
160: });
161:
162: $(document).click(function(){
163: slideIn();
164: });
165: };
166:
167: var clickAction = function(){
168: settings.tabHandle.click(function(event){
169: if (obj.hasClass('open')) {
170: slideIn();
171: } else {
172: slideOut();
173: }
174: });
175:
176: clickScreenToClose();
177: };
178:
179: var hoverAction = function(){
180: obj.hover(
181: function(){
182: slideOut();
183: },
184:
185: function(){
186: slideIn();
187: });
188:
189: settings.tabHandle.click(function(event){
190: if (obj.hasClass('open')) {
191: slideIn();
192: }
193: });
194: clickScreenToClose();
195:
196: };
197:
198: var slideOutOnLoad = function(){
199: slideIn();
200: setTimeout(slideOut, 500);
201: };
202:
203: //choose which type of action to bind
204: if (settings.action === 'click') {
205: clickAction();
206: }
207:
208: if (settings.action === 'hover') {
209: hoverAction();
210: }
211:
212: if (settings.onLoadSlideOut) {
213: slideOutOnLoad();
214: };
215:
216: };
217: })(jQuery);

.NET Documentation Tool is © 2002 - 2009 Winnersh Triangle Web Solutions Limited.