색상 선택기
43976 단어 htmljavascriptprogrammingwebdev
CompactDOM 스크립트 색상 선택기
버전: 1.0, 2022-04-08
저자: Vladimir Kheifets [email protected]
Copyright © 2022 블라디미르 케이페츠 All Rights Reserved
CompactDOM on GitHub
Online-tutorial of the Java Script Library CompactDOM
Color Picker CompactDOM script on GitHub
Color Picker Demo
index.html
<html>
<head>
<script type="text/javascript" src="CompactDOM.min.js"></script>
<script type="text/javascript" src="js/index.min.js"></script>
</head>
<body></body>
</html>
CompactDOM 스크립트 index.js
/*
The 'ready' method with default selelector 'window' calls an anonymous function
after the page is fully loaded
*/
__.ready( () => {
//Defining 'head' and 'body' elements
body = _("body");
head = _("head");
/*
The 'create' method creates a child element 'title' in the parent element 'head'
<title>Color picker</title>
*/
head.create( "Color picker", {tag:"title"} );
/*
The 'link' method with default selelector 'head' creates two child
elements 'link' in the parent element 'head'
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/modal.css" rel="stylesheet" type="text/css">
*/
__.link("css/index.css,css/modal.css");
/*
The 'create' method creates a child element 'meta' in the parent element 'head'
<meta charset="utf-8">
*/
head.create(1,{ tag:"meta", charset:"utf-8" });
/*
The 'create' method creates a child element 'meta' in the parent element 'head'
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
user-scalable=no, user-scalable=0">
*/
head.create(1,
{
tag:"meta",
name:"viewport",
content:"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, user-scalable=0"
});
/*
The 'create' method with default selelector 'body' creates a child element 'div'
in the parent element 'body' and defining 'div' element
<div align="center"></div>
*/
div = __.create(1,{tag:"div", align:"center"});
/*
The 'create' method creates a child element 'div' in the parent element 'div'
and defining 'divColorPicker' element
<div id="color_picker"></div>
*/
divColorPicker = div.create(1,{tag:"div", id:"color_picker"});
/*
The 'create' method creates five child elements 'span' in the parent element 'divColorPicker'
<div id="color_picker">
<span class="bgc" title="Click me">
<span class="bgc" title="Click me">
<span class="bgc" title="Click me">
<span class="bgc" title="Click me">
<span class="bgc" title="Click me">
</div>
*/
divColorPicker.create( 5, { tag:"span", class:"bgc", title:"Click me" } );
/*
The 'create' method creates a child element 'div' in the parent element 'div'
and defining 'colorCode' element
<div></div>
*/
colorCode = div.create( 1, {tag:"div"} );
/*
The 'hide' method makes the 'colorCode' element invisible.
<div style="display:none"></div>
*/
colorCode.hide();
// Defining 'colors' array
colors = [ "FFFFFF", "F7F7F7", "FFF8F7", "FFFDDE", "F9FEF6" ];
/*
The 'each' method calls an anonymous function for each 'span' elements
with selector '.bgc' (NodeList)
this function defining each element - 'el' and index of element - 'ind'
*/
_(".bgc").each( ( el, ind ) => {
/*
The 'scc' method addes to each element the attribute style="background-color:"
The value of color for each attribute is determined from the 'colors[ind]'
<span class="bgc" title="Click me" style="background-color:#FFFFFF"></span>
<span class="bgc" title="Click me" style="background-color:#F7F7F7"></span>
...
<span class="bgc" title="Click me" style="background-color:#F9FEF6"></span>
*/
el.css("background-color:#"+colors[ind]);
/*
The 'create' method creates a child element 'input' in the each parent element 'el'
and defining 'inp' element
<span class="bgc" title="Click me" style="background-color:#FFFFFF">
<input type="color" value="#FFFFFF">
</span>
<span class="bgc" title="Click me" style="background-color:#F7F7F7">
<input type="color" value="#F7F7F7">
</span>
...
<span class="bgc" title="Click me" style="background-color:#F9FEF6">
<input type="color" value="#F9FEF6">
</span>
*/
inp = el.create(1,{tag:"input", type:"color", value:"#"+colors[ind]});
//The 'on' method with the 'inp' selector handles the 'input' event and calls the anonymous function
inp.on("input", (e) => {
//The 'hide' method makes the 'colorCode' element unvisible.
colorCode.hide();
/*
The 'val' method with the 'e.target' selector returns the color code
and defines the 'color' variable.
The 'toUpperCase' method of native js converts the value
of the variable 'color' to uppercase
*/
color = _(e.target).val();
color = color.toUpperCase();
//Defining 'selectors' array
selectors = [el, body, _modal];
/*
The 'scc' method for each selector from the "selector" array is
addes attribute the style="background-color:", or
changes the previously defined value of this attribute.
*/
for(i in selectors) selectors[i].css("background-color:" + color );
//Defining 'modalContent' variable
modalContent = "<div>Selected color code: " + color + "</div>";
modalContent += "<button>Copy code to clipboard</button>";
modalContent += "<button>Send</button>";
/*
Method 'modal' with default selector '#modal'
displays a modal window with the content from
the variable 'modalContent'
*/
__.modal(modalContent);
/*
The 'click' method for the 'button' selector
(two buttons in a modal window) handles the 'click'
event and calls an anonymous function.
*/
_("button").click((eB) => {
/*
The 'content' method for the 'eB.target' selector
returns the content of the element.
*/
if(_(eB.target).content() === "Send")
{
/*
The "send" button was clicked
Defining 'colorsCode' object
*/
colorsCode={};
/*
The 'each' method calls an anonymous function for each 'input' elements
this function defining each element - 'elmInput' and index of element - 'ind'
*/
_("input").each((elmInput, indInp) => {
/*
The "val" method returns the value of each "input" element.
Defining the properties of the 'colorsCode' object
*/
color = elmInput.val()
color = color.toUpperCase();
//Defining the properties(key:value) of the 'colorsCode' object
colorsCode["color"+indInp] = color;
});
/*
The "send" method creates a 'formData' object from
the "colorsCode" object and send AJAX Post Request whith default
request type - 'FormData' to server(url:"selectedColors.php")
and returns AJAX Response with default response type - 'text'
to callback function.
In this function, the 'css' method changes the background color
to 'white' and then the 'modal' method displays
the AJAX Response in a modal window.
*/
__.send(
{
url:"selectedColors.php",
method:"post",
data:colorsCode,
func:(rsp)=>{
_modal.css("background-color:white");
__.modal(rsp);
}
}
);
}
else
{
/*
The "Copy color code to clipboard" button was clicked
The code of the selected color will be copied to the clipboard
*/
navigator.clipboard.writeText(color);
//The content of the 'colorCode' element is created
colorCodeContent = "<br>Color code in clipbord: " + color;
colorCodeContent += "<button>Clear clipboard</button>";
colorCode.content(colorCodeContent);
/*
The 'click' method for the 'button' selector
(buttons in colorCodeContent) handles the 'click'
event and calls an anonymous function.
*/
_("button").click(()=>{
// Сlear clipboard data
navigator.clipboard.writeText("");
//The 'hide' method makes the 'colorCode' element unvisible.
colorCode.hide();
});
// The 'show' method makes the colorCode element visible.
colorCode.show();
}
// The 'modal' method with a parameter of '0' immediately closes the modal window.
__.modal(0);
});
});
});
/*
The 'modal' method without parameters only creates the HTML code of the modal window,
but does not display it.
<div id="modal" class="modal" style="opacity: 0; transition-property: opacity;
transition-duration: 600ms; transition-timing-function: cubic-bezier(0.02, 0.01, 0.47, 1);">
<div class="modal_close">×</div>
<div id="modal_content" class="modal_content"></div>
</div>
<div id="modal_gray_layer" class="modal_gray_layer"></div>
*/
__.modal();
//Outputs a current html-document to the web console
console.log(document.documentElement);
});
생성된 태그가 있는 HTML 문서
<html>
<head>
<script type="text/javascript" src="CompactDOM.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Color picker</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/modal.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no, user-scalable=0">
</head>
<body>
<div align="center">
<div id="color_picker">
<span class="bgc" title="Click me" style="background-color:#FFFFFF">
<input type="color" value="#FFFFFF">
</span>
<span class="bgc" title="Click me" style="background-color:#F7F7F7">
<input type="color" value="#F7F7F7">
</span>
<span class="bgc" title="Click me" style="background-color:#FFF8F7">
<input type="color" value="#FFF8F7">
</span>
<span class="bgc" title="Click me" style="background-color:#FFFDDE">
<input type="color" value="#FFFDDE">
</span>
<span class="bgc" title="Click me" style="background-color:#F9FEF6">
<input type="color" value="#F9FEF6">
</span>
</div>
<div style="display:none"></div>
</div>
<div id="modal" class="modal" style="opacity: 0; transition-property: opacity;
transition-duration: 600ms; transition-timing-function: cubic-bezier(0.02, 0.01, 0.47, 1);">
<div class="modal_close">×</div>
<div id="modal_content" class="modal_content">
</div>
</div>
<div id="modal_gray_layer" class="modal_gray_layer"></div>
</body>
</html>
selectedColors.php(AJAX 포스트 요청)
<?
echo <<<HTML
<style>
.allColors{width:320px}
.title{font-size: 18px;line-height: 25px;margin-bottom: 20px;}
.post{
border:1px solid #000000;
margin:10 0 10 0;
padding:10px;
text-align:center}
</style>
<div style="allColors">
<div class='title'>PHP script selectedColors.php<br>
AJAX Post Request was<br>reseived from index.html</div>
HTML;
foreach($_POST as $key=>$value)
echo <<<HTML
<div class = 'post' style="background-color:$value">
\$_POST['$key'] = $value
</div>
HTML;
?>
</div>
index.css
body, div{
font-family:arial;
font-size:14px;
}
button{margin:20 10 20 10}
.bgc{
display: inline-block;
border: 1px solid #aaa;
border-radius:5px;
width: 20px;
height: 20px;
margin: 0 10 0 10;
cursor: pointer;
}
input[type="color"] {
opacity: 0;
display: block;
width: 20px;
height: 20px;
border: none;
cursor: pointer;
}
#color_picker, #color_picker + div{
display: block;
padding: 20 0 20 0;
background-color: white;
text-align: center;
width: 230px;
border: 1px solid #aaa;
border-radius:5px;
box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5)
}
#color_picker + div{margin-top:20px;}
.modal_content{width: 250px}
모달.css
.modal{
position:absolute;
z-index:1;
top:0;
left:0;
background-color: #ffffff;
border: 1px solid #85A0C9;
border-radius: 5px;
box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
}
.modal_content{
display:table-cell;
text-align:center;
padding:40 20 20 20;
font-size:14pt;
}
.modal_close{
font-family: Courier;
color:#aaa;
cursor:pointer;
font-size:50px;
position:absolute;
right:0;
top:0;
margin:-0.2em 0.3em 0 0;
caret-color:transparent;
width: 20px;
}
.modal_close:hover
{color:#FFCCD9;caret-color:transparent;}
.modal_gray_layer{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background: rgba(0, 0, 0, 0.1);
display:none;
}
Reference
이 문제에 관하여(색상 선택기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vladimirkheifets/color-picker-2gjc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
