aralejs / select Goto Github PK
View Code? Open in Web Editor NEWSelect Widget
Home Page: aralejs.org/select/
Select Widget
Home Page: aralejs.org/select/
templatable.js中:model || (model = this.get("model"));
最后找到select.js文件里:
this.model = convertSelect(trigger[0], this.get('classPrefix'));
把这改成:
this.set('model', convertSelect(trigger[0], this.get('classPrefix')));后正常同样的还有:
this.model = completeModel(this.model, this.get('classPrefix'));
点击 trigger 后,element 弹开。
再次点击 trigger,element 未按期望收起。
版本 0.9.6
支持 3个接口
select的浮层是脱离父层的绝对定位,这样假如页面发生变化,比如新增或减少一个dom,会导致定位不准。
如题。
在级联功能的时候,syncModel 后希望触发 change 事件,而在页面初始化渲染模板的时候不希望触发 change 事件。
change 触发的时机应该这样定义:组件初始化时不应该触发,而在之后只要 selectedIndex 切换就应该触发。
可以多选,但要确定交互效果,暂无需求
初始化的时候不应该触发 change
事件
原来将 change
事件放到 _onRenderSelectedIndex
中,而初始化时必须设置 selectedIndex
,所以会触发。
可以将 change
事件放到 select
方法中。
// trigger 的宽度和浮层保持一致
_setTriggerWidth: function() {
var trigger = this.get("trigger");
var width = this.element.outerWidth();
var pl = parseInt(trigger.css("padding-left"), 10);
var pr = parseInt(trigger.css("padding-right"), 10);
var bl = parseInt(trigger.css("border-left-width"), 10);
var br = parseInt(trigger.css("border-right-width"), 10);
trigger.css("width", width - pl - pr - bl - br);
}
这些代码好像在IE6下不是太有效,后来修改代码,将ui-select-trigger与ui-select-content的宽度直接设置成原始select的宽度。
如果 select 的选项变更后,表单项也要跟着变更
增加 name 的参数
var model = [
{value:'option1', text:'选项 1'},
{value:'option2', text:'选项 2'},
{value:'option3', text:'选项 3'}
];
new Select({
trigger: '#example1',
model: model
}).render();
new Select({
trigger: '#example2',
model: model
}).render();
new Select({
trigger: '#example3',
model: model
}).render();
如果 model 有多个 selected: true
则默认选中最后一个,代码有误
原因:我们的 dpl 的 class 后缀和默认的不一致,会添加很多无效class(比如 xxx-trigger-hover这些,-trigger-hover根本无法修改)
原因:既然是对 原生select的模拟 ,事件处理部分也应该一致(原生select的选择不会触发click的冒泡,还有以后的键盘事件支持也是)
场景:在一个 overlay 的表单中使用了 select ,如果点击了 item 后, overlay 就自动关闭了(click的冒泡引起的)。
获取 trigger border 的时候失效,返回 NaN
http://stackoverflow.com/questions/12226073/getting-css-border-value-with-jquery-in-firefox-14-0-1
Select 的CSS 可以定制功能。
<select id="test" name="test">
<option value="SelectBoxIt is:">SelectBoxIt is:</option>
<option value="a jQuery Plugin" disabled>a jQuery Plugin</option>
<option value="a Select Box Replacement" disabled>a Select Box Replacement</option>
<option value="a Stateful UI Widget" selected>a Stateful UI Widget</option>
</select>
提供 disableOption
enableOption
方法
ie6下没有iframe遮板,有些控件会穿越
mmonitormng 这个系统最近使用了该select组件 不过因为是后引入的 而原有select的业务逻辑使用较复杂,有vm预先载入的,有JS动态创建或者options插入的,以及后续交互过程中需要动态更新options的;通过在TTI之后查找所有select元素并逐个进行对象实例化,目前可以正常使用,但是因为原元素宽高各不相同,会导致页面大面积的rerender,另外原有的select的事件绑定和options状态(选中、新增)更新都无法同步到select组件上,目前尺寸问题通过全局设定高优先级样式应用固定值临时解决了,事件和数据的同步只能逐个改原有代码了…
希望可以支持实现以上问题,实现事件双向通知或数据双向同步,达到透明替换原始元素的目标~
原生select只要是mousedown就会触发,而模拟的click才会触发
https://github.com/aralejs/select/blob/master/src/select.js#L102
将这里修改下就ok了
现在看起来功能已经不是 select 了,所以extend select 写,下周我来改
主要 feature
menu 的功能,看单独做,还是基于 select 做
当model传入时有多条记录selected=true 有bug,比如传入4条数据,1,3,4的selected属性为true,这个时候组件默认选中的是第三项而不是第四项。看了下select的源码,发现completeModel函数中for (j = 0, ll = selectIndexArray.length; j < ll; j++) {
newModel[j].selected = "false";
}
按理说这里 不应该是newModel[j].selected = "false"; 而是newModel[selectIndexArray[j]].selected = "false";吧?
demo使用的a标签作为级联的下级
但是想上下级都使用select标签 而非 select 与 a,就有个问题出现了
因为判断下级是 a 则 生成 input type=hidden name=xxx
判断下级是select 则不生成
导致的问题就存在了,syncModel 方法,没有model to option, 我只看到了 convertSelect,也就是 option to model.
直接的表现就是 model 虽然变化,ul li 也变化,但是原始 select的option 并没有变化。
这导致 给后台传参数时候,始终是 第一次 render时候的值。
说了这么多,我想到两个解决方法:
2.操作option,这种方式,比较麻烦,并且也有可能违背了你某些方法的初衷。
请考虑一下,谢谢了
对于原生 select 比较实用,使用方法也比较简单,也不需要遍历后对每个 DOM 进行实例化。
将 {{text}}
改为 {{{text}}}
即可。
根据文档,trigger 为任意 DOM,测试发现如果为input[type="text"]或者textarea时会报错(jquery-1.8.3)。
追踪发现_onRenderSelectedIndex 方法中简单的调用
trigger.html(selected.html());
在ie6/7下会报错,表单元素不能调用html方法
原生的 select trigger 和浮层是等宽的,所以应该支持这个功能。
初始化后获取浮层的宽度,然后设置 trigger 的宽度,其他样式不设置。
能不能提供一个方法设置selec的disabled,现在有个联动的交互,一级select的值无效的时候,需要动态的改变二级select的disabled,但是Select组件没有这个方法,好蛋疼,只能在初始化的时候配置disable: true来完成,但是不能满足动态改变的需求
希望能扩展下select 组建 出一个级联的Select 组建, 会比较常用。 文档中的级联demo的用法,不是很好用。
https://github.com/aralejs/select/blob/master/src/select.js#L327
使用select组件一直提示 newModel 未定义 错误在327行
在convertSelect这个函数里我确实没有找到在什么地方定义了 newModel 并且它也不是全局变量 请问这是bug 吗?
滚动条出现宽度有可能不够,要加个 padding
ps:统一考虑下,是否要加个 maxHeight 的参数
希望 trigger 的 DOM 结构可以自定义,hover 的时候有样式
如题。。。
src/select.js
156-158行的destroy方法
destroy: function() {
this.element.remove();
},
没有调用父类的destroy :(
select.on('disabledChange', function(target, status) {
});
status: 变化后的状态
target: 当前选中的项
spm -v
v1.1.2
spm install select
Start installing ...
HTTP HEAD 200 http://modules.seajs.org
Downloading: http://modules.seajs.org/info.json
Downloaded: http://modules.seajs.org/info.json
Downloading: http://modules.seajs.org/arale/info.json
Downloading: http://modules.seajs.org/gallery/info.json
Downloaded: http://modules.seajs.org/arale/info.json
Downloaded: http://modules.seajs.org/gallery/info.json
Module select get error!
Total time: 0.17s
Finished at: Wed Nov 21 2012 11:15:36 GMT+0800 (CST)
Final Memory: 6M/12M
这是为啥。。。没有推上去吗?
select中dist版本与src代码不一致,maxHeight这个参数都没有
能不能默认就用alice的样式,另外配置说明里提到的"triggerTpl"配置项好像不管用,源码里也无此项.
RT,现在change时间的 唯一参数是现在选择的item ,
很多情况下, 上一个选择的item也是很有用的 ,建议加上,让这个事件使用起来更方便
自己提前保存这种方法使用起来比较麻烦。。
如果原来 trigger 是 select,那么会替换成一个 a 标签。
<select>
<option value="value">text</option>
</select>
上面的 trigger 会被转化成
<a href="#" class="ui-select-trigger">text</a>
但不知道是否需要支持模版,这个 trigger 是否有改变模版的场景。
其实可以通过折中的方案解决,就是 trigger 不传 select,而直接使用 DOM。
之前定义了个属性为 triggerTemplate
,现在已经废弃,如有需要再添加。
亲,请把对 overlay 的依赖升级到 0.9.11 ,和其他项目一起使用的时候报依赖树冲突。
推荐根据内容动态给element设宽度,也能解决上一个issue,这个功能可以做一个开关,不想用的可以关掉
popup 组件会做调整,调整后再重构 select
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.