`
atian25
  • 浏览: 467718 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Mootools 扩展select控件

阅读更多
/* 
 * Descript_CN: 提供对Select控件的options的操作
 * Descript_EN: Offer some operations for select options
 * {Array} arr 选项值设置 格式:[{text:'北京',value:'010'},{text:'上海', value:'020',selected:true}] 当value没定义的时候,value=text
 */ 
Element.Properties.htmlOptions = {
    get: function(){
				if(this.get('tag')!='select') return null;
				var ops = this.getElements('option');
				var arr = ops.map(function(item,index){
					var op = {
						text: item.text,
						value: $pick(item.value,item.text),
						selected: $pick(item.selected,false)
					};
					return op;
				});
        return arr;
    },
    set: function(arr){
			if(this.get('tag')!='select') return this;
			//移除旧的options
			this.getElements('option').destroy();
			//生成新的options
			var ops = arr.map(function(item,index){
				var op = new Element('option',{
                                                       text: item.text,
                                                       value: $pick(item.value,item.text),
                                                       selected: $pick(item.selected,false)
														 });
				//console.log(index,op,op.get('html'));
				return(op);
			});
			//添加
			this.adopt(ops);
			return this;
    },
		erase: function() {
			if(this.get('tag')!='select') return null;
			this.getElements('option').destroy();
			return this;
		}
};


用法:
var data = [
		{text:'任选',value:''},
		{text:'bsc1',value:'bsc1'},
		{text:'bsc2'},
		{text:'bsc21',value:'bsc21',selected:true},
		{text:'bsc212',value:'bsc212'}
	   ];
$('mySelect').set('htmlOptions',data);
分享到:
评论

相关推荐

    mootools1.2 树状菜单控件

    MIF.Tree控件是MooTools库的一个扩展,它允许开发者在网页上构建可展开和折叠的层次结构,常用于导航菜单、文件系统浏览或组织复杂的数据结构。这个控件提供了丰富的功能,包括但不限于以下几点: 1. **动态加载**...

    Mootools多选插件

    **Mootools多选插件**是一个专门为Mootools JavaScript框架设计的组件,它扩展了基本的选择功能,允许用户在网页表单中进行多选操作。这个插件由开发者独立创建,特别强调了中文支持,确保了在中国境内的使用体验。 ...

    mooRainbow.js.css+mootools完成实现颜色拾取器控件完整套

    《mooRainbow.js.css与mootools:构建高效的颜色选择器控件》 在Web开发中,为用户提供直观、易用的颜色选择工具是至关重要的,尤其在涉及到色彩设计和编辑的应用场景。mooRainbow.js.css和mootools的组合提供了一...

    mootools tree and table

    开发者可能定义了自定义的MooTools类,扩展了MooTools的内置组件,或者实现了特定的事件处理逻辑。阅读和理解这些代码对于深入学习MooTools的使用和优化至关重要。 总的来说,MooTools为开发者提供了强大而灵活的...

    mootools

    这个库的设计理念是为开发者提供一种优雅、高效的方式来编写可维护的前端代码,它强调代码的组织结构和模块化,使得大型项目能够更易于管理和扩展。 MooTools的核心特点包括: 1. **面向对象编程**:MooTools基于...

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    - **Function增强**:MooTools扩展了JavaScript的函数,增加了如bind、delay、chain等方法,增强了函数的可操作性。 - **Fx模块**:提供了动画效果,如Fade、Slide、Toggle等,可以轻松实现过渡和动画效果。 3. *...

    mootools 1.2 中文文档

    - **Array、String、Function、Number**:MooTools扩展了这些基本类型,增加了一系列实用的方法,如数组的`each`遍历,字符串的`trim`清理空白,函数的`bind`绑定上下文等。 6. **实用模块**: - **Element....

    MooTools 帮助文档 中文

    它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对...

    Mootools 1.2.1 API 文档

    对于Joomla爱好者而言,Mootools不仅是Joomla自带的JS库,而且是开发Joomla扩展和模板时不可或缺的一部分。 Mootools的核心理念是模块化设计,它将JavaScript的功能拆分成一系列可复用的模块,如核心、DOM、事件、...

    前端项目-mootools-more.zip

    **前端项目-mootools-more.zip** 是一个包含MooTools扩展库的压缩包,主要针对的是使用MooTools JavaScript框架进行前端开发的项目。MooTools是一个轻量级且高度模块化的JavaScript库,旨在提高开发效率,提供面向...

    mootools教程

    此外,它还可以将普通的DOM元素转换为具有MooTools扩展方法的对象。 - `$$`:这个方法允许使用CSS选择器语法来获取一组DOM元素。例如,`$$('a')`将返回页面上所有的`<a>`标签,`$$('a', 'b')`则会返回`<a>`和`<b>`...

    mootools详细教程chm

    **MooTools 详解** MooTools 是一个轻量级且功能强大的JavaScript库,它提供了一种优雅的方式来处理DOM操作、事件、动画效果以及Ajax交互。这个“mootools详细教程chm”包含了丰富的资源,旨在帮助开发者深入理解和...

    mootools源码分析.rar

    MooTools是一个轻量级的JavaScript库,以其模块化、可扩展性和高性能著称。它提供了许多实用工具和功能,使Web开发更为便捷。通过对"Mootools源码分析"的深入探讨,我们可以了解到这个框架的核心设计理念和实现机制...

    Mootools UI 框架

    Mootools本身是一个轻量级、模块化的JavaScript库,强调代码的优雅和性能,而Mootools UI则进一步扩展了这个库的功能,专注于UI层面的开发。 Mootools UI框架的核心特性包括: 1. **组件化设计**:Mootools UI提供...

    mootools开发手册中文版

    开发者可以通过`extend`方法来扩展已有类,通过`implement`方法添加新方法或属性。此外,`Object`类是所有MooTools类的基础,提供了便利的操作如`keys`(获取对象所有键)和`values`(获取对象所有值)。 2. **DOM...

    MooTools.Essentials

    8. **插件机制**:MooTools的插件机制允许开发者轻松扩展框架功能,创建自定义组件,满足特定项目需求。 9. **兼容性**:MooTools致力于跨浏览器兼容性,确保在多种浏览器环境下运行良好,减少了开发者处理兼容问题...

    Mootools v1.11 文档 pdf html Mootools v1.2.1 js

    MooTools 是一个轻量级、模块化的JavaScript...通过阅读文档,开发者可以找到特定功能的使用方法,通过HTML文件查看效果并模仿实现,而源代码则有助于理解MooTools的内部机制,对于定制和扩展MooTools功能非常有帮助。

    mootools中午手册

    它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对...

    MooTools 1.2 中文手册

    MooTools 是一个轻量级且模块化的JavaScript库,旨在提供高效和可扩展的Web开发工具。它遵循了“More, Please”的理念,强调优雅的代码和强大的功能。MooTools 1.2 是这个库的一个重要版本,提供了许多改进和优化,...

    mootools-release-1.11

    8. **插件扩展**:MooTools的生态系统还包括一系列插件,如`More`集合,提供了额外的功能,如拖放、滑块、提示框等,这些插件可以方便地与核心库集成。 通过"mootools-release-1.11.js"这个文件,开发者可以直接...

Global site tag (gtag.js) - Google Analytics