Complete sample code sharing for developing JavaScript components
Use JavaScript to build components according to Object-oriented ideas.
Now take building a TAB component as an example.
Functionally speaking, components include visual parts and logical control parts; from code structure speaking, components include code parts and resource parts (styles, pictures, etc.).
Features of components: high cohesion, low coupling (does not intersect with other code logic, can be inherited and included); encapsulation (hide private methods and variables); reusability (can be used repeatedly, used to assemble more complex applications).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS 组件</title>
<style>
.TabControl{
position:absolute;
}
.TabControl .tab-head{
height:22px;width:100%;
/* border-left: solid 0px #e0e0e0;border-right: solid 0px #e0e0e0;border-top: solid 0px #e0e0e0;border-bottom: solid 1px #e0e0e0; */
position:absolute;
z-index:9;
}
.TabControl ul{
position:absolute;
top:2px;
padding:0px;
margin:0px;
z-index:10;
}
.TabControl li{
list-style:none; /* 将默认的列表符号去掉 */
padding-left:10px; padding-right:10px;
margin:0;
float:left;
border: solid 1px #e0e0e0;
background-color:#ffffff;
height:20px;
cursor:default;
}
.TabControl li.selected{
border-bottom: solid 1px #ffffff;border-top: solid 1px #ff0000;
z-index:10;
}
.TabControl li.unselected{
border-bottom: solid 1px #e0e0e0;border-top: solid 1px #e0e0e0;
z-index:10;
}
.TabControl .pageSelected{
position:absolute;
display:block;
border: solid 1px #e0e0e0;
width:100%;height:100%;
z-index:1;
top:23px;
}
.TabControl .pageUnSelected{
display:none;
border: solid 1px #e0e0e0;
width:100%;height:100%;
z-index:1;
top:23px;
}
</style>
</head>
<body>
<script lang="javascript">
var TabControl = function(width, height){
var me = this;
//TAB控件容器，头，列表
var cbody,tabHead, ul;
//最后选中的TAB页
var lastSelectedPage = 0;
//TAB页管理容器
var pages = [];
/**
* 初始化函数
* param{tabCount}, 创建tab页的个数
*/
me.init = function(tabCount){
//创建TAB容器
cbody = document.createElement("p");
cbody.className = "TabControl";
cbody.style.width = width || "400px";
cbody.style.height = height || "300px";
//创建TAB控件头
tabHead= document.createElement("p");
tabHead.className = "tab-head";
cbody.appendChild(tabHead);
//创建TAB头
ul = document.createElement("UL");
tabHead.appendChild(ul);
//根据参数初始化TAB页，缺省创建2个TAB页
var tc = tabCount || 2;
for(var i=0;i<tc;i++){
me.insertPage(i,"tabPage" + i)
}
//缺省选中第一页
me.selectPage(0);
}
/**
* 插入TAB页
* param{idx},插入位置
* param{title},TAB页标题
*
*/
me.insertPage = function(idx,title){
if(parseInt(idx)>=0){
var li = document.createElement("LI");
li.className = "unselected";
li.innerText = title;
var chd = ul.childNodes[idx];
ul.insertBefore(li);
li.onclick = function(){
me.selectPage(getSelectedIndex(li));
}
//创建page
var page = document.createElement("p");
page.className = "pageUnSelected";
pages.push(page);
cbody.appendChild(page);
}
}
/*
* 内部函数
* 根据选中的对象，获取对应的TAB页索引
*/
function getSelectedIndex(li){
var chd = ul.childNodes;
for(var i=0;i<chd.length;i++){
if(chd[i] == li){
return i;
}
}
}
/**
* 选中某页
* param{idx},选中页的索引
*/
me.selectPage = function(idx){
if(parseInt(idx)>=0){
var lis = ul.childNodes;
alert(lastSelectedPage + ',' + idx);
lis[lastSelectedPage].className = "unselected";
lis[idx].className = "selected";
/*
for(var i=0;i<lis.length;i++){
if( i== idx){
lis[i].className = "selected";
} else{
alert('B:'+ i + ',' + lis[idx].innerText);
lis[i].className = "unselected";
}
}
*/
//隐藏无需显示的TAB页，显示选中的TAB页
pages[lastSelectedPage].className = "pageUnSelected";
pages[idx].className = "pageSelected";
lastSelectedPage = idx;
}
}
//在函数尾部调用初始化函数执行初始化
me.init();
//最后返回DOM对象
return cbody;
}
var tabControl = new TabControl();
document.body.appendChild(tabControl);
</script>
</body>
</html>
The final effect is as shown below:
The above is the detailed content of Complete sample code sharing for developing JavaScript components. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1658
14
1415
52
1309
25
1257
29
1231
24
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
How to open the settings of the old version of win10 components
Dec 22, 2023 am 08:45 AM
Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
