基于jquery日历价格、库存等设置插件
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>
使用效果图
Options 参数
•el: .Container (必须)，显示日历的容器，jquery选择器均可(#id, [属性], .classs等)。
•startDate: 2017-06-20 (可选)，开始日期。可设置数据的开始日期，该日期以前的月份将不能设置或操作，支持某月2017-06或某天。开始日期开始日期未配置或小于当前系统时间，则开始日期取今日。
•endDate: 2017-09-20 (可选)，结束日期。日历中可设置数据的结束日期，该日期以后的月份将不能显示或操作，同startDate，支持某月(默认去该月最后一天)或某天。若未配置此项，系统默认为1年后的今日，即日期范围为1年。
•data: mockData (可选)，初始时日历上显示的数据，详见使用方法。
•config: array (必须)，与data中的数据参数(属性)对应，该配置里的配置项，即可设置的参数字段，key 为需要设置的字段，name为输入框前面显示的名称。
•show: array (可选)， 日历中需要显示的参数(属性)，与data中的数据参数(属性)对应。key 为需要设置的字段名，name为显示在日历中的名称(简称)。
•callback: function (必须)， 点击确定按钮，返回设置完成的所有数据。
•cancel: function (可选)， 点击取消按钮的回调函数。
•error: function (可选)， 配置或操作中的错误、提示信息等回调函数。
源码地址：https://github.com/capricorncd/calendar-price-jquery
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现购物车计算价格功能的方法
本文实例讲述了jQuery实现购物车计算价格功能的方法.分享给大家供大家参考.具体如下: 目的 实现在html界面修改购物车的件数,购物车商品价格的小计和总计要修改. 实现思路 1.当点击进入界面,刷新的时候触发body内的onload=""方法,跳转到JS代码.这样做的原因是在数据库内我们只会存储某客户的准备购买的商品件数,而不会存储每类商品价格的小计和购物车内所有物品的商品总价格,初始化的目的就是为将这些数字计算出来后显示在前台界面上. 2.当更改数量输入框中每个商品的数量时,整个
-
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
购物车点击可以减少或者添加商品并自动计算价格: 购物车中可能有这样的功能,那就是点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格,下面就通过代码实例介绍一下如何实现此功能,当然下面的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
-
jQuery web 组件 后台日历价格、库存设置的代码
/* * yagizaDate 1.0 * * Yagiza * Copyright 2016, MIT License * * IE 8+, Chrome, fireFox */ // * 字段说明 ******************** // buyNumMax 最多购买数 // buyNumMin 最少购买数 // cashback 返现 // price 售价.分销价.分销售价 // priceSettlement 结算价.采购价.分销结算价 // priceMarket 景区挂牌价
-
jQuery插件slider实现拖动滑块选取价格范围
在一些产品报价网站上,需要给出一系列价格范围供用户筛选,我们在筛选的范围之外再加一个自定义价格范围,这样为用户多提供了一种选择方式.本文将使用jQuery插件结合CSS实现使用滑块滑动的方式选择价格范围,请看本文讲解. jQuery ui 有个slider插件,就是一个非常好使的拖动滑块插件.要想实现滑块拖动,需要在页面head间先载入如下js. <script type="text/javascript" src="js/jquery.js"><
-
基于jquery日历价格、库存等设置插件
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&
-
基于jQuery日历插件制作日历
来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天,需要一个7X6的表格去装载 ·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*) ·加上一些控件让用户可以方便操作吧(比如可以输入年份.月份,可以点击选择年份.月份) 新建一个html文件,html结构: <div class="container"> <input type="text
-
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
插件说明 - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Safari.Opera 等主流浏览器. 使用授权 - jBox 永久免费使用,但是必须保留相关的版权信息.如果有好的建议,可以直接在下面留言. 版本:2.3 大小:19.8k 下载:点击下载 在线demo:http://www.kudystudio.com/jbox/jbox-demo.html [2011-11
-
基于JQuery的6个Tab选项卡插件
顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2
-
multiSteps 基于Jquery的多步骤滑动切换插件
插图:在支持Html5浏览器下观看会有更加体验 其中IE9以下版本使用滤镜模拟了一个阴影,删掉此处内容,IE下运行会更加平滑(至少我的老爷机运行更平滑了.) 第一步插图: 启动函数需要返回值,在这个启动函数里面你可以为所欲为,但是在你坏事做完之后必须返回一个值, 被发现,那你就得停下来等待处理结果,那么就返回false,无法继续执行, 没有被发现那就赶紧的离开这里,返回true,继续执行到下一步! 第二步插图:跳出的提示是第一步执行完毕之后的回调函数 回调函数没有返回值,事实上,执行回调函数的时
-
基于jquery的动态创建表格的插件
废话少说直接进入主题, 表格功能: 1.添加 2.删除 3.获取值 4.动态填充数据 5.动态设置焦点 6.键盘左右上下键控制单元格焦点 7.单元格添加正则验证功能 WebForm4.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %&
-
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
我们使用热门的jquery进行设计,同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料,请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318).下面介绍boxy作为选择器框架的应用. 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业.职位和地区的东西),选择器难点就在于样式调试,主要针对的是IE6.这里介绍行业.职位和地区选择器,下载的Demo包含这三个选择器. 行业选择器:无关联,调用语句为Box
-
基于jquery的一个图片hover的插件
先来看看使用方法. 演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htmHTML文件中这样写: 复制代码 代码如下: <div class="jcutter"> <img src="1.jpg" alt=""> <div class="jcutter-content"> 这是点开后的页面的内容 </div> </div&g
-
基于jQuery的投票系统显示结果插件
首先还是来看一下运行效果如图1所示. 该插件使用步骤 一.引入css文件 首先页面引入css样式文件'votecss.css',他是投票结果正常显示必不可少的.具体代码如下所示: <link href="startpic/votecss.css" rel="stylesheet" type="text/css" /> 二.引入jQuery的就是源文件 该插件是以jQuery为基础的所以引入jQuery插件是必须的具体代码如下: <
-
基于jquery的多功能软键盘插件
支持查询功能的键盘和简单得软键盘,键盘样式完全在独立的css文件中定义,可以自行美化. (支持从查询的软键盘) (简单的软件盘) 插件的默认参数 复制代码 代码如下: jquery.fn.softkeyboard.defaults = { names: { _delbtn: "skbdel", _clearbtn: "skbclear", _querybtn: "skbquery", _closebtn: "skbclose"