Kendo UI ListView Example
Source Code:-
<h2>Kendo ListView demo with source code</h2> <div class="demo-section k-content wide"> <div id="MovieslistView"></div> <div id="listviewpager" class="k-pager-wrap"></div> </div> <script type="text/x-kendo-template" id="template"> <div class="Movies"> <i class="fa fa-camera-retro fa-5x imgccc"></i> <h5>#:title#</h5> <h5>Rank:- #:rank#</h5> <h5>Year:- #:year#</h5> <p>Rating:- #:kendo.toString(rating)#</p> </div> </script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> <script> $(function () { var movies = [{ "rank": 1, "rating": 9.5, "year": 1999, "title": "Inception" }, { "rank": 2, "rating": 9.4, "year": 1982, "title": "The Dark Knight II" }, { "rank": 3, "rating": 9.1, "year": 1964, "title": "The Shawshank Redemption" }, { "rank": 4, "rating": 8.9, "year": 1986, "title": "The Godfather" }, { "rank": 5, "rating": 8.9, "year": 1999, "title": "12 Angry Men" }, { "rank": 6, "rating": 8.5, "year": 2015, "title": "Pulp Fiction" }, { "rank": 7, "rating": 8.2, "year": 2000, "title": "One Flew Over the Cuckoo's Nest" }, { "rank": 8, "rating": 7.8, "year": 2014, "title": "Schindler's List" }, { "rank": 9, "rating": 6.8, "year": 2016, "title": "The Dark Knight" }, { "rank": 10, "rating": 6.5, "year": 2008, "title": "The Godfather: Part II" }]; var dataSource = new kendo.data.DataSource({ data: movies, pageSize: 6 }); $("#listviewpager").kendoPager({ dataSource: dataSource }); $("#MovieslistView").kendoListView({ dataSource: dataSource, template: kendo.template($("#template").html()) }); }); </script> <style> .demo-section { width: 650px; } #MovieslistView { padding: 10px 5px; margin-bottom: -1px; min-height: 210px; } .Movies { border: 1px solid #808080; float: left; position: relative; width: 150px; height: 190px; margin: 5px 5px; padding: 0 25px; } .Movies imgccc { width: 110px; height: 110px; } .Movies h5 { margin: 0; padding: 3px 5px 0 0; overflow: hidden; line-height: 1.1em; font-size: .9em; font-weight: normal; text-transform: uppercase; color: #999; } .Movies p { visibility: hidden; } .Movies:hover p { visibility: visible; position: absolute; width: 110px; height: 80px; top: 0; margin: 0; text-align: center; padding: 0; line-height: 110px; vertical-align: middle; text-align: center; color: #fff; background-color: rgba(0,0,0,0.75); transition: background .2s linear, color .2s linear; -moz-transition: background .2s linear, color .2s linear; -webkit-transition: background .2s linear, color .2s linear; -o-transition: background .2s linear, color .2s linear; } .k-listview:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style>
No comments:
Post a comment