jquery_raty
jquery_raty
chenyansong22 发表于2年前
jquery_raty
  • 发表于 2年前
  • 阅读 18
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: jquery_raty


1  简单的demo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Expires" content="-1"/>
		<title>jQuery Raty - A Star Rating Plugin</title>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.raty.js"></script>
		
	</head>
	<body>
		
		<div id="fixed"></div>
	</body>
	
	<script type="text/javascript">
		$(function() { 

			$('#fixed').raty({
				readOnly:	true,
				start:		3.5,
				showHalf:  true,
		   });

		}); 

	</script>
</html>

2 各种example

参见:http://testweb3.iecworld.com/jsdemo/js/lq_js_point/

3 自动生成任意的评价项

   

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Expires" content="-1"/>
		<title>jQuery Raty - A Star Rating Plugin</title>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.raty.js"></script>
		
	</head>
	<body>
		
		<div id='content'>
			<!--这里添加的是自动生成的评价项-->
		</div>
	</body>
	
	<script type="text/javascript">
		$(function() { 
			var arr=[3,2,4,5];//从数据库查询到的评分项
			var arrid=['a','b','c'];//为每个评分项设置ID
			var str ="";

			//添加div
			for(var i=0;i<arr.length;i++){
				str+="<div id='"+arrid[i]+"'></div>";
			}
			$('#content').html(str);

			//初始化raty
			for(var i=0;i<arr.length;i++){
				$("#"+arrid[i]).raty({
					start: arr[i],
				});	
			}

		}); 

	</script>
</html>



4 和dataTable的结合(回显)

 
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/portal/itsm/common/header.jsp"%>
<%@ include file="/portal/itsm/common/jsp/findselect.jsp"%>
<%@taglib uri="/itsm.tld" prefix="itsm"%>
<%@ page import="java.util.*"%>
<%@ page import="com.xuanyuan.itsm.demo.entity.ItsmDemo"%>
<%@ page import="com.xuanyuan.bpaf.common.config.URMSConfig"%>
<%
		String appType = request.getParameter("appType");
		String typeId = request.getParameter("typeId");
