时间插件和星星评分插件的使用
一、日历插件的运用
在项目开发过程中,难免会遇到需要填写日期(如酒店机票等的预定选购时间),手动输入的方式不仅不美观,用户体验也不是很好,为了改善手动输入的死板,可使用日期插件使用方法如下:
第一步:将日期插件的文件夹下载解压复制到你得项目JS文件目录中
插件下载地址:http://www.my97.net/demo/index.htm
第二步:在页面文档头部引用下载好的时间插件的.js文件,注意地址填写自己的路径。
<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
第三步:在你需要使用的input文本框中,添加onclick,代码如下(可滑动查看):
<!--时间插件部分-->
<div class="shijian">
<form method="" id="from">
<div>
目的地:<input type="text" name="" id="mudi" value="三亚"/>
</div>
<div >
入住时间:
<input type="text" value="" id="ruZhu" class="Wdate" onclick="WdatePicker({doubleCalendar:true,el:this,dateFmt:'yyyy-MM-dd HH:mm:ss',skin:'whyGreen'})" placeholder="2018-10-23"/> 退房时间:
<input type="text" class="Wdate" id="tuiFang" value="" onclick="WdatePicker({doubleCalendar:true,el:this,dateFmt:'yyyy-MM-dd HH:mm:ss',skin:'whyGreen'})" />
</div>
<div class="soushuo">
<button id="btn">搜索></button>
</div>
</form>
</div>
呈现效果:
二,星星评分插件的运用
在酒店和淘宝消费类商品中,经常看到星星评分的使用,
第一步:星星评分的插件的下载,
插件的下载地址:https://github.com/kartik-v/bootstrap-star-rating
第二步: 下载好的插件文件保存在相应的JS 和CSS文件夹中,有时在项目的目录中最好放上font文件,防止星星显示不出来的状况,
第三步:插件的引用步骤,如下代码:
1、 引入bootstrap css库,3.0以上版本才支持
2、效果依托于jQuery库,建议使用1.10.0以上版本
3、引入star-rating自己的css和js文件
注意自己的CSS样式需要在引入的插件的css后面,这样的话,自己的样式效果才可以运用上,
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/star-rating.css" />
<link rel="stylesheet" type="text/css" href="css/01111.css" />
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/star-rating.js" type="text/javascript" charset="utf-8"></script>
</head>
对于星星插件,下载引用后的星星的颜色是其样式中的黄色,有前面的减号图标和后面的文字框,可以自行写样式进行修改,
修改颜色的:
.rating-container .filled-stars{
color: red;
text-shadow: 1px 1px white;
}
修改前面的减号图标和后面的文字框方法;
1、可以在input标签中添加data-show-,代码如下;
<input id="input-21f" value="3" class="rating" min=0 max=5 step=0.5 data-size="xs" data-show-caption="false" data-show-clear="false"/>
2、如运用的是在线版本的话,修改js代码如下:
-->
<!--1.引入样式文件-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet">
<!--2.引入评分插件样式-->
<link rel="stylesheet" href="css/star-rating.min.css" />
<!--3.引入jQuery-->
<script src="lib/jquery-3.3.1.min.js"></script>
<!--4.引入评分插件的js-->
<script src="lib/star-rating.min.js"></script>
</head>
<body>
<input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5 data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">
<br>
<input id="temp1" type="number" class="rating">
<br />
<!--没有清除按钮,没有显示分数按钮-->
<input id="input-id" type="text" class="rating" data-size="lg">
<br />
<input id="input-21a" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xl" >
<br />
<input id="input-21f" value="2" class="rating" min=0 max=5 step=0.5 data-size="xs" >
<script>
jQuery(document).ready(function() {
// $("#input-id").rating({
// min: 0,
// max: 15
// });
$("#input-id").rating('refresh', {
stars: 5,
min: 0,
max: 5,
step: 1,
//设置不显示清除按钮
showClear: false,
// 设置不显示caption
showCaption: false
});
//初始化
// $('#input-21c').rating('update',"5");
$('.rating').on( 'change', function () {
console.log('Rating selected: ' + $(this).val());
});
});
</script>
</body>
</html>
3、找到相应的类名,把其CSS样式更改为display="none”,就好了,
星星插件取消移动上去就触发星星的代码在下载的js中,把其隐藏掉就好了。
界面上星星评分显示的效果如下,点击的话就可以增加星星了:
今日的星星评分插件和日历的插件就如上的使用, 欢迎的借鉴。