我需要定义一个控件，控件本身支持全局修改属性，且有自己的私有方法
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script>
(function(){
var _myWidget={
id:null,
el:null,
_c:{
alertText:"",
},
init:function(config){
var self=this;
var _c=config||{};
if(_c.alertText&&_c.alertText){
self._c.alertText=_c.alertText;
}
if(_c.textColor&&_c.textColor!=""){
self._c.textColor=_c.textColor;
}
self._render();
},
_render:function(){
var self=this;
var _html='<input type="text" id="input_'+self.id+'" placeholder="'+self._c.alertText+'" style="color:'+self._c.textColor+'">';
$(self.el).html(_html);
},
setValue:function(value){
var self=this;
$("#input_"+self.id).val(value);
}
}
$.fn.MyWidget=function(options){
var uuid=(new Date()).getTime();
var _o=$.extend({},_myWidget);
_o.id=uuid;
_o.el=this;
var defaults={
alertText:"",
textColor:"red"
}
//后面的覆盖前面的
var _c=$.extend({},defaults,$.fn.MyWidget.defaults,options);
_o.init(_c);
return _o;
}
})();
</script>
<script>
(function(){
//统一改变控件的属性
$.fn.MyWidget.defaults={
textColor:"blue"
}
})();
</script>
</head>
<body>
<div id="container"></div>
<script>
var w=$("#container").MyWidget({alertText:"请输入"});
//执行其他的方法
w.setValue("Jasion");
</script>
</body>
</html>
分享到：
相关推荐
《jQuery封装Select实现自定义样式插件：jquery.easydropdown.min.js》 在Web开发中，Select元素是常用的数据选择控件，但其默认样式通常较为单一，无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富...
这个“jquery-easyui 完整 demo 演示”涵盖了 EasyUI 的核心功能和组件，旨在帮助开发者深入理解和实际运用。 1. **jQuery EasyUI 的基本概念** jQuery EasyUI 是基于 jQuery 的轻量级框架，它不依赖任何其他库，...
2. **UI 组件**: jQuery EasyUI 提供了诸如对话框（dialog）、表格（datagrid）、下拉框（combobox）、树形控件（tree）、菜单（menu）等常见的 UI 组件，这些组件都封装了复杂的交互逻辑和样式，使得开发者无需关心...
这个Demo可能演示了如何使用`<form>`标签结合`easyui-form`类，以及各种输入控件（如`<input>`, `<select>`, `<textarea>`等）来创建表单，并配置验证规则。 4. 对话框（Dialog）和窗口（Window）：EasyUI提供了...
这个"jquery easyui demo"压缩包包含了版本为1.5.3的jQuery EasyUI 示例，旨在让学习者快速理解和掌握其用法。 jQuery EasyUI 的核心理念是简化网页开发，它封装了许多常见的UI元素，如对话框、表格、菜单、按钮、...
JQueryEasyUI是一个基于jQuery的UI框架，它封装了一系列的JavaScript组件，使得开发者能够轻松创建出功能丰富的Web应用程序界面。这个WebForm控件库是专门为.NET平台设计的，旨在简化.NET开发人员在WebForm上的工作...
这个压缩包“jquery easyui1.2.1及demo”包含了EasyUI 1.2.1版本的库文件以及相关的示例代码，让我们来详细了解一下这个框架及其核心组件。 1. jQuery EasyUI 基础： jQuery EasyUI 是建立在 jQuery 库之上，利用 ...
演示文件夹（Demo）则包含了一个使用该控件的实际Web应用程序，可以帮助开发者理解如何在自己的项目中集成和使用这个自定义控件。 开发自定义控件时，关键在于封装和扩展。GridViewPageable可能继承自ASP.NET的...
7. **库和框架集成**：此合集中的控件可能来自不同的开发者，它们可能已经封装在jQuery插件或者独立的JavaScript库中，方便开发者快速集成到现有的项目中。 在`index.html`中，可以看到这些星星评价控件的示例展示...
提供的“演示的demo”可以帮助开发者理解如何在实际应用中集成和配置这些控件。 "皮肤"可能指的是UI控件的可定制外观。在许多UI库中，皮肤或主题允许开发者更改控件的颜色方案、字体和其他视觉元素，以适应其品牌的...
这个“测试jquery easyui demo”很可能是为了展示如何使用 jQuery EasyUI 创建交互式的Web应用。在本篇文章中，我们将深入探讨jQuery EasyUI的核心概念、主要组件以及如何通过实践来创建一个简单的示例。 首先，...
这个压缩包“jQuery.easyui.1.2.6+Demo+前端框架”包含了版本为1.2.6的jQuery EasyUI框架以及相关的示例，帮助开发者更好地理解和应用该框架。 jQuery EasyUI 主要包含以下核心组件： 1. **布局（Layout）**：用于...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了网页用户界面组件的开发，提供了丰富的UI控件，如数据网格、表单、对话框、菜单等。1.5.1 版本是其一个重要的发布，包含API中文文档以及演示示例，帮助开发者...
- **自定义组件**：基于EasyUI的基础组件，通过扩展和封装，创建满足特定需求的自定义组件。 - **主题切换**：内置多种主题，通过更改CSS文件即可改变整个应用的视觉效果。 - **国际化(i18n)**：支持多语言，方便...
"很炫很酷的Jquery组件"这个压缩包很可能包含了各种精心设计的jQuery插件和自定义控件，这些都是前端开发中的重要工具，能够帮助开发者创建功能丰富、用户体验优良的BS（Browser-Server，即浏览器-服务器）项目。...
在"基于jquery的气泡弹窗，下拉提示插件，样式自定义"这个项目中，我们可以看到以下主要知识点： 1. **jQuery选择器**：jQuery提供了丰富的选择器，如ID选择器、类选择器、属性选择器等，用于快速定位网页元素，为...
6. jquery：这个标签可能意味着项目中使用了jQuery库来辅助处理DOM操作和事件绑定，因为WebUploader自身并不强制要求使用jQuery，但很多开发者习惯于结合jQuery使用。 综上所述，这个"webuploader单页面多个上传...
- 这些文件分别承担了页面加载所需的基础库、数据模拟、数据请求模拟和分页逻辑封装的功能。 - `initTotalPageNum`变量模拟了从后台获取的总页数数据，用于初始化分页器。 6. **代码优缺点**: - 使用AJAX实现...
jQuery.easyui在此基础上进一步封装，提供了一系列组件，如数据网格（datagrid）、下拉框（combobox）、对话框（dialog）、树形控件（tree）等，这些组件在网页设计中非常常见，能快速构建出功能丰富的用户界面。...
例如，可以定义自定义组件来封装控件，通过状态管理和生命周期方法实现数据驱动的视图更新。 7. **Ajax异步通信**：Ajax技术允许前端与服务器进行无刷新的数据交换，可以更新单个控件或部分页面内容，提升用户体验...