ExtJS(3)- 自定义组件(星级评分)
今天介绍ExtJS的组件开发,这里以星级评分为示例,首先来看看效果图:
然后是功能操作:鼠标移动到五个星星上面时,会有tooltip显示当前的分值。如图:鼠标悬停在第四颗星星时前四颗星星显示高亮笑脸,当点击下去时锁定笑脸并且设定份数为4。
然后我们来说一下实现原理,Ext的组件基本单元是Ext.Component,所以自定义组件可以继承Component,然后显示部分直接用html来显示,包括css和动态事件都可以直接在html上编辑添加。
接下来我们来看代码:
Ext.define('Pactera.widget.StarRating', {alias:"widget.starRating",extend: 'Ext.Component',afterRender:function(){this.callParent();},//label: 'score',////labelWidth: 60,//lableAlign:'right',//left,center,right//aMsg: [], /*["很不满意|差得太离谱,与卖家描述的严重不符,非常不满","不满意|部分有破损,与卖家描述的不符,不满意","一般|质量一般,没有卖家描述的那么好","满意|质量不错,与卖家描述的基本一致,还是挺满意的","非常满意|质量非常好,与卖家描述的完全一致,非常满意"]*/width: 275,height: 50,padding: 10,style: {color: '#000000',backgroundColor:'#FFFFFF'},initComponent: function(){var me = this;var date = new Date();var dateTime = date.getTime();var starId = me.id?"star_"+me.id:"star"+dateTime;var label = me.label?me.label:'评分';var labelWidth = me.labelWidth?me.labelWidth-13:87;var labelAlign = me.lableAlign?me.lableAlign:'right';var thisWidth = me.width?me.width:130;var aMsg = ["Unacceptable|Unacceptable","Poor|Poor","Fair|Fair","Good|Good","Excellent|Excellent"]if(me.aMsg){aMsg = me.aMsg;}var html = '<div id="'+ starId +'" class="star" style="width:'+thisWidth+'px;">'+ '<span style="width:'+labelWidth+'px;text-align:'+labelAlign+'" >'+ label + '</span>'+ '<span>:</span>'+ '<ul>'+ '<li><a href="javascript:;">1</a></li>'+ '<li><a href="javascript:;">2</a></li>'+ '<li><a href="javascript:;">3</a></li>'+ '<li><a href="javascript:;">4</a></li>'+ '<li><a href="javascript:;">5</a></li>'+ '</ul>'+'<span></span>'+'<p></p>'+'</div>'this.html = html;this.listeners = {'boxready':function(){var oStar = document.getElementById(starId);var aLi = oStar.getElementsByTagName("li");var oUl = oStar.getElementsByTagName("ul")[0];var oSpan = oStar.getElementsByTagName("span")[1];var oP = oStar.getElementsByTagName("p")[0];var i = iScore = me.iStar = 0;for (i = 1; i <= aLi.length; i++){aLi[i - 1].index = i;//鼠标移过显示分数aLi[i - 1].onmouseover = function (){fnPoint(this.index);//浮动层显示oP.style.display = "block";//计算浮动层位置oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";//匹配浮动层文字内容oP.innerHTML = "<em><b>" + this.index + "</b> " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]};//鼠标离开后恢复上次评分aLi[i - 1].onmouseout = function (){fnPoint();//关闭浮动层oP.style.display = "none"};//点击后进行评分处理aLi[i - 1].onclick = function (){me.iStar = this.index;oP.style.display = "none";//oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"me.value = this.index;}}//评分处理function fnPoint(iArg){//分数赋值iScore = iArg || me.iStar;for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : ""; }var setValue = function(score){me.iStar = score;fnPoint(score);}me.setValue = setValue;}}this.callParent();}});
css样式代码:
.star ul{list-style-type:none;}
.star{position:relative;margin:0px auto;}
.star ul,.star span{float:left;display:inline;height:19px;line-height:19px;}
.star ul{margin:0 10px;padding-start: 0px;-webkit-padding-start: 0px;-moz-padding-start: 0px;}
.star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(http://sandbox.runjs.cn/uploads/rs/285/beoxl0jq/star.png) no-repeat;}
.star strong{color:#f60;padding-left:10px;}
.star li.on{background-position:0 -28px;}
.star p{position:absolute;top:20px;width:179px;height:67px;display:none; background:url(./p_w_picpath/tooltipbg.gif) no-repeat; z-index:100000;padding:7px 10px 0;}
.star p em{color:#f60;display:block;font-style:normal;}
下面是调用代码:
var starRating = Ext.create('Pactera.widget.StarRating',{label:'Is it a good question?',width:450,labelWidth:250,name:'starRating' });
下面说几个注意点:
1、动态响应事件必须要写在boxready之内,因为我们操作的对象是document,所以必须在页面渲染生成document以后。
2、因为是评分组件,就会有读和写,读的话就是选中星级后读取几星,这里我们设定的直接是value,而写我们设定了setValue()方法,所以在form表单加载时,该组件就可以直接加载到该分数的样式。
3、tooltip的内容同样是可以自定义的,我们只要在实例化该组件时传入参数便可以自定义tooltip提示。
系统开发中肯定会有各种各样的组件,而我们只要发挥想象,都能够将这些功能组件模块化,从而达到共用。
转载于:https://blog.51cto.com/xuepiaoqiyue/1564865
ExtJS(3)- 自定义组件(星级评分)相关推荐
- android 星级评论,Android自定义RatingBar(星级评分控件)
1.首先在Drawable下建立five_rating_bar.xml android:id="@android:id/background" android:drawable=& ...
- 星星评价控件android开发_android自定义星级评分控件,可实现只显示实心星星
话不多说,上图 近日app需求弄一个等级展示,看了下UI图,只显示实星(点亮的星星).如图 但是网上关于星级评分的例子大多这样 也展示虚心星星 通过自定义Viewpackage com.starsba ...
- [Android] 星级评分条组件RatingBar
星级评分条组件(RatingBar)一般是用来做评分,用星形来显示等级评定,它是ProgressBar的子类,继承了ProgressBar的所有属性和方法. 1.RatingBar属性 android ...
- UI组件之ProgressBar及其子类(二)SeekBar拖动条和RatingBar星级评分条的使用
拖动条采用拖动滑块的位置来表示数值 SeekBar的常用xml属性值: 重要的android:thumb制定一个Drawable对象,改变滑块外观 通过滑块来改变图片的透明度: main.xml &l ...
- Angular 星级评分组件
一.需求演变及描述: 1. 有一个"客户对公司的总体评价"的字段(evalutation).字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5 ...
- React 30 秒速学:制作星级评分组件
本文译自:30-seconds-of-react . React 30 秒速学: 精选有用的 React 片段,30-seconds-of-react 的中文版本,已全部完成翻译.上线,地址:30-s ...
- Android 基础知识4-3.9 RatingBar(星级评分条)详解
一.引言 Android开发中,时不时的就有要实现星星的评分效果,比如某宝,某团,相信大家也都见过,当然了我们可以自己去画,也可以用美工给切的图去实现,其实在Android原生的控件中就可以来实现这样 ...
- 微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段 个人认为,自定义组件是区分菜鸟与高手的分水岭 第一篇先介绍小程序自定义组件的基本使用 自定义组件的使用可以分为如下几个步骤 创建组件 ...
- js实现星级评分效果(非常规5个li代码)
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
最新文章
- DotNet_Performance_Tuning_ANTS_Performance_Profiler
- 知识图谱(历史回顾及技术挑战)
- ST17H26移植软时钟代码
- python定时任务:apscheduler的使用(还有一个celery~)
- git push 的符号笔有什么用_Git自救指南(一)——工欲善其事,必先利其器,基本概念概览...
- Swift 优雅的打印Log
- gridview 通用分页实现
- python自动抽奖_Python定时自动参与抽奖助手抽奖
- 【100题】第十九题(斐波那楔数列)
- 【bzoj1146】 [CTSC2008]网络管理Network【树链剖分+树套树+二分 线段树套Treap】
- 廖雪峰python教程答案
- php文件上传实验总结,php文件上传总结 - osc_jjc36t9p的个人空间 - OSCHINA - 中文开源技术交流社区...
- 分享一个更高效的数据清理方法,建议收藏
- 最全面的PS快捷键使用指南(图文演示)
- Yet Another Crosses Problem
- X线、CT、B超、核磁共振区别
- 医疗后台管理系统项目
- ISP Pipeline lens shading
- Python学生信息管理系统(增删查改、模糊查找、txt文件输出)# 谭子
- Fairplay之 generating FairPlay content key request on iOS after 14.6