jquery日歷價(jià)格、庫(kù)存等插件設(shè)置實(shí)例

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:07:11

jquery日歷價(jià)格、庫(kù)存等插件設(shè)置實(shí)例

jquery日歷價(jià)格、庫(kù)存等插件設(shè)置實(shí)例:本文主要介紹了基于jquery日歷價(jià)格、庫(kù)存等設(shè)置插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。Commodity calendar, price, inventory and other settings of jQuery plug-in基于jquery的日歷價(jià)格、庫(kù)存等

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀jquery日歷價(jià)格、庫(kù)存等插件設(shè)置實(shí)例:本文主要介紹了基于jquery日歷價(jià)格、庫(kù)存等設(shè)置插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。Commodity calendar, price, inventory and other settings of jQuery plug-in基于jquery的日歷價(jià)格、庫(kù)存等

本文主要介紹了基于jquery日歷價(jià)格、庫(kù)存等設(shè)置插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。

Commodity calendar, price, inventory and other settings of jQuery plug-in

基于jquery的日歷價(jià)格、庫(kù)存等設(shè)置插件。需要設(shè)置的參數(shù)(字段)需自定義，詳見(jiàn)(demo)使用方法…

源碼地址：https://github.com/capricorncd/calendar-price-jquery

Create by capricorncd / 2017-06-11

使用方法

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Capricorncd Calendar-Price-jQuery</title>
 <!-- 引入日歷樣式文件 -->
 <link rel="stylesheet" href="../build/calendar-price-jquery.css" rel="external nofollow" >
</head>
<body>

<!-- 日歷顯示的容器 -->
<p class="container"></p>

<!-- 引入jQuery.js文件 -->
<script src="jquery-1.12.4.min.js"></script>
<!-- 引入日歷價(jià)格設(shè)置插件js文件 -->
<script src="../build/calendar-price-jquery.min.js"></script>
<script>
$(function () {

 // 以下mockData是模擬JSON數(shù)據(jù)，一般情況是從后端(服務(wù)器端)獲取
 // 對(duì)象中'date'字段必須，且格式一定要為0000-00-00
 // 除'date'以為的字段需自定義，然后必須在config:[]中配置
 // 需要在日歷中顯示參數(shù)，需在show:[]中配置
 var mockData = [
 {
 date: "2017-06-21",
 stock: "9000",
 buyNumMax: "50",
 buyNumMin: "1",
 price: "0.12",
 priceMarket: "100.00",
 priceSettlement: "90.00",
 priceRetail: "99.00"
 },{
 date: "2017-07-12",
 stock: "9000",
 buyNumMax: "50",
 buyNumMin: "1",
 price: "12.00",
 priceMarket: "100.00",
 priceSettlement: "90.00",
 priceRetail: "99.00"
 }
 ];

 // 插件使用
 $.CalendarPrice({
 // 顯示日歷的容器
 el: '.container',
 // 設(shè)置開(kāi)始日期
 startDate: '2017-08-02',
 // 設(shè)置日歷顯示結(jié)束日期
 endDate: '2017-09',
 // 初始數(shù)據(jù)
 data: mockData,
 // 配置需要設(shè)置的字段名稱，請(qǐng)與你傳入的數(shù)據(jù)對(duì)象對(duì)應(yīng)
 config: [
 {
 key: 'buyNumMax',
 name: '最多購(gòu)買(mǎi)數(shù)'
 },
 {
 key: 'buyNumMin',
 name: '最少購(gòu)買(mǎi)數(shù)'
 },
 {
 key: 'price',
 name: '分銷售價(jià)'
 },
 {
 key: 'priceMarket',
 name: '景區(qū)掛牌價(jià)'
 },
 {
 key: 'priceSettlement',
 name: '分銷結(jié)算價(jià)'
 },
 {
 key: 'priceRetail',
 name: '建議零售價(jià)'
 },
 {
 key: 'cashback',
 name: '返現(xiàn)'
 },
 {
 key: 'stock',
 name: '當(dāng)天庫(kù)存'
 }
 ],
 // 配置在日歷中要顯示的字段
 show: [
 {
 key: 'price',
 name: '分:￥'
 },
 {
 key: 'priceSettlement',
 name: '采:￥'
 },
 {
 key: 'stock',
 name: '庫(kù):'
 }
 ],
 // 點(diǎn)擊'確定'按鈕，返回設(shè)置完成的所有數(shù)據(jù)
 callback: function (data) {
 console.log('callback ....');
 console.log(data);
 },
 // 點(diǎn)擊'取消'按鈕的回調(diào)函數(shù)
 cancel: function () {
 console.log('取消設(shè)置 ....');
 // 取消設(shè)置
 // 這里可以觸發(fā)關(guān)閉設(shè)置窗口等操作
 // ...
 },
 // 錯(cuò)誤等提示信息回調(diào)函數(shù)
 error: function (err) {
 console.error(err.msg);
 }
 });

});

</script>

</body>
</html>

使用效果圖

Options 參數(shù)

?el: .Container (必須)，顯示日歷的容器，jquery選擇器均可(#id, [屬性], .classs等)。

?startDate: 2017-06-20 (可選)，開(kāi)始日期?？稍O(shè)置數(shù)據(jù)的開(kāi)始日期，該日期以前的月份將不能設(shè)置或操作，支持某月2017-06或某天。開(kāi)始日期開(kāi)始日期未配置或小于當(dāng)前系統(tǒng)時(shí)間，則開(kāi)始日期取今日。

?endDate: 2017-09-20 (可選)，結(jié)束日期。日歷中可設(shè)置數(shù)據(jù)的結(jié)束日期，該日期以后的月份將不能顯示或操作，同startDate，支持某月(默認(rèn)去該月最后一天)或某天。若未配置此項(xiàng)，系統(tǒng)默認(rèn)為1年后的今日，即日期范圍為1年。

?data: mockData (可選)，初始時(shí)日歷上顯示的數(shù)據(jù)，詳見(jiàn)使用方法。

?config: array (必須)，與data中的數(shù)據(jù)參數(shù)(屬性)對(duì)應(yīng)，該配置里的配置項(xiàng)，即可設(shè)置的參數(shù)字段，key 為需要設(shè)置的字段，name為輸入框前面顯示的名稱。

?show: array (可選)，日歷中需要顯示的參數(shù)(屬性)，與data中的數(shù)據(jù)參數(shù)(屬性)對(duì)應(yīng)。key 為需要設(shè)置的字段名，name為顯示在日歷中的名稱(簡(jiǎn)稱)。

?callback: function (必須)，點(diǎn)擊確定按鈕，返回設(shè)置完成的所有數(shù)據(jù)。

?cancel: function (可選)，點(diǎn)擊取消按鈕的回調(diào)函數(shù)。

?error: function (可選)，配置或操作中的錯(cuò)誤、提示信息等回調(diào)函數(shù)。

源碼地址：https://github.com/capricorncd/calendar-price-jquery

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com