%>
<!DOCTYPE HTML>
<html>
	<head>
		<title><%=URMSConfig.getConfigValue("SYS_TITLE")%></title>

		<link href="<%=path%>/style/css/xuanyuanui.css" rel="stylesheet"
			type="text/css" />
		<link href="<%=path%>/style/css/data-grid.css" rel="stylesheet"
			type="text/css" />
		<link href="<%=path%>/style/css/bootstrapValidator.min.css"
			rel="stylesheet" type="text/css" />
		<link href="<%=path%>/style/css/datetimepicker.css" rel="stylesheet" type="text/css" />


		<!-- 弹出框 -->
		<script type="text/javascript" src="<%=path%>/style/js/bootbox.min.js"></script>
	</head>


	<!-- Override feedback icon position -->

	<body>
		<div class="col-xs-12 col-sm-12 col-md-12 xuanyuan-col-12">
			<!-- 菜单导航标签
			<itsm:itsm_menunav menuCode="<%=appType %>" /> -->

			<div class="panel panel-default xuanyuan-table">
				<div class="panel-heading">
					<div class="row">
						<h3 class="panel-title col-xs-7">
							<span class="glyphicon glyphicon-th-list"></span>事件列表
						</h3>

						<div class="col-xs-5 text-right xuanyuan-panel-btn">


						</div>
					</div>
				</div>
				<div class="panel-body">
				<form novalidate="novalidate" class="form-horizontal bv-form"
							role="form" name="all" id="search_all">
					<div class="row">
						<div class="col-sm-3 col-md-3">
								<div class="form-group">
									<label class="col-xs-3 col-sm-3 control-label">
										开始时间
									</label>
									<div class="col-xs-9 col-sm-9">
									<input readonly type=text class="form-control" name="createdate" id="createdate_start" />
									</div>
								</div>
							</div>
							<!--/col-md-4-->
							<!--/col-md-4-->
							<div class="col-sm-3 col-md-3">
								<div class="form-group">
									<label class="col-xs-3 col-sm-3 control-label">
										结束时间
									</label>
									<div class="col-xs-9 col-sm-9">
									<input readonly type=text class="form-control" name="createdate" id="createdate_end" />
									</div>
								</div>
							</div>
						<div class="col-xs-6 col-sm-6">
    							<div class="col-xs-9 col-sm-9 pull-left" style="padding-left: 0px;">
									<div class="input-group">
										<input id="likevalue" class="form-control" value="" type="text" placeholder="搜索标题">
										<div class="input-group-btn">
											<select id="first-disabled" data-width="auto"  class="selectpicker  form-control"  data-live-search="true">
											    <optgroup id="selectpicker_0" label="是否已评价">
											    	<option value="">所有</option>
											      	<option value="0">否</option>
													<option value="1">是</option>
											    </optgroup>
											 </select>
											<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" onclick="ev_search1();" type="button" style="width:40px;">
												<span class="glyphicon glyphicon-search" style="height: 20px;padding-top:3px;"></span>
											</button>
										</div>
									</div>
								</div>
						</div>


						</form>
					</div>
					<!--/row-->
				</div>
				<table class="table  table-hover dataTable"
					id="tb_itsmdemo" style="">

				</table>

			</div>


			<!--模态框用于显示数据 -->
			<div class="modal fade in modal-scroll" id="mod_DemoForm"
				tabindex="-1" role="basic" aria-hidden="true" data-width="600"
				style="background-color: #fff; width: 700px; height: 450px; left: 10%; top: 60px;">
				<p></p>
				<p></p>
				<p></p>
				<center>
					正在加载数据。。。
				</center>
			</div>
		</div>
		<script src="<%=path%>/style/js/jquery.dataTables.js"
			type="text/javascript"></script>
		<script src="<%=path%>/style/js/dataTables.bootstrap.js"
			type="text/javascript"></script>

		<script src="<%=path%>/style/js/bootstrapValidator.js"
			type="text/javascript"></script>


		<script src="<%=path%>/style/js/commonForm.js" type="text/javascript"></script>
		<script src="<%=path%>/style/js/date/datetimepicker.min.js" type="text/javascript"></script>
		<script src="<%=path%>/style/js/date/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript" src="<%=path%>/style/js/jquery.raty.js"></script>
	</body>
	<script>

		jQuery(document).ready(function() {
			$('#createdate_end').datetimepicker({
		         format:'yyyy-MM-dd hh:ii:ss',//日期 格式 yyyy-MM-dd(默认),yyyy-MM-dd hh:mi,yyyy-MM-dd hh:ii:ss,yyyy-MM
				 minView:0, //0-4 日期选择出现的选择页面对应startview的值

		     })
		     $('#createdate_start').datetimepicker({
		         format:'yyyy-MM-dd hh:ii:ss',//日期 格式 yyyy-MM-dd(默认),yyyy-MM-dd hh:mi,yyyy-MM-dd hh:ii:ss,yyyy-MM
				 minView:0, //0-4 日期选择出现的选择页面对应startview的值

		     })

			 	$("#mod_DemoForm").on("hide.bs.modal", function(){//每次打开模态框前清除里面数据

	  						  $(this).removeData("bs.modal");
							});
			  $('#search_ItsmDemo').bootstrapValidator({

		        fields: {
		        	'userName': {
	                message: '用户名验证失败',
	                validators: {

	                    stringLength: {
	                        min: 0,
	                        max: 30,
	                        message: '用户名长度在6-30个字符之间!'
	                    },
	                    regexp: {
	                        regexp: /^[a-zA-Z0-9_\.]+$/,
	                        message: '用户名只能是拼音字母、数字或下划线组成'
	                    }

	                }
	            },
		            'mobile': {
		                validators: {
		                    digits: {
		                        message: '只能填写数字!'
		                    },
		                    stringLength: {
		                        min: 0,
		                        max: 11,
		                        message: '长度在8-11之间'
		                    }

		                }
		            }


		        }
				  });

		  var tb_itsmdemo= $('#tb_itsmdemo').dataTable( {
    			"processing": true,
   				 "serverSide": true,
				 bAutoWidth:false,//固定列宽则设在为false,默认true
				 bSort:false,//默认true 排序
				  "bLengthChange":true,//下拉分页框
				  "aLengthMenu":[[10,20, 50, 100, "-1"],
				                 [10,20, 50, 100, "全部"]
					             ],
   				 "ajax": {
				 	 async:false,
   		            "url": "<%=baseURL%>/incidents/itsmIncidentSatisfactionListBySql.action",
   		            "type": "POST",
   		        	 "data": function ( d ) {
	    				//d.evaluate= $('#evaluate').val();
	    				//时间段
						d.createdate_start=$("#createdate_start").val(),
	 					d.createdate_end=$("#createdate_end").val(),

	    				d.evaluate = $("#selectpicker_0 option:selected").eq(0).val();
	    				d.likevalue = $('#likevalue').val();
     		       	}
   		        },
               "iDisplayLength":10,//每页显示行数,不设置默认为10,

   		        "columns": [
		            {title:'', "data": null,//放在第一列用于隐藏排序时第一列自带的小图标
		           visible:false
		           },

                    {title:'序号', "data": null,width:'60',"bSortable": false },//显示行号
   		            {title:'编号', "data": "incident_id" ,width:'150',render:function(data,tpye,row){
						var rid =  '"'+row.incident_id+'"';
						var new_title = data;
						return "<a style='cursor: pointer;' onclick='view("+rid+")' title='查看'>"+new_title+"</a>";
						}},//显示行号
   		             {title:'标题', "data": "title",width:'150',render:function(data,tpye,row){
						var rid =  '"'+row.incident_id+'"';
						var new_title = data.substr(0, 30);
						return "<a style='cursor: pointer;' onclick='view("+rid+")' title='查看'>"+new_title+"</a>";
						}
					},

		   			{title:' 服务目录', "data": "svc_name",render:function(data,tpye,row){
						if(data==null){
				       return "";
				       }else{
				       return data;
				       }
						} },//显示行号
						{title:"评价结果", "data": "ppg",render:function(data,tpye,row){
								if(data!=undefined&&data!=""){
							       return "<div id='"+row.incident_id+"'></div> "; 	 //raty 生成的固定格式 ,一定要有一个div
								}else{
									return "未评价";
								}

						   }  },

				   {title:"提交时间","data": "evaludatetime","bSortable": true,render:function(data,tpye,row){
						   console.log(data);
						if(data!=undefined&&data!=""){
						    return toFullDate(data);//显示所有时间用 toFullDate 只显示日期toOnlyDate
						}else{
						    return "未评价";
						}
			}
		   },{title: "操作","data": "evaluate","bSortable": false,render:function(data,tpye,row){
	           		var rid = row.incident_id;
		           		var url_add = '"<%=baseURL%>/itsmsatisfactionrec/add.action?app_id='+rid+'"';
		           		var url_view = '"/itsmsatisfactionrec/view.action?app_id='+rid+'"';
                	if(row.type_name=="已关闭"){
                		if(row.evaluate == '1'){
                			var itsmSatisfactionUrl = '"<%=baseURL%>/incidents/getIncidentSatisfactionDiv.action?incidentid='+rid+'&bootStrap=2"';
                    		return "<a onclick='viewContent("+itsmSatisfactionUrl+");'><span class='badge' style='font-size:14px;background-color: #5CB85C; border-color: #5CB85C;'>查看详情</span></a>"
                		}else{
                			return "<a onclick='viewContent("+url_add+");'><span class='badge' style='font-size:14px;background-color: #F0AD4E; border-color: #F0AD4E;' >添加评价</span></a>"
                		}

                	}else{
                 		return "";
                 	}
            }}
   		        ] ,
   		     "createdRow": function ( row, data, index ) {//将序号赋值给第二列
				 $('td', row).eq(0).html((this.dataTableSettings[0]._iDisplayStart+index+1));//eq(1)指每行第二列
				 console.log(data.ppg);
				 $('td>div',row).eq(0).raty({ //创建完一行之后就拿到tr下有div的cell 然后初始化raty ,具体的写初始化的方式参看:E:\java学习笔记\jquery插件\raty星级评价\index.html      页面
					  readOnly:  true,
					  start:  data.ppg,
					  path:  '../style/img/',  //\portal\itsm\style\img\star-half.png
					  showHalf:  true,
					});

    		      },
   		     "drawCallback": function( settings ) {
		          if(settings.iDraw>1){
		        	 parent.reSetFrameSize("frmmain");
		          }
        		}


				 } );


		 });
		function view(id){
         var url='<%=baseURL%>/incidents/views.action?id='+id+'&satisfaction=true';
         window.open(url,"","left=150,top=100,height=610,width=1000,status=no,toolbar=no,menubar=no,location=no,resizable=no,resizable=yes,scrollbars=yes");

        }

		//查看详情
		function viewContent(url){
			ev_openMod(url,700,400,"");
		}

        document.onkeydown=keyDownSearch;
	    function keyDownSearch(e) {
	        // 兼容FF和IE和Opera
	        var theEvent = e || window.event;
	        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;

	        if (code == 13) {
	            ev_search1();
	            return false;
	        }
	        return true;
	    }
	     function ev_search1(){
	            var tb_itsmdemo=$('#tb_itsmdemo').dataTable();
		        if(tb_itsmdemo!=undefined){
		    	   tb_itsmdemo.fnClearTable( 0 );
		    	   tb_itsmdemo.fnDraw();
		        }
		    }

	</script>

