jquery插件实例

最新推荐文章于 2022-06-21 20:05:35 发布

爱殁心死

最新推荐文章于 2022-06-21 20:05:35 发布

阅读量239

点赞数

分类专栏： web前端文章标签： jquery插件 js

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
jquery插件实例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 03_select *{ padding:0px; margin: 0px; font-size: 12px; } body { padding: 40px
复制链接

扫一扫