Kendo UI for jQuery最新版下載
在本教程中，我們將使用HTML、CSS、jQuery和Kendo UI提供的一些組件來構(gòu)建電商APP。在本教程中，我們將構(gòu)建電子商務(wù)應(yīng)用程序的基本版本。
從頭開始構(gòu)建組件有時(shí)會(huì)非常耗時(shí)，為了方便的處理應(yīng)用程序，我們將使用Kendo UI組件，這將節(jié)省大量時(shí)間。
Kendo UI是由Progress的Telerik團(tuán)隊(duì)開發(fā)的JavaScript庫，它能幫助您快速構(gòu)建Web應(yīng)用程序的UI。Kendo UI的核心庫提供了一系列易于使用的UI組件，例如網(wǎng)格、文本框、數(shù)字文本框、圖表等，Kendo UI提供了流行的JavaScript庫（如jQuery，Angular，React和Vue）的組件。
先決條件
要構(gòu)建此應(yīng)用程序，請(qǐng)使用以下一些工具：
初始化應(yīng)用程序
雖然開發(fā)功能齊全/可擴(kuò)展的電子商務(wù)應(yīng)用程序可能會(huì)很麻煩，但是實(shí)現(xiàn)基本版本很容易創(chuàng)建，我們將使用HTML/CSS, jQuery和Kendo UI創(chuàng)建一個(gè)應(yīng)用。
創(chuàng)建一個(gè)名為marketplace的文件夾，并在其中定義此文件夾結(jié)構(gòu)：
marketplace/
css/
styles.css
js/
items.js
functions.js
index.html
對(duì)于我們的應(yīng)用程序，將使用一種非常簡(jiǎn)單的方法：
-
定義一個(gè)css文件夾來保存樣式表。
-
定義一個(gè)保存jQuery函數(shù)的js和一個(gè)包含市場(chǎng)商品的item.js文件。
-
最后在文件夾的底部創(chuàng)建一個(gè)index.html文件，以用作應(yīng)用程序的入口點(diǎn)。
首先準(zhǔn)備index.html文件來接收和顯示內(nèi)容，在索引文件中，輸入以下代碼行：
<!-- ./index.html -->
<html>
<head>
<title>Awesome Market</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href=" //stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<main>
<header>
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">MarketPlace</a>
<div id="cart-container">
<div id="cart">
<i class="fa fa-shopping-cart openCloseCart" style="margin-right: 10px;" aria-hidden="true">cart</i>
<i class="fas fa-trash-alt" id="emptyCart">Empty cart</i> </div>
<span id="itemCount"></span>
</div>
</nav>
</header>
<div id="shoppingCart">
<div id="cartItemsContainer">
<h2>Items in your cart</h2>
<i class="fa fa-times-circle-o fa-3x openCloseCart" aria-hidden="true"></i>
<div id="cartItems"></div>
<span id="cartTotal"></span>
</div>
</div>
<div id="products" class="row"> </div>
</main>
<script src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script src="js/functions.js"></script>
</body>
</html>
-
通過CDN導(dǎo)入所有相關(guān)資源，資源包括jQuery、Bootstrap和fontawesome，以及自定義樣式表。
-
定義將顯示項(xiàng)目的區(qū)域。
-
標(biāo)題包含當(dāng)前購(gòu)物車項(xiàng)目和一個(gè)用于清空?qǐng)D表的按鈕。
-
定義div在每次查看時(shí)保存圖表項(xiàng)。
-
div為空，將自動(dòng)從jQuery函數(shù)動(dòng)態(tài)注入產(chǎn)品。
-
導(dǎo)入jQuery和自定義js文件
到目前為止，我們已經(jīng)定義了一個(gè)樣式表和一個(gè)包含空內(nèi)容的函數(shù)文件，繼續(xù)填充它們。
打開您的CSS文件并添加文件，并向其中添加以下代碼：
// css/styles.css
main {
padding: 10px 0;
width: 1024px;
margin: 0 auto;
}
#cart-container {
float: right;
width: 210px;
position: relative;
}
#itemCount {
position: absolute;
display: none;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
color: white;
text-align: center;
}
nav {
margin-bottom: 30px;
nav ul {
list-style: none;
overflow: auto;
width: 100%;
background: #444444;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li:hover {
color: #444444;
background: #cccccc;
}
nav ul li:hover a {
color: #444444;
}
img {
width: 100%;
}
.item {
width: 31%;
float: left;
margin: 1%;
}
.itemText p {
margin-bottom: 20px;
}
.price-container {
margin-top: 20px;
}
i:hover {
cursor: pointer;
}
#shoppingCart {
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
position: absolute;
z-index: 9999;
background: rgba(0, 0, 0, 0.6);
}
#cartItemsContainer {
position: relative;
width: 600px;
left: 50%;
top: 150px;
margin-left: -300px;
padding: 40px;
box-shadow: 0 0 10px black;
background: #e9e9e9;
overflow: auto;
}
#cartItemsContainer i {
position: absolute;
top: 20px;
right: 20px;
}
#cartItemsContainer .itemDetails {
overflow: auto;
width: 100%;
margin-bottom: 40px;
}
#emptyCart {
display: none;
}
#cartItemsContainer .itemImage {
float: left;
width: 260px;
padding: 0 40px;
}
#cartItemsContainer .itemText {
float: right;
width: 260px;
padding: 0 40px;
}
#cartItemsContainer .itemText .price-container {
margin-top: 0;
}
.removeItem {
margin-left: 40px;
}
.col-sm-4 {
margin-bottom: 15px;
}
現(xiàn)在，用產(chǎn)品填充items.js文件，向其添加以下代碼：
// js/items.js
[
{
"name": "Berries",
"price": 23.54,
"image": "http://images.unsplash.com/photo-1488900128323-21503983a07e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Sweet popsicles to help with the heat"
},
{
"name": "Orange",
"price": 10.33,
"image": "http://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=340&w=340&q=80",
"description": "Mouth watering burger. Who cares if it's healthy"
},
{
"name": "Lemons",
"price": 12.13,
"image": "http://images.unsplash.com/photo-1504382262782-5b4ece78642b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Sumptuous egg sandwich"
},
{
"name": "Bananas",
"price": 10.33,
"image": "http://images.unsplash.com/photo-1478369402113-1fd53f17e8b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "A great tower of pancakes. Dig in!"
},
{
"name": "Apples",
"price": 10.33,
"image": "http://images.unsplash.com/photo-1505253304499-671c55fb57fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Great looking Waffle to start the day"
},
{
"name": "Sharifa",
"price": 10.33,
"image": "http://images.unsplash.com/photo-1470119693884-47d3a1d1f180?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80",
"description": "What's greater than 5 minutes with grilled corn"
}
]
現(xiàn)在打開您的functions.js文件，并向其中添加以下代碼：
// js/functions.js
function init(){
// read our array of products and display it
$.getJSON( "js/items.js", function( json ) {
json.forEach(function (item) {
$("#products").append('<div class="col-sm-4"><div class="card">' +
'<img class="card-img-top" src="' + item.image + '">' +
'<div class="card-body">' +
'<h5 class="card-title">' + item.name + '</h5>' +
'<p class="card-text price">' + "Price: $" + item.price + '</p>' +
'<p class="card-text price">' + item.description + '</p>' +
'<a href="#" id="showPopupNotification" class="add btn btn-primary">Add to cart</a>' +
'</div>' +
'</div></div>');
});
});
}
$(init);
使用jQuery：
-
從items.js文件中讀取內(nèi)容
-
構(gòu)建產(chǎn)品DOM元素
-
附加并顯示在index.html文件中
現(xiàn)在，當(dāng)您嘗試加載index.html時(shí)，將看到一個(gè)空白屏幕。 那是因?yàn)闉g覽器由于訪問控制源而無法讀取JSON文件。為了解決這個(gè)問題，需要使用http服務(wù)器來加載文件。
首先通過在終端中輸入以下命令來安裝http-server：
npm install -g http-server
安裝后，您就可以在系統(tǒng)中的任何地方使用http服務(wù)器，現(xiàn)在在終端中輸入以下內(nèi)容來提供文件：
http-server -c-1
現(xiàn)在，當(dāng)您在瀏覽器中訪問http：// localhost：8080時(shí)，您將看到以下內(nèi)容：
這意味著已經(jīng)能夠閱讀和顯示產(chǎn)品及其信息，接下來，我們需要編寫函數(shù)來處理從購(gòu)物車中添加和刪除商品的操作。
打開functions.js并添加以下代碼：
// js/functions.js
function init(){
var itemCount = 0;
var priceTotal = 0;
// other code stays same
// Add Item to Cart
$('.add').click(function (){
itemCount ++;
$('#itemCount').text(itemCount).css('display', 'block');
$(this).siblings().clone().appendTo('#cartItems').append('<button class="removeItem">Remove Item</button>');
// Calculate Total Price
var price = parseInt($(this).siblings().find('.price').text());
priceTotal += price;
$('#cartTotal').text("Total: $" + priceTotal);
});
// Hide and Show Cart Items
$('.openCloseCart').click(function(){
$('#shoppingCart').toggle();
});
// Empty Cart
$('#emptyCart').click(function() {
itemCount = 0;
priceTotal = 0;
$('#itemCount').css('display', 'none');
$('#cartItems').text('');
$('#cartTotal').text("Total: $" + priceTotal);
});
// Remove Item From Cart
$('#shoppingCart').on('click', '.removeItem', function(){
$(this).parent().remove();
itemCount --;
$('#itemCount').text(itemCount);
// Remove Cost of Deleted Item from Total Price
var price = parseInt($(this).siblings().find('.price').text());
priceTotal -= price;
$('#cartTotal').text("Total: €" + priceTotal);
if (itemCount == 0) {
$('#itemCount').css('display', 'none');
}
});
}
$(init);
在這里，我們定義了應(yīng)用程序所需的功能。
-
使用Click方法，我們將特定元素作為目標(biāo)，并根據(jù)所單擊的按鈕來更新它們的狀態(tài)
-
當(dāng)用戶添加、刪除、清空或查看當(dāng)前購(gòu)物車時(shí)，狀態(tài)會(huì)更改
-
最后，一旦文件加載到索引頁上，我們就使用jQuery的$調(diào)用init函數(shù)來初始化文件
至此，我們有了一個(gè)電子商務(wù)應(yīng)用程序的工作版本，通過Kendo UI添加另一項(xiàng)功能。
使用Kendo UI添加空購(gòu)物車按鈕
您可能已經(jīng)注意到，當(dāng)加載頁面時(shí)，沒有顯示空購(gòu)物車。 這是因為我們最初將其設(shè)置為從CSS根本不顯示。 在本節(jié)中我們將：
-
使用Kendo UI按鈕組件顯示和設(shè)置按鈕樣式
-
僅在購(gòu)物車中至少有一件商品后才顯示按鈕
我們需要先將Kendo UI導(dǎo)入到項(xiàng)目中，然后才能訪問按鈕組件。
打開index.html文件，并向其中添加以下代碼行：
// ./index.html
<head>
//import kendoui through the cdn in your header
<link rel="stylesheet" >
<link rel="stylesheet" >
<link rel="stylesheet" >
<link rel="stylesheet" >
<script src="http://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"> </script>
</head>
在此文件中，我們僅通過CDN導(dǎo)入Kendo UI。
現(xiàn)在在js文件中初始化函數(shù)，打開functions.js文件，并將以下代碼添加到其中：
// js/functions.js
// add inside init function
$("#emptyCart").kendoButton();
//insert code in bold into this function
$(document).on("click", ".add", function (){
// new code
$('#emptyCart').css('display', 'inline');
//other code stays same
這里我們做兩件事：
現(xiàn)在，重新啟動(dòng)服務(wù)器，并在瀏覽器中訪問http：// localhost：8080。 將商品添加到購(gòu)物車后，您將看到按鈕顯示。
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自：慧都網(wǎng)
半島外圍網(wǎng)上直營(yíng) 
21次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線