Skip to content

Commit a6d3c81

Browse files
mesuttalebimesuttalebi
committed
Add Lazyload for modals, renamed script and added min file.
1 parent 8719147 commit a6d3c81

File tree

5 files changed

+232
-123
lines changed

5 files changed

+232
-123
lines changed

‎README.md‎

Lines changed: 101 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,101 @@
1-
# MT.BootstrapTabsLazyloader.js
2-
Lazy Loader For Bootstrap Tabs
3-
4-
This package adds lazyloading option to bootstrap tabs, so every tab's content will load when the user clicks it.
5-
6-
7-
#How To Use
8-
##Install
9-
10-
If you use nuget package manager, write down this command in nuget package manager console
11-
12-
<code>Install-Package MT.BootstrapTabsLazyLoader.js</code>
13-
14-
This packages also depends on: <br />
15-
Jquery >=2.0.0<br />
16-
Bootstrap >=3.0.0<br />
17-
FontAwsome >=4.2.0<br />
18-
19-
If you don't use nuget package manager, just download source code, and copy MT.BootstrapTabsLazyLoader.js into your scripts folder.
20-
21-
22-
##Using
23-
1- Add a reference to **/Scripts/MT.BootstrapTabsLazyLoader.js** to the scripts part of your code, after **jquery.js** and **bootstrap.js**
24-
25-
2- add class **.lazyload** to nav-tabs (bootstrap tabs ul tag)
26-
27-
3- add **data-url** to the **anchor** tag of every tab you want to lazyload. this attribute will contain the url of partial pages you want to load it into the tab. The data-callback attribute can be used to specify a javascript function to be called once the load is done (on the .done() event of the $.get)
28-
**Example**
29-
30-
31-
<!-- Nav tabs -->
32-
<ul class="nav nav-tabs lazyload">
33-
<li class="active"><a href="#fullDesc" data-toggle="tab">Description</a></li>
34-
<li><a href="#specificationDetails" data-toggle="tab">Specifications</a></li>
35-
<li><a href="#relatedProducts" data-toggle="tab" data-url="@Url.Action("relatedproducts", new { model.product.id})">Related Products</a></li>
36-
<li><a href="#files" data-toggle="tab" data-url="@Url.Action("getproductfiles", new { model.product.id })" data-callback="initProducts()">Product Files</a></li>
37-
<li><a href="#videos" data-toggle="tab" data-url="@Url.Action("getproductvideos", new { model.product.id })">Product Videos</a></li>
38-
</ul>
39-
40-
4- If you are lazy loading your initial tab, you can add a trigger('shown.bs.tab') on your initial tab.
41-
42-
**MVC Example on the same page as your tabs**
43-
```
44-
@section scripts {
45-
<script type="text/javascript">
46-
$(document).ready(function () {
47-
$('.nav-tabs a[href="#fullDesc"]').trigger('shown.bs.tab');
48-
});
49-
</script>
50-
}
51-
```
1+
# MT.BootstrapLazyloader.js
2+
Lazy Loader For Bootstrap Tabs, Pills and Modals
3+
4+
This package adds lazyloading option to bootstrap tabs, pills and modals so contents will load when the user clicks it.
5+
6+
7+
#How To Use
8+
##Install
9+
10+
If you use nuget package manager, write down this command in nuget package manager console
11+
12+
<code>Install-Package MT.BootstrapTabsLazyLoader.js</code>
13+
14+
This packages also depends on: <br />
15+
Jquery >=2.0.0<br />
16+
Bootstrap >=3.0.0<br />
17+
FontAwsome >=4.2.0<br />
18+
19+
If you don't use nuget package manager, just download source code, and copy MT.BootstrapTabsLazyLoader.js into your scripts folder.
20+
21+
22+
##Using
23+
24+
Add a reference to **/Scripts/MT.BootstrapLazyLoader.js** to the scripts part of your code, after **jquery.js** and **bootstrap.js**
25+
26+
**A) Tabs**
27+
28+
A1)- For Using MT.BootstrapLazyloader with tabs, add **.lazyload** class to nav-tabs (bootstrap tabs ul tag)
29+
30+
A2)- add **data-url** to the **anchor** tag of every tab you want to lazyload. this attribute will contain the url of partial pages you want to load it into the tab.
31+
32+
**B) Pills**
33+
34+
B1) For Using MT.BootstrapLazyloader with pills, add **.lazyload** class to nav-pills (bootstrap pills ul tag)
35+
36+
B2) add **data-url** to the **anchor** tag of every tab you want to lazyload. this attribute will contain the url of partial pages you want to load it into the tab.
37+
38+
**C) Modal**
39+
40+
C1) For Using MT.BoostrapLazyloader with modals, add **.lazyload** and **.showModal** classes to the element that will show modal when clicked.
41+
42+
C2) add **data-header** to define the Modal's Header.
43+
44+
C3) add **data-size** to define the Modal's size. (Example: data-size="modal-lg", don't set it you want default size.)
45+
46+
**Note: Modal's Markup will automatically append to body, and you don't need to add Modal's markup to body manually.**
47+
48+
**Callback function after Ajax Loaded**
49+
50+
The **data-callback** attribute can be used to specify a javascript function to be called once the load is done (on the .done() event of the $.get)
51+
52+
53+
**Example 1**
54+
55+
*applied for nav-tabs and nav-pills*
56+
57+
58+
<!-- Nav tabs -->
59+
<ul class="nav nav-tabs lazyload">
60+
<li class="active"><a href="#fullDesc" data-toggle="tab">Description</a></li>
61+
<li><a href="#specificationDetails" data-toggle="tab">Specifications</a></li>
62+
<li><a href="#relatedProducts" data-toggle="tab" data-url="@Url.Action("relatedproducts", new { Model.Product.Id})">Related Products</a></li>
63+
<li><a href="#files" data-toggle="tab" data-url="@Url.Action("getproductfiles", new { Model.product.Id })" data-callback="initProducts()">Product Files</a></li>
64+
<li><a href="#videos" data-toggle="tab" data-url="@Url.Action("getproductvideos", new { Model.product.Id })">Product Videos</a></li>
65+
</ul>
66+
67+
68+
note: If you are lazy loading your initial tab, you can add a trigger('shown.bs.tab') on your initial tab.
69+
70+
**MVC Example on the same page as your tabs**
71+
```
72+
@section scripts {
73+
<script type="text/javascript">
74+
$(document).ready(function () {
75+
$('.nav-tabs a[href="#fullDesc"]').trigger('shown.bs.tab');
76+
});
77+
</script>
78+
}
79+
```
80+
81+
82+
**Example 2**
83+
84+
```
85+
<button class="lazyload showModal" data-url="@Url.Action("PreviewProduct", new {id=Model.product.Id})"
86+
data-header="Preview Product" data-size="modal-lg" data-callback="initProducts()">Preview</button>
87+
```
88+
89+
*The Returned Partial View Content:*
90+
91+
```
92+
<div class="modal-body">
93+
<!--Contents goes here-->
94+
95+
<div class="modal-footer">
96+
<!--footer buttons goes here-->
97+
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
98+
<button type="submit" class="btn btn-primary">Save changes</button>
99+
</div>
100+
</div>
101+
```

