• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript jb.jb类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中jb-core/jb.jb的典型用法代码示例。如果您正苦于以下问题:TypeScript jb类的具体用法?TypeScript jb怎么用?TypeScript jb使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了jb类的4个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: constructor

	 constructor(public ctx, public cmp, public $el) {
	 	var data_ref = ctx.vars.$model.databind;
		this.editableNumber = ctx.vars.editableNumber;
		this.scaleElement = $el.find('.slider_scale')[0];
		this.thumbElement = $el.find('.slider_thumb')[0];
		this.inputElement = $el.find('.slider_input')[0];
		this.textElement = $el.find('.slider_text')[0];

		this.thumbElement.tabIndex = 1;
		$(this.thumbElement).bind('mousedown', e => this.dragBegin(e) );
		$(this.thumbElement).bind('keydown', e => this.keyDown(e) ); 
		$(this.inputElement).bind('keydown', e => this.inputKeyDown(e)); 
		$(this.inputElement).bind('blur', e => this.setInputValue());
		$(this.inputElement).hide();
		$(this.textElement).bind('mousedown', e => this.mouseDown(e) );

		this.numericValue = this.editableNumber.numericPart(jb.val(data_ref));
		this.$el.addClass('noselect');

		this.valueChangeEm = new jb_rx.Subject();
		this.valueChangeEm.distinctUntilChanged()
			.debounceTime(100)
			.filter(x => 
				x != jb.val(data_ref))
			.subscribe(x=>{
				jb.writeValue(data_ref,x); 
				jb_ui.apply(this.ctx); // to fix with ChangeDetectionStrategy
			})
	}
开发者ID:ArtwareSoft,项目名称:jbart5-ng,代码行数:29,代码来源:slider.ts


示例2:

			.subscribe(x=>{
				jb.writeValue(data_ref,x); 
				jb_ui.apply(this.ctx); // to fix with ChangeDetectionStrategy
			})
开发者ID:ArtwareSoft,项目名称:jbart5-ng,代码行数:4,代码来源:slider.ts


示例3: Slider

jb.component('editable-number.slider', {
	type: 'editable-number.style',
	params: [
		{ id: 'width', as: 'number', defaultValue: '200' },
	],
	impl :{$:'customStyle',
		template: `<div class="jb-slider">
						<div class="slider_scale">
							<div class="slider_text"></div>
							<div class="slider_thumb"></div>
							<input class="slider_input">
						</div>
					</div>`,
		css: `{ height: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 12px; }
			.slider_scale { position:relative; float: left; background-color:#aaa; width: %$width%px; 
			  height: 1px; border-radius: 3px; margin-top: 13px; margin-right: 6px; 
			  margin-bottom: 13px; margin-left: 6px; 
			  border-bottom: 1px solid #efefef; }
			.slider_thumb { cursor: pointer; position: absolute; color:black; 
			  background-color:#efefef; width: 6px; height: 13px; 
			  border-radius: 2px; border: 1px solid #adadad; 
			  box-shadow:  inset 0 0 3px 0px gray; top: -7px; left: 0px; }
			.slider_thumb:hover { background-color:#eee; border-color: #777; }
			.slider_scale:hover .aa_slider_text { color:black; }
			.slider_thumb:focus { background-color:#383838; }
			.slider_text { color:#aaa; font-size: 10px; margin-top: -12px; margin-right: 0px; margin-bottom: 0px; margin-left: -19px; }
			.slider_scale.empty_value { opacity: 0.5; transition: opacity, 0.5s; }
			.slider_text:hover { cursor: pointer; text-decoration:underline; }
			.slider_input { position:absolute; width: 98px; height: 20px; border-radius: 6px; 
			  padding-top: 4px; padding-right: 4px; padding-bottom: 4px; 
			  padding-left: 18px; margin-top: -13px; margin-left: 24px; 
			  border: 1px solid #D1D1D1; box-shadow:  2px 2px 6px 1px gray; 
			}
			.slider_thumb.aa_disabled { opacity: 0.5 }
			.slider_text.aa_disabled { opacity: 0.5 }
			.slider_scale.aa_disabled { opacity: 0.5 }
`,
		methods: {
			init: ctx => cmp => {
				cmp.slider = new Slider(ctx,cmp,$(cmp.elementRef.nativeElement));
			},
			afterViewInit: ctx => cmp => {
				cmp.slider.initSizes();
				cmp.slider.adjustScale();
				cmp.slider.setThumbPosition();
			}
		},
      observable: () => {} // to create jbEmitter
	}
})
开发者ID:ArtwareSoft,项目名称:jbart5-ng,代码行数:50,代码来源:slider.ts


示例4: editableNumber

import {jb} from 'jb-core/jb';;
import * as jb_ui from 'jb-ui/jb-ui';

jb.type('editable-number.style');

jb.component('editable-number', {
  type: 'control', category: 'input:30',
  params: [
    { id: 'databind', as: 'ref'},
    { id: 'title', as: 'string' , dynamic: true },
    { id: 'style', type: 'editable-number.style', defaultValue: { $: 'editable-number.input' }, dynamic: true },
    { id: 'symbol', as: 'string', description: 'leave empty to parse symbol from value' },
    { id: 'min', as: 'number' },
    { id: 'max', as: 'number' },
    { id: 'displayString', as: 'string', dynamic: true, defaultValue: '%$Value%%$Symbol%' },
    { id: 'dataString', as: 'string', dynamic: true, defaultValue: '%$Value%%$Symbol%' },

    { id: 'step', as: 'number', defaultValue: 1, description: 'used by slider' },
    { id: 'initialPixelsPerUnit', as: 'number', description: 'used by slider' },
    { id: 'features', type: 'feature[]', dynamic: true },
  ],
  impl: (context,databind,title,style,symbol,min,max,displayString,dataString,step,initialPixelsPerUnit) => {
    var ctx = context.setVars({ 
      editableNumber: new editableNumber(symbol,min,max,displayString,dataString,step||1,initialPixelsPerUnit)
    });
  	return jb_ui.ctrl(ctx) 
  }
})

jb.component('editable-number.input',{
  type: 'editable-number.style',
开发者ID:ArtwareSoft,项目名称:jbart5-ng,代码行数:31,代码来源:editable-number.ts



注:本文中的jb-core/jb.jb类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript jb-rx.Observable类代码示例发布时间:2022-05-25
下一篇:
TypeScript jb-core.jb类代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap