一个jQuery的小控件
2009-10-21 23:18
267 查看
最近一直在忙dotnetnuke,没有时间来学点jQuery的东西,我真的是jQuery的超级fans,所以今天还是学点jQuery的东西并和大家分享一下。
以前我翻译过一个如何写jQuery插件的经典文章,这里再给出来一个相当好的,理论加例子的文章。
Wrapping everything inside an anonymous function and passing jQuery into it makes sure it doesn’t conflict with other libraries that uses ‘$’ as a shorthand (Don’t worry too much about this for now).
Inside your plugin add the following:
An object passed through the plugin will now return a function. I also created a reference “obj” to the object currently inside the function. Add the following inside your “this.each” statement:
You will also need some CSS to actually make your <ul> look like tabs.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
以前我翻译过一个如何写jQuery插件的经典文章,这里再给出来一个相当好的,理论加例子的文章。
Basic Structure
In case you want to share your plugin with others it can be a good idea to stick to the conventions of plugin authoring. Pick a suitable name like “myPlugin” and name your file jquery.myPlugin.js. Next thing is to define a function body.(function($) { $.fn.extend({ myPlugin: function() { } }); })(jQuery);
Wrapping everything inside an anonymous function and passing jQuery into it makes sure it doesn’t conflict with other libraries that uses ‘$’ as a shorthand (Don’t worry too much about this for now).
jQuery.tabify
I’m going to call the first plugin “tabify”. The objective is to add some tabs to the following content.<div id="someContent"> <h2>Tab number one</h2> <div> <p>Some tab content</p> </div> <h2>Next tab</h2> <div> <p>content...</p> </div> <h2>Last tab</h2> <div> <p>Even more stuff</p> </div> </div>
Inside your plugin add the following:
return this.each(function() { var obj = $(this); });
An object passed through the plugin will now return a function. I also created a reference “obj” to the object currently inside the function. Add the following inside your “this.each” statement:
obj.click(function() { obj.css({ backgroundColor:"red"}); }); Now pass the desired object into the plugin: $(function(){{ $('#someContent').tabify(); });
Clicking #someContent should result in a red background. You could pass any object into the plugin. $(‘#someContent h2’) will set a red background to any “h2” within #someContent that is clicked.
Tabifying your content
Here’s the code for jquery.tabify with included comments. I’m hoping you’re fairly familiar with JavaScript / jQuery and its basic syntax.(function($){ $.fn.extend({ tabify: function() { return this.each(function() { //Creating a reference to the object var obj = $(this); /* Create a reference for all headings and it's content using .next(). Remember to pass the object reference "obj" into the identifier. */ var headings = $('h2', obj); var tabContent = headings.next(); //We wan't to hide the headings and the content headings.hide(); tabContent.hide(); /* But we want to show content of the first tab since it's selected by default. */ tabContent.eq(0).show(); //Prepend the object with the tab container (ul). obj.prepend('<ul class="tabs"><//ul>'); //For every heading create an item (<li>) headings.each(function() { var label = $(this).text(); $("ul.tabs", obj).append("<li>" + label + "</li>"); }); var tabs = $("ul.tabs li", obj); //And add .sel class to first item tabs.eq(0).addClass("sel"); //Create a reference to the tabs for each obj var tabs = $("ul.tabs li", obj); tabs.click(function() { //When a tab is clicked "de-activate" the old one tabs.removeClass("sel"); tabContent.hide(); $(this).addClass("sel"); //And display the clicked tab var current = tabs.index($(this)); tabContent.eq(current).show(); }); }); } }); })(jQuery);
You will also need some CSS to actually make your <ul> look like tabs.
Tab number one
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Next tab
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Last tab
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.相关文章推荐
- 一个基于jquery的智能提示控件intellSeach.js
- js/jquery写的一个定制对话框控件
- VS使用验证控件出现“WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分
- jquery 判断一个控件的的类型
- 用jQuery创建一个可编辑的SELECT下拉控件(HTML/CSS)
- 一个不错的Jquery日期文本框选择控件
- 使用jquery当页面打开时,将一个事件绑定到控件(同时执行两个事件),并修改加载样式类中的样式
- jQuery给指定的控件获取一个值
- jQuery选择器的过滤器,即对选择的结果再进行一个过滤(如我不想要在<div id="test"></div>这里的input控件)
- 一个基于JQuery的日历时间控件
- jquery.validate 验证控件的 一个 api 文档 ,希望对有用到的朋友 起到一点作用
- jquery 两个控件同享一个function
- 生成jQuery simple treeview所需html的一个小控件
- 不能使用ASP.NET验证控件---WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptRes
- jQuery的插件datatables,一个bootstrap风格的表格控件
- 自己使用js/jquery写的一个定制对话框控件
- 一个模仿HTML5功能的jquery控件
- 一个模仿HTML5功能的jquery控件
- jquery一个控件绑定多个事件
- jquery bootgrid 一个很好的 数据控件,可用于任何语言