Spinner(微调器)装饰器开发:
<o:p></o:p>组件介绍:
仿照 window时间日期管理中,年份调节的控件,原型是一个文本输入筐,一般用于数字输入。筐后有上下微调按钮,用于增减控件值。
<o:p></o:p>这种控件在backbase框架中也有出现,JSI的spinner就是仿照其外形设计。
显示效果:<o:p></o:p>
在线演示见:http://www.xidea.org/project/jsi/decorator/spinner.html
代码:
org/xidea/decorator/spinner.js
-
-
-
-
-
-
-
- function Spinner(){
- }
-
- Spinner.prototype = new Decorator();
- Spinner.prototype.decorate = function(){
- this.start = parseInt(this.attributes.get('start'))
- this.end = parseInt(this.attributes.get('end'))
- this.step = parseInt(this.attributes.get('step'))||1;
- var container = this.getContainer();
- var table = document.createElement('table');
- var outerDiv = document.createElement("div");
- var upDiv = document.createElement("div");
- var downDiv = document.createElement("div");
- table.border = 0;
- table.cellSpacing=0;
- table.cellPadding=0;
- container.insertBefore(table,container.firstChild);
- var row = table.insertRow(0);
- var cell = row.insertCell(0);
- var ele = table.nextSibling;
- do{
- container.removeChild(ele);
- cell.appendChild(ele);
- }while(ele = table.nextSibling)
- cell = row.insertCell(1);
- cell.style.verticalAlign = 'middle',
- cell.appendChild(outerDiv);
- outerDiv.style.position = 'relative'
- outerDiv.style.top = '0px'
- outerDiv.style.left = '0px'
- outerDiv.style.height = '0px'
- outerDiv.style.width = '0px'
- outerDiv.style.zIndex= 2;
-
- outerDiv.appendChild(upDiv);
- initializeHandleDiv(this,upDiv);
- outerDiv.appendChild(downDiv);
- initializeHandleDiv(this,downDiv);
-
- }
- Spinner.prototype.jump = function(offset){
- if(offset){
- var input = this.getContainer().getElementsByTagName('input')[0];
- var value = value = input.value * 1 + offset*this.step;
- if(value>this.end){
- value=this.end;
- }else if(value<this.start){
- value = this.start;
- }
- input.value = value;
- }
- }
-
-
-
- var imagePath = 'url("'+this.scriptBase + 'spinner.gif")';
-
-
-
- function initializeHandleDiv(spinner,handleDiv){
- var position = 0;
- var style = handleDiv.style;
- style.backgroundImage=imagePath;
- style.position='absolute';
- style.width='12px';
- style.height='8px';
- style.margin='1px';
- style.left = '-14px'
- style.overflow = 'hidden'
- if(handleDiv.previousSibling){
- style.backgroundPosition = '0 -32px';
- position = -32;
- style.top = '0px'
- }else{
- style.top = '-10px'
- }
- handleDiv.onmouseout = buildMouseHandle(spinner,position,0)
- position -= 8;
- handleDiv.onmouseup=handleDiv.onmouseover = buildMouseHandle(spinner,position,0)
- position -= 8;
- handleDiv.onmousedown = buildMouseHandle(spinner,position,0)
- handleDiv.onclick = buildMouseHandle(spinner,position,position<-32?-1:1)
- }
-
-
-
- function buildMouseHandle(spinner,imagePosition,offset){
- imagePosition = '0 '+imagePosition+'px';
- return function(){
- this.style.backgroundPosition = imagePosition;
- spinner.jump(offset);
- }
- }
使用方法见在 基于FCKEditor 开发JSI Editor装饰器已有详细介绍,不再叙述。
见:http://www.iteye.com/article/79063
- 大小: 52.3 KB
分享到:
相关推荐
一款超洁净版支持小数的spinner微调器,用完不后悔
[Android开发从零开始].37.Spinner和Auto.Complete控件学习.mp4 52.7MB [Android开发从零开始].38.WebView控件学习.mp4 70.6MB [Android开发从零开始].39.Dialogs学习.mp4 59.9MB [Android开发从零开始].40....
SPINNER 从一个编辑框和两个按钮创建一个“微调器” SPINNER(PROP1,VAL1,PROP2,VAL2,...) 创建具有指定的微调器属性值。 特性: Position : 像素位置矩形,默认 [20 20 60 20] Min : 最小值,默认 0 Max : 最大值,...
jquery ui里面的微调器,对其进行粗和细两个调控范围的设置
android-微调器 android中微调器输入的样板 要记住的事情,您需要实现 onItemSelectedListener 接口,然后在 public void onItemSelected( AdapterView<?> parent, View view, int pos, long id) { // An ...
TTY :: Spinner 终端微调器,用于具有不确定时间范围的任务。 TTY :: Spinner为工具箱提供了独立的微调器组件。安装将此行添加到您的应用程序的Gemfile中: gem "tty-spinner" 然后执行: $ bundle或自己安装为: $ ...
jQuery EasyUI API 中文文档 - Spinner微调器使用,需要的朋友可以参考下。
我需要一个根据周围环境缩放的愚蠢的微调器。 Docs n'的东西 安装 npm i -S react-svg-spinner import Spinner from "react-svg-spinner" ; 在浏览器中使用 < script src =" ...
#Bootstrap 输入微调器 使用向上/向下按钮增强用于输入数值的文本输入 安装 HTML 头: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> [removed]...
不错的微调器 NiceSpinner是默认Android微调器的重新实现,具有漂亮的箭头动画和不同的方式来显示其内容。 它遵循材料设计准则,并且从Api 14开始兼容。用法用法非常简单。 将标签添加到XML布局中: ...
用于React.js的Material Design微调器组件。 实时示例: : 目录 安装 您可以从安装 。 $ npm i -S react-md-spinner # or $ yarn add react-md-spinner 产品特点 :rocket: 您可以从零配置开始使用! :...
使用 canvas 的灵活微调器, 一个分支。 看看! 安装 $ component install component/spinner 例子 var Spinner = require ( 'spinner' ) ; var spinner = new Spinner ; document . body . appendChild ( spinner...
基于Material-UI加载微调器 安装 npm i -S @flatlinediver/react-spinner yarn add @flatlinediver/react-spinner 基本用法示例 import React from 'react' ; import Spinner from '@flatlinediver/react-spinner' ;...
不错的微调器NiceSpinner是默认Android微调器的重新实现,具有漂亮的箭头动画和不同的显示其内容的方式。 它遵循材料设计准则,并且从Api 14开始兼容。用法用法非常简单。 将标记添加到XML布局中,然后使用此代码段...
vue-loading-spinner Vue.js的另一个加载微调器集合安装npm install --save vue-loading-spinner 或者yarn add vue-loading-spinner用法< template> < div xss=removed> < rotate></ rotate> </ div></ template><...
spinner:Crystal编程语言的终端微调器
Vue.js加载微调器的集合。 只需将yuanyan的React.js项目转换为Vue.js组件即可。 特别感谢的精彩项目。 安装 NPM $ npm install vue-spinner 普通JS var PulseLoader = require ( 'vue-spinner/src/PulseLoader....
扩展自 $.fn.validatebox.defaults,用 $.fn.spinner.defaults 重写了 defaults。 依赖 validatebox 用法 代码如下: <input id=”ss” value=”2″> 代码如下: $(‘#ss’).spinner({ required:true, increment...
物料微调器材质微调器,类似于TextInputLayout中的EditText例子用法步骤1 :以XML添加MaterialSpinner < io xss=removed xss=removed xss=removed xss=removed> 步骤2 :设定项目main_occupation.setItems(resources...
Android中常见的弹框:Spinner、Dialog、PopupMenu、PopupWindow等控件基本使用总结