时间插件和星星评分插件的使用

一、日历插件的运用

在项目开发过程中，难免会遇到需要填写日期（如酒店机票等的预定选购时间），手动输入的方式不仅不美观，用户体验也不是很好，为了改善手动输入的死板，可使用日期插件使用方法如下：

第一步：将日期插件的文件夹下载解压复制到你得项目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="&#xe005;" 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中，把其隐藏掉就好了。

时间插件和星星评分插件的使用

界面上星星评分显示的效果如下，点击的话就可以增加星星了：

时间插件和星星评分插件的使用

今日的星星评分插件和日历的插件就如上的使用，欢迎的借鉴。

时间插件和星星评分插件的使用

相关推荐