jQuery设置商品价格库存日历提示插件免费下载

一款非常实用的jQuery设置商品价格库存日历提示插件,可以设置商品每天的价格和库存信息提示,还适应于手机端的交互式日历提醒代码。

JS代码

<script src="dist/js/calendar-price-jquery.min.js"></script> 
<script> 
  $(function () { 
 
    var mockData = [ 
      { 
        date: "2017-11-21", 
        stock: 9000, 
        buyNumMax: 50, 
        buyNumMin: 1, 
        price: "0.12", 
        priceMarket: "100.00", 
        priceSettlement: "90.00", 
        priceRetail: "99.00" 
      },{ 
        date: "2017-12-12", 
        stock: 900, 
        buyNumMax: 50, 
        buyNumMin: 1, 
        price: "12.00", 
        priceMarket: "100.00", 
        priceSettlement: "90.00", 
        priceRetail: "99.00" 
      } 
    ]; 
 
    for (var i = 0; i < 100; i++) { 
      mockData.push({ 
        date: '2018-'+ fd(i%8 + 1) +'-' + fd(randNum(30)), 
        stock: i*21, 
        buyNumMax: "50", 
        buyNumMin: "1", 
        price: randNum(i) + '.00', 
        priceMarket: "100.00", 
        priceSettlement: "90.00", 
        priceRetail: "99.00" 
      }); 
    } 
 
    $.CalendarPrice({ 
      el: '.container', 
//        startDate: '2017-08-02', 
      endDate: '2018-2-20', 
      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('取消设置 ....'); 
        // 取消设置 
        // 这里可以触发关闭设置窗口 
        // ... 
      }, 
      reset: function () { 
        console.log('数据重置成功!'); 
      }, 
      error: function (err) { 
        console.error(err.msg); 
        alert(err.msg); 
      }, 
      // 自定义颜色 
      style: { 
        // 头部背景色 
        headerBgColor: '#098cc2', 
        // 头部文字颜色 
        headerTextColor: '#fff', 
        // 周一至周日背景色,及文字颜色 
        weekBgColor: '#098cc2', 
        weekTextColor: '#fff', 
        // 周末背景色,及文字颜色 
        weekendBgColor: '#098cc2', 
        weekendTextColor: '#fff', 
        // 有效日期颜色 
        validDateTextColor: '#333', 
        validDateBgColor: '#fff', 
        validDateBorderColor: '#eee', 
        // Hover 
        validDateHoverBgColor: '#098cc2', 
        validDateHoverTextColor: '#fff', 
        // 无效日期颜色 
        invalidDateTextColor: '#ccc', 
        invalidDateBgColor: '#fff', 
        invalidDateBorderColor: '#eee', 
        // 底部背景颜色 
        footerBgColor: '#fff', 
        // 重置按钮颜色 
        resetBtnBgColor: '#77c351', 
        resetBtnTextColor: '#fff', 
        resetBtnHoverBgColor: '#55b526', 
        resetBtnHoverTextColor: '#fff', 
        // 确定按钮 
        confirmBtnBgColor: '#098cc2', 
        confirmBtnTextColor: '#fff', 
        confirmBtnHoverBgColor: '#00649a', 
        confirmBtnHoverTextColor: '#fff', 
        // 取消按钮 
        cancelBtnBgColor: '#fff', 
        cancelBtnBorderColor: '#bbb', 
        cancelBtnTextColor: '#999', 
        cancelBtnHoverBgColor: '#fff', 
        cancelBtnHoverBorderColor: '#bbb', 
        cancelBtnHoverTextColor: '#666' 
      } 
      // 点击有效的某一触发的回调函数 
      // 注意:配置了此参数,设置窗口无效,即不能针对日期做参数设置 
      // 返回每天的数据 
//        everyday: function (dayData) { 
//            console.log('点击某日,返回当天的数据'); 
//            console.log(dayData); 
//        }, 
      // 隐藏底部按钮(重置、确定、取消),前台使用该插件时,则需要隐藏底部按钮 
//        hideFooterButton: true 
    }); 
 
  }); 
 
  function randNum(max) { 
    return Math.round(Math.random() * max); 
  } 
 
  function fd(n) { 
    n = n.toString(); 
    return n[1] ? n : '0' + n; 
  } 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录