</html>
 

显示效果如下:



5 提交时注意的事项

    在初始化raty的时候会生成一个hidden的input,如下:

 raty.js 中生成input的代码:


6.readme.txt


/**
 * jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty
 * --------------------------------------------------------------------------
 *
 * jQuery Raty is a plugin that generates a customizable star rating automatically.
 *
 * Licensed under The MIT License
 * 
 * @version     0.5
 * @since       11.06.2010
 * @author      Washington Botelho dos Santos
 * @link        http://wbotelhos.com/raty
 * @twitter     http://twitter.com/wbotelhos
 * @license     http://www.opensource.org/licenses/mit-license.php MIT 
 * @package     jQuery Plugins
 * 
 * Thanks to:
 * --------------------------------------------------------------------------
 * @glbenz
 * @franciscosouza
 * 
 * Usage (default values):
 * --------------------------------------------------------------------------
 *	$('div#star').raty({
 *		cancelHint:   'cancel this rate!',                             // The hint information.
 *		cancelOff:    'cancel-off.png'                                 // Name of the cancel image off.
 *		cancelOn:     'cancel-on.png'                                  // Name of the cancel image on.
 *		cancelPlace:  'left',                                          // Position of the cancel button.
 *		hintList:     ['bad', 'poor', 'regular', 'good', 'gorgeous'],  // A hint information for default 5 stars.  提示每颗星的title(默认是5个)
 *		number:       5,                                               // Number of star.  默认是多少颗星
 *		path:         'img,                                            // Path of images.	图片的路径
 *		readOnly:     false,                                           // read-only or not.
 *		scoreName:    'score',                                         // The name of target score.
 *		showCancel:   false,                                           // If will be showed a button to cancel the rate.
 *		showHalf:     false,                                           // Active the half star.
 *		starHalf:     'star-half.png',                                 // The image of the half star.
 *		start:        0,                                               // Start with a score value.
 *		starOff:      'star-off.png',                                  // Name of the star image on.
 *		starOn:       'star-on.png'                                    // Name of the star image on.
 *    //onClick:    function() { alert('clicked!'); }                // A default function can to be setted here.
 *	});
 *  
 *  <div id="star"></div>
 *
 * Public functions:
 * --------------------------------------------------------------------------
 *  $.fn.raty.start(3);                                              // Starting the rating with 3 stars later.
 *  $.fn.raty.readOnly(true);                                        // Adjusts the rating for read-only later.
 *  $.fn.raty.click(2);                                              // Click in a star later.
 *
 *  Should come after the current raty and before the anothers one. Because it takes the last called raty.
 *
 */







标签: raty(星星评价)
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 45
码字总数 13731
×
chenyansong22
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: