基于jquery日歷價格、庫存等設置插件

2019-11-19 16:17:42

字體：大中小

來源：轉載

供稿：網友

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

基于jquery的日歷價格、庫存等設置插件。需要設置的參數(字段)需自定義，詳見(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><!-- 日歷顯示的容器 --><div class="container"></div><!-- 引入jQuery.js文件 --><script src="jquery-1.12.4.min.js"></script><!-- 引入日歷價格設置插件js文件 --><script src="../build/calendar-price-jquery.min.js"></script><script>$(function () {  // 以下mockData是模擬JSON數據，一般情況是從后端(服務器端)獲取  // 對象中'date'字段必須，且格式一定要為0000-00-00  // 除'date'以為的字段需自定義，然后必須在config:[]中配置  // 需要在日歷中顯示參數，需在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',    // 設置開始日期    startDate: '2017-08-02',    // 設置日歷顯示結束日期    endDate: '2017-09',    // 初始數據    data: mockData,    // 配置需要設置的字段名稱，請與你傳入的數據對象對應    config: [      {        key: 'buyNumMax',        name: '最多購買數'      },      {        key: 'buyNumMin',        name: '最少購買數'      },      {        key: 'price',        name: '分銷售價'      },      {        key: 'priceMarket',        name: '景區掛牌價'      },      {        key: 'priceSettlement',        name: '分銷結算價'      },      {        key: 'priceRetail',        name: '建議零售價'      },      {        key: 'cashback',        name: '返現'      },      {        key: 'stock',        name: '當天庫存'      }    ],    // 配置在日歷中要顯示的字段    show: [      {        key: 'price',        name: '分:￥'      },      {        key: 'priceSettlement',        name: '采:￥'      },      {        key: 'stock',        name: '庫:'      }    ],    // 點擊'確定'按鈕，返回設置完成的所有數據    callback: function (data) {      console.log('callback ....');      console.log(data);    },    // 點擊'取消'按鈕的回調函數    cancel: function () {      console.log('取消設置 ....');      // 取消設置      // 這里可以觸發關閉設置窗口等操作      // ...    },    // 錯誤等提示信息回調函數    error: function (err) {      console.error(err.msg);    }  });});</script></body></html>

使用效果圖