‎Scripts/MT.BootstrapLazyloader.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/*
2+
Nuget Package: MT.BootstrapLazyLoader.js
3+
Version: 1.2.0
4+
5+
Created By: Mesut Talebi (mesut.talebi@gmail.com)
6+
7+
Adds Lazy loading feature to bootstrap tabs, pills and modals
8+
9+
Thanks To ChrisDerrig: Added lazy loading feature to bootstrap pills and callback that is loaded on ajax get done.
10+
11+
*/
12+
13+
14+
$(function () {
15+
$(document).on('shown.bs.tab', '.nav-tabs.lazyload a[data-toggle="tab"]:not(.loaded)', function (e) {
16+
var loader = '<div class="text-center"><i class="fa fa-spin fa-spinner fa-2x text-muted"></i></div>';
17+
18+
var pane = $(e.target).attr('href');
19+
20+
var url = $(e.target).data('url');
21+
22+
var callback = $(e.target).data('callback');
23+
24+
if (url) {
25+
$(pane).html(loader);
26+
27+
var caller = $(this);
28+
$.get(url, function (data) {
29+
$(pane).html(data);
30+
$(caller).addClass('loaded');
31+
})
32+
.fail(function () {
33+
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
34+
$(pane).html(alertDiv);
35+
})
36+
.done(function () {
37+
if (callback) {
38+
eval(callback);
39+
}
40+
});
41+
}
42+
});
43+
44+
$(document).on('shown.bs.tab', '.nav-pills.lazyload a[data-toggle="pill"]:not(.loaded)', function (e) {
45+
var loader = '<div class="text-center"><i class="fa fa-spin fa-spinner fa-2x text-muted"></i></div>';
46+
47+
var pane = $(e.target).attr('href');
48+
49+
var url = $(e.target).data('url');
50+
51+
var callback = $(e.target).data('callback');
52+
53+
if (url) {
54+
$(pane).html(loader);
55+
56+
var caller = $(this);
57+
$.get(url, function (data) {
58+
$(pane).html(data);
59+
$(caller).addClass('loaded');
60+
})
61+
.fail(function () {
62+
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
63+
$(pane).html(alertDiv);
64+
})
65+
.done(function () {
66+
if (callback) {
67+
eval(callback);
68+
}
69+
});
70+
}
71+
});
72+
73+
$(document).on('click', '.lazyload.showModal', function (e) {
74+
var loader = '<i class="fa fa-spin fa-spinner fa-2x text-info modal-loader"></i>';
75+
var currHandle = $(this);
76+
var modalHtml = "<!--Lazyloaded Modal -->" +
77+
"<div class='modal fade' id='LazyloadModal' role='dialog' aria-labelledby='LazyloadModal'>" +
78+
"<div class='modal-dialog' role='document'>" +
79+
"<div class='modal-content'>" +
80+
"<div class='modal-header'>" +
81+
"<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
82+
"<h4 class='modal-title' id='LazyloadModalLabel'>Modal Header</h4>" +
83+
"</div>" +
84+
"<div id='LazyloadModalContent'></div>" +
85+
"</div>" +
86+
"</div>" +
87+
"</div>";
88+
89+
var url = $(currHandle).data('url');
90+
var modalHeader = $(currHandle).data('header');
91+
var modalClass = $(currHandle).data('size');
92+
var callback = $(currHandle).data('callback');
93+
94+
var modal = $('#LazyloadModal');
95+
if (modal.length == 0) {
96+
$('body').append(modalHtml);
97+
98+
modal = $('#LazyloadModal');
99+
}
100+
101+
$(modal).find('.modal-header #LazyloadModalLabel').html(modalHeader);
102+
$(modal).find('.modal-dialog').addClass(modalClass);
103+
104+
//Ajax Get
105+
$(modal).find('#LazyloadModalContent').html('');
106+
$(currHandle).append(loader);
107+
$.get(url, function (data) {
108+
$(modal).find('#LazyloadModalContent').html(data);
109+
$(modal).modal('show');
110+
}).fail(function () {
111+
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
112+
$(modal).find('#LazyloadModalContent').html(alertDiv);
113+
$(modal).modal('show');
114+
}).done(function () {
115+
if (callback) {
116+
eval(callback);
117+
}
118+
}).always(function () {
119+
$(currHandle).find('.modal-loader').remove();
120+
});
121+
});
122+
});

‎Scripts/MT.BootstrapLazyloader.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Scripts/MT.BootstrapTabsLazyloader.js‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎bundleconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[
2+
{
3+
"outputFileName": "Scripts/MT.BootstrapLazyloader.js",
4+
"inputFiles": [
5+
"Scripts/MT.BootstrapLazyloader.js"
6+
]
7+
}
8+
]

0 commit comments

Comments
 (0)