jquery插件实例
来源:互联网 发布:录屏直播软件 编辑:程序博客网 时间:2024/05/22 12:23
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>03_select</title><meta name="author" content="Administrator" /><style type="text/css">*{padding:0px;margin: 0px;font-size: 12px;}body {padding: 40px;}.topicList {width:300px;border:1px solid #999;}.topicList li {list-style: none;padding:8px 0px;margin-left:10px;border-bottom:1px dotted #aaa; }.topicList h3 {height:35px;background: #347;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}.topicList h3 span {position: relative;left:15px;top:10px;}</style><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript" src="jquery.util.topic.js"></script><script type="text/javascript">$(function() {$(".topicList h3").toggle(topicHandler,topicHandler);// $(".topicList li").each(function(n){// $(this).html($.fixedTopicWidth($(this).html(),{// length:21,// fill:".",// fillLength:5// }));// });$(".topicList li").formatTopic({length:23});$(".topicList li").setColor();function topicHandler() {//使用fadeIn,show,slideDown可以完成某个容器的显示//使用fadeOut,hide,slideUp可以完成某个容器的隐藏//所以可以通过各个的toggle来完成两个之间的轮换$(this).next("ul").fadeToggle(1000);}});</script></head><body><div class="topicList"><h3><span>学习天地</span></h3><ul><li>关于想学习的两款手机基金经理考虑的两款手机基金经理考虑的两款手机基金经理考虑</li><li>斯蒂格撒旦发撒旦发撒旦发生的撒旦发</li><li>撒旦发十分反感斯蒂芬斯蒂芬斯蒂芬</li><li>是法国撒旦发生的顿发生的发生的的方式的</li><li>地方根深蒂固是否斯蒂芬斯蒂芬斯蒂芬</li><li>凡撒旦发撒旦发撒旦的方式的地方上的</li><li>想法告诉师傅第三方斯蒂芬斯蒂芬方式的地方</li><li>是德国撒旦发撒旦发撒旦发撒旦发发生的</li><li>身份告诉对方身份的撒旦发撒旦发撒旦</li></ul></div></body></html>
(function($){$.fixedTopicWidth = function(str,options) {var setting = $.extend({length:50,fill:null,fillLength:3},options||{})//(abcddddddddddddddddd,12,".")-->(abcdddddd...)var pos = setting.length-str.length;if(pos>0) {return str;} else {if(setting.fill) {var fs = "";for(var i=0;i<setting.fillLength;i++) {fs=fs+setting.fill;}return (str.substr(0,setting.length-3)+fs);} else {return str.substr(0,setting.length);}}};$.fn.formatTopic = function(options) {this.each(function(n){//这个时候的this就不再是包装集对象,而是这个闭包对象//此时闭包对象中的引用是一个html的节点,要访问就需要使用$(this)$(this).html($.fixedTopicWidth($(this).html(),options));});}/** * 使用$.fn来创建包装集插件 */$.fn.setColor = function(){//此时的this对象指的是整个包装集对象,已经被封装为包装集//就不用在使用$(this)来封装this.css("color","#0f0");//基于包装集的函数一定要能够支持链式结构return this;}/** * 如果state为true就表示readOnly,否则表示取消readonly */$.fn.setReadOnly = function(state) {//1、找到所有的文本框return this.filter("input:text").prop("readOnly",state).css("opacity",state?0.5:1.0);}})(jQuery)
————引自孔浩老师jquery视频教程
0 0
- jQuery插件应用实例
- jQuery插件实例集合
- jquery插件开发实例
- jquery插件实例
- jQuery插件开发实例
- jQuery插件扩展实例
- jquery插件及大量实例
- jquery 插件 validate 的实例
- jquery插件tooltip应用实例[实例]
- Jquery插件学习网页和实例下载
- jQuery插件Clock的五个实例
- jquery表格插件datatables应用实例
- 推荐如何手写jQuery插件教程实例
- jQuery右键菜单contextMenu插件使用实例
- jquery ui 插件实例 (1)
- jquery ui 插件实例 (2)
- jquery ui 插件实例 (3)
- jquery ui 插件实例 (4)
- java+oracle+web(第八天) java 基础课程(二) 多线程同步和死锁(2个线程、四个线程)
- 第二次作业:MySQL数据库及Java操作MySQL数据库
- 优化Android本地文档中的加载速度
- Windows下构建robotium+jenkins+TMTS可持续集成自动化测试
- 文件分割与合并(Java)
- jquery插件实例
- Color the ball
- java 类型
- php下载文件
- opencms8.0.1添加默认文件名
- JDBC中按条件查询数据时ResultSet一直为空
- 无敌大帅杜的编程之道0
- 百度之星2015资格赛#1002
- 第11周 项目1-2 存储班长信息的学生类(2)