집 > 기사 > 웹 프론트엔드 > jQuery를 사용한 컴포넌트 개발의 전체 예제에 대한 자세한 설명

jQuery를 사용한 컴포넌트 개발의 전체 예제에 대한 자세한 설명

黄舟원래의: 2017-03-18 15:01:331428검색

컴포넌트 개발을 위해 jQuery를 사용하는 원칙과 프레임워크를 사용하지 않고 순수 JavaScript 스크립트를 사용하는 원칙은 기본적으로 유사하며, 특히 공개 메소드의 구성은 동일합니다.

차이점은 jQuery는 플러그인 메커니즘을 사용하여 $()를 통해 작업 개체(DOM 요소)를 직접 바인딩한 다음 이벤트를 DOM 요소 또는 HTML 코드에 바인딩한다는 것입니다.

또 다른 차이점은 jQuery가 DOM 개체를 생성하고 지정된 DOM 개체를 빠르게 검색하는 등의 도구로 사용된다는 점입니다.

예제 테스트를 통과했습니다.

페이지 추가 및 페이지 선택 기능만 구현한 간단한 기본 예제입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Design JS component with jQuery </title>
<script src="mx/scripts/lib/jquery.js" type="text/javascript"></script>
<link href="tabs.css" rel="stylesheet" type="text/css" />

 <style>
      
.tabsp{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;}
.tabsp ul{
	width: 500px;height: 20px;
	list-style: none;
	
	margin-bottom: 0px;margin: 0px;
	padding: 0px;
	border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-top:solid 1px #ffffff;border-bottom:solid 1px #e0e0e0;
}

.tabsp p{
	width: 500px;height: 330px;
	background-color: #ffffff; 
	border:solid 1px #e0e0e0;
}


.tabsSeletedLi{
	width: 100px;height: 20px;
	background-color: white;
	float: left;
	text-align: center;
	border-left:solid 1px #e0e0e0;border-right:solid 1px #e0e0e0;border-top:solid 1px #e0e0e0;border-bottom:solid 1px #ffffff;
}

.tabsSeletedLi a{
	width: 100px;
	height: 20px;
	color:#000000;
	text-decoration:none;
}

.tabsUnSeletedLi{
	width: 100px;height: 20px;
	background-color: #e0e0e0; 
	float: left;
	text-align: center;
	border:solid 1px #e0e0e0;
}

.tabsUnSeletedLi a{
	width: 100px;height: 20px;
	color: #ffffff;
	text-decoration:none;
}
 
 </style>   
</head>

<body>
<!--
	<p style="width:400px;height:100px;border:solid 1px #e0e0e0;">
	
	</p>
-->

    <!--tabs示例-->
    <p id="mytabs">
        <!--选项卡区域-->
        <ul>
            <li><a href="#tabs1">选项1</a></li>
            <li><a href="#tabs2">选项2</a></li>
            <li><a href="#tabs3">选项3</a></li>
        </ul>
        <!--面板区域-->
        <p id="tabs1">11111</p>
        <p id="tabs2">22222</p>
        <p id="tabs3">33333</p>
    </p>
    
<script lang="javascript">
(function ($) {
    $.fn.tabs = function (options) {
    	var me = this;
    
		//使用鼠标移动触发，亦可通过click方式触发页面切换
        var defualts = { switchingMode: "mousemove" };

		//融合配置项
        var opts = $.extend({}, defualts, options);

		//DOM容器对象，类似MX框架中的$e
        var $e = $(this);
        
        //选中的TAB页索引
        var selectedIndex = 0;
        
        //TAB列表
        var $lis;

		//PAGE容器
		var aPages = [];


		//初始化方法
		me.init = function(){
		
			//给容器设置样式类
	        $e.addClass("tabsp");	 
	        
	        $lis = $("ul li", $e);
	        
	        //设置TAB头的选中和非选中样式
	        $lis.each(function(i, dom){
	        	if(i==0){
	        		$(this).addClass("tabsSeletedLi")
	        	}else{
	        		$(this).addClass("tabsUnSeletedLi");
	        	}
	        
	        });
	        
	       	//$("ul li:first", $e).addClass("tabsSeletedLi");
	        //$("ul li", $e).not(":first").addClass("tabsUnSeletedLi");
			//$("p", $e).not(":first").hide();
			
			//TAB pages绑定
			var $pages = $(&#39;p&#39;, $e);
			$pages.each(function(i, dom){
				if(i == 0){
					$(this).show();
				}else{
					$(this).hide();
				}
				
				aPages.push($(this));		
			});
	        
	        
	        
			//绑定事件
	        $lis.bind(opts.switchingMode, function() {
	        	var idx = $lis.index($(this))
	            me.selectPage(idx);
	        });		
		
		}
		

		/**
		 *  选中TAB页
		 *
		 */
		me.selectPage = function(idx){
			if (selectedIndex != idx) {	                
                $lis.eq(selectedIndex).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");
                $lis.eq(idx).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");
                
                aPages[selectedIndex].hide();
	            aPages[idx].show();
                selectedIndex = idx;
            };
		}
        
        
        me.showMsg = function(){
        	alert(&#39;WAHAHA!&#39;);
        }
        
		//自动执行初始化函数
		me.init();
		
		//返回函数对象
		return this;
    };
})(jQuery);

</script>   

<script type="text/javascript">
/*
    $(function () {
        $("#mytabs").tabs;
    });
*/


	var tab1 =  $("#mytabs").tabs();
	tab1.showMsg();
</script> 
</body>
</html>

최종 효과는 그림과 같습니다.

위 내용은 jQuery를 사용한 컴포넌트 개발의 전체 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript 구성요소 개발을 위한 완전한 샘플 코드 공유다음 기사：JavaScript 구성요소 개발을 위한 완전한 샘플 코드 공유