🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

chax

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

chax - npm Package Compare versions

Comparing version
0.0.2
 to
0.0.3
+15
src/css/chax-back-top.css
.chax-back-top{
position:fixed;
top:200px;
left:50%;
transform: translateX(100px);
cursor: pointer;
z-index: 10;
padding:0.4em 0.8em;
box-shadow: 0 8px 15px rgba(47, 63, 95, 0.1);
}
.chax-back-top:hover{
color:#0057FF;
background: #F6F7F9;
}
+33
src/css/chax-base.css
/*clear default style*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
button:focus{
outline:none;
}
input:focus{
outline:none;
}
ul,ol{
list-style:none;
}
a{
color:currentColor;
text-decoration: none;
}
/*iconfont.cn style*/
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
+24
src/css/chax-dropdown.css
.chax-dropdown{
width:160px;
background: #FFF;
box-shadow:0 8px 15px rgba(47,63,95,0.1);
}
.chax-dropdown .chax-dropdown-item{
width:100%;
display:flex;
justify-content: flex-start;
align-items: center;
height:34px;
color:#171718;
font-size: 14px;
padding:10px 0 10px 16px;
background: #FFF;
cursor:pointer;
}
.chax-dropdown .chax-dropdown-item:hover,
.chax-dropdown .chax-dropdown-item.active{
background: #F6F7F9;
color: #0057FF;
}
+27
src/css/chax-list.css
.chax-list{
display:flex;
justify-content: flex-start;
align-items: center;
flex-wrap:wrap;
width:1200px;
background: #FFF;
margin-left:-6px;
margin-right:-6px;
}
.chax-list .chax-list-item{
margin:6px 6px;
padding:0.4em 0.8em;
color:#171718;
font-size: 14px;
white-space: nowrap;
cursor:pointer;
background: #FFF;
border-radius: 2px;
}
.chax-list .chax-list-item:hover,
.chax-list .chax-list-item.active{
color: #0057FF;
background: #E5EEFF;
}
+185
src/css/chax-nav.css
.chax-nav{
height:70px;
display:flex;
justify-content: center;
align-items: center;
padding:0 20px;
box-shadow: 0 8px 15px rgba(47,63,95,0.1);
}
.chax-nav .chax-nav-item{
height:100%;
display:flex;
padding:0 20px;
justify-content: center;
align-items: center;
}
.chax-nav .chax-nav-item.chax-nav-search{
flex-grow: 1;
}
.chax-nav .chax-nav-item:hover{
cursor:pointer;
}
.chax-nav .chax-nav-item:hover .chax-nav-text{
cursor:pointer;
color:#0057FF;
}
.chax-search-box{
width:100%;
height:40px;
display: flex;
justify-content: center;
align-items: center;
position:relative;
}
.chax-search-box .chax-search-option{
position:absolute;
top:50%;
left:0;
z-index:15;
transform: translateY(-50%);
padding:0 20px;
height:100%;
display: flex;
justify-content: center;
align-items: center;
color:#96999E;
font-size:15px;
}
.chax-search-box .chax-search-option:hover{
cursor:pointer;
}
.chax-search-box .chax-search-option .chax-select-show{
white-space: nowrap;
}
.chax-search-box .chax-search-option .chax-option-dropdown{
position:absolute;
top:100%;
left:50%;
transform: translateX(-50%);
width:160px;
background: #FFF;
box-shadow:0 8px 15px rgba(47,63,95,0.1);
padding:10px 0;
display:none;
}
.chax-search-box .chax-search-option:hover .icon-dropdown{
transform: rotateZ(180deg);
}
.chax-search-box .chax-search-option .chax-option-dropdown.active{
display:block;
}
.chax-search-box .chax-search-option .chax-option-dropdown .chax-option-dropdown-item{
width:100%;
display:flex;
justify-content: flex-start;
align-items: center;
height:34px;
color:#171718;
font-size: 14px;
padding-left:16px;
background: #FFF;
cursor:pointer;
}
.chax-search-box .chax-option-dropdown .chax-option-dropdown-item:hover,
.chax-search-box .chax-option-dropdown .chax-option-dropdown-item.active{
background: #F6F7F9;
color: #0057FF;
}
.chax-search-box label{
width:100%;
height:100%;
}
.chax-search-box input{
width:100%;
height:100%;
padding-left:115px;
background: #F1F3F5;
border:none;
font-size:15px;
border-radius:4px 0 0 4px;
}
.chax-search-box input:hover,
.chax-search-box input:focus{
box-shadow: inset 0 0 0 2px #0057FF;
}
.chax-search-box .chax-search-button{
width: 90px;
background: #0057FF;
border-radius: 0 4px 4px 0;
color: #FFFFFF;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.chax-search-box .chax-search-button:hover{
opacity: 0.8;
}
.chax-search-box .chax-search-button .icon.icon-search{
transform: translateY(1px);
margin-right:2px;
}
.chax-search-box .chax-clear-input{
position:absolute;
top:50%;
right:100px;
transform: translateY(-50%);
color:#171718;
cursor:pointer;
}
.chax-search-box .chax-search-popover{
position:absolute;
display:none;
z-index:10;
top:100%;
left:0;
width:100%;
background: #FFF;
box-shadow:0 8px 15px rgba(47,65,93,0.1);
cursor: default;
}
.chax-search-box .chax-search-popover.active{
display:block;
}
.chax-search-box .chax-search-popover .pop-content{
display:none;
width:100%;
justify-content: flex-start;
align-items: center;
height:34px;
color:#171718;
font-size: 14px;
padding:10px 0 10px 16px;
background: #FFF;
cursor:pointer;
}
.chax-search-box .chax-search-popover .pop-content.active-flex{
display:flex;
}
.chax-search-box .chax-search-popover .pop-content.active,
.chax-search-box .chax-search-popover .pop-content:hover{
background: #F5F7F9;
color: #0057FF;
}
+21
src/css/chax-popover.css
.chax-popover-parent{
position:relative;
outline:none;
display: inline-block;
}
.chax-popover-parent .chax-popover{
position:absolute;
display:none;
z-index:10;
top:100%;
left:0;
width:150px;
height:150px;
background: tan;
}
.chax-popover-parent:hover .chax-popover,
.chax-popover-parent .chax-popover.active{
display:block;
}
+20
src/css/chax-suspension.css
.chax-suspension{
position: fixed;
z-index:20;
bottom:20px;
right:20px;
background: tan;
animation: 3s linear infinite chax-suspension-float;
}
@keyframes chax-suspension-float {
0% {
transform: translate(0,0);
}
50% {
transform: translate(0,-20%);
}
100% {
transform: translate(0,0);
}
}
+44
src/css/chax-tab.css
.chax-tab{
display:flex;
justify-content: center;
align-items: stretch;
flex-direction: row;
width:400px;
height:200px;
}
.chax-tab .chax-tab-nav{
display:flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: column;
width:100px;
background: #DDD;
}
.chax-tab .chax-tab-nav-item{
background: #CCC;
}
.chax-tab .chax-tab-nav-item.active{
cursor:pointer;
background: tan;
}
.chax-tab .chax-tab-panel{
display:flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.chax-tab .chax-tab-panel-item{
display:none;
flex-grow: 1;
height:100%;
background: #EEE;
}
.chax-tab .chax-tab-panel-item.active{
display:block;
}
+37
src/css/chax-tooltip.css
.chax-tooltip-parent{
position:relative;
outline:none;
display: inline-block;
}
.chax-tooltip-parent .chax-tooltip{
position:absolute;
display:none;
z-index:10;
top:100%;
left:50%;
transform: translate(-50%,10px);
padding:0.25rem 0.5rem;
white-space: nowrap;
border-radius: 4px;
background: #000;
color:#FFF;
font-size:14px;
}
.chax-tooltip-parent:hover .chax-tooltip,
.chax-tooltip.active{
display:block;
}
.chax-tooltip-parent .chax-tooltip::after{
content:'';
position:absolute;
z-index: -1;
bottom:100%;
left:50%;
transform: translate(-50%,10px) rotateZ(45deg);
width:14px;
height:14px;
background: #000;
}
+121
src/demos/chax-back-top.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ChaxBackTop</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-back-top.css">
</head>
<body>
<div class="chax-back-top">回到顶部</div>
<div style="text-align: center">
<div>这是一段很长的文本1</div>
<div>这是一段很长的文本2</div>
<div>这是一段很长的文本3</div>
<div>这是一段很长的文本4</div>
<div>这是一段很长的文本5</div>
<div>这是一段很长的文本6</div>
<div>这是一段很长的文本7</div>
<div>这是一段很长的文本8</div>
<div>这是一段很长的文本9</div>
<div>这是一段很长的文本10</div>
<div>这是一段很长的文本11</div>
<div>这是一段很长的文本12</div>
<div>这是一段很长的文本13</div>
<div>这是一段很长的文本14</div>
<div>这是一段很长的文本15</div>
<div>这是一段很长的文本16</div>
<div>这是一段很长的文本17</div>
<div>这是一段很长的文本18</div>
<div>这是一段很长的文本19</div>
<div>这是一段很长的文本20</div>
<div>这是一段很长的文本21</div>
<div>这是一段很长的文本22</div>
<div>这是一段很长的文本23</div>
<div>这是一段很长的文本24</div>
<div>这是一段很长的文本25</div>
<div>这是一段很长的文本26</div>
<div>这是一段很长的文本27</div>
<div>这是一段很长的文本28</div>
<div>这是一段很长的文本29</div>
<div>这是一段很长的文本30</div>
<div>这是一段很长的文本31</div>
<div>这是一段很长的文本32</div>
<div>这是一段很长的文本33</div>
<div>这是一段很长的文本34</div>
<div>这是一段很长的文本35</div>
<div>这是一段很长的文本36</div>
<div>这是一段很长的文本37</div>
<div>这是一段很长的文本38</div>
<div>这是一段很长的文本39</div>
<div>这是一段很长的文本40</div>
<div>这是一段很长的文本41</div>
<div>这是一段很长的文本42</div>
<div>这是一段很长的文本43</div>
<div>这是一段很长的文本44</div>
<div>这是一段很长的文本45</div>
<div>这是一段很长的文本46</div>
<div>这是一段很长的文本47</div>
<div>这是一段很长的文本48</div>
<div>这是一段很长的文本49</div>
<div>这是一段很长的文本50</div>
<div>这是一段很长的文本51</div>
<div>这是一段很长的文本52</div>
<div>这是一段很长的文本53</div>
<div>这是一段很长的文本54</div>
<div>这是一段很长的文本55</div>
<div>这是一段很长的文本56</div>
<div>这是一段很长的文本57</div>
<div>这是一段很长的文本58</div>
<div>这是一段很长的文本59</div>
<div>这是一段很长的文本60</div>
<div>这是一段很长的文本61</div>
<div>这是一段很长的文本62</div>
<div>这是一段很长的文本63</div>
<div>这是一段很长的文本64</div>
<div>这是一段很长的文本65</div>
<div>这是一段很长的文本66</div>
<div>这是一段很长的文本67</div>
<div>这是一段很长的文本68</div>
<div>这是一段很长的文本69</div>
<div>这是一段很长的文本70</div>
<div>这是一段很长的文本71</div>
<div>这是一段很长的文本72</div>
<div>这是一段很长的文本73</div>
<div>这是一段很长的文本74</div>
<div>这是一段很长的文本75</div>
<div>这是一段很长的文本76</div>
<div>这是一段很长的文本77</div>
<div>这是一段很长的文本78</div>
<div>这是一段很长的文本79</div>
<div>这是一段很长的文本80</div>
<div>这是一段很长的文本81</div>
<div>这是一段很长的文本82</div>
<div>这是一段很长的文本83</div>
<div>这是一段很长的文本84</div>
<div>这是一段很长的文本85</div>
<div>这是一段很长的文本86</div>
<div>这是一段很长的文本87</div>
<div>这是一段很长的文本88</div>
<div>这是一段很长的文本89</div>
<div>这是一段很长的文本90</div>
<div>这是一段很长的文本91</div>
<div>这是一段很长的文本92</div>
<div>这是一段很长的文本93</div>
<div>这是一段很长的文本94</div>
<div>这是一段很长的文本95</div>
<div>这是一段很长的文本96</div>
<div>这是一段很长的文本97</div>
<div>这是一段很长的文本98</div>
<div>这是一段很长的文本99</div>
<div>这是一段很长的文本100</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/chax-back-top.js"></script>
</body>
</html> 
+19
src/demos/chax-copy.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chaxCopy</title>
<link rel="stylesheet" href="../css/chax-base.css">
</head>
<body style="text-align: center;padding-top:200px;">
<button class="chax-copy" data-chax-copy-target=".target">点击我复制下列文本</button>
<div>Copy the following.</div>
<div class="target">Hello World.I'm coming.</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/chax-copy.js"></script>
</body>
</html> 
+23
src/demos/chax-dropdown.html
<!doctype html>
<html lang=zh-CN>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chaxDropdown</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-dropdown.css">
</head>
<body style="display:flex;justify-content:center;padding-top:200px;">
<div class="chax-dropdown">
<div class="chax-dropdown-item">菜单1</div>
<div class="chax-dropdown-item">菜单2</div>
<div class="chax-dropdown-item">菜单3</div>
<div class="chax-dropdown-item">菜单4</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
</body>
</html> 
+38
src/demos/chax-list.html
<!doctype html>
<html lang=zh-CN>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chax-list</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-list.css">
</head>
<body style="display: flex;justify-content:center;padding-top:200px">
<ul class="chax-list">
<li class="chax-list-item">列表项目1</li>
<li class="chax-list-item">列表项目2</li>
<li class="chax-list-item">列表项目3</li>
<li class="chax-list-item">列表项目4</li>
<li class="chax-list-item">列表项目5</li>
<li class="chax-list-item">列表项目6</li>
<li class="chax-list-item">列表项目7</li>
<li class="chax-list-item">列表项目8</li>
<li class="chax-list-item">列表项目9</li>
<li class="chax-list-item">列表项目10</li>
<li class="chax-list-item">列表项目11</li>
<li class="chax-list-item">列表项目12</li>
<li class="chax-list-item">列表项目13</li>
<li class="chax-list-item">列表项目14</li>
<li class="chax-list-item">列表项目15</li>
<li class="chax-list-item">列表项目16</li>
<li class="chax-list-item">列表项目17</li>
<li class="chax-list-item">列表项目18</li>
<li class="chax-list-item">列表项目19</li>
<li class="chax-list-item">列表项目20</li>
</ul>
<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
</body>
</html> 
+28
src/demos/chax-modal.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chaxModal</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-modal.css">
</head>
<body>
<div class="chax-modal active">
<div class="chax-modal-content">
<div>这是一个弹窗哦</div>
<div class="chax-modal-close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baseline-close-px"></use>
</svg>
</div>
</div>
</div>
<script src="https://at.alicdn.com/t/font_2219992_7h9oz1g0xo4.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/chax-modal.js"></script>
</body>
</html> 
+72
src/demos/chax-nav.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chaxNav</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-nav.css">
</head>
<body>
<div class="chax-nav">
<div class="chax-nav-item">
<span class="chax-nav-text">导航1</span>
</div>
<div class="chax-nav-item">
<span class="chax-nav-text">导航2</span>
</div>
<div class="chax-nav-item chax-nav-search">
<div class="chax-search-box">
<div class="chax-search-option">
<div class="chax-select-show">
<span>全部分类</span>
<svg class="icon icon-dropdown" aria-hidden="true">
<use xlink:href="#icon-arrow-down-bold"></use>
</svg>
</div>
<div class="chax-option-dropdown">
<div class="chax-option-dropdown-item">全部分类</div>
<div class="chax-option-dropdown-item">菜单1</div>
<div class="chax-option-dropdown-item">菜单2</div>
<div class="chax-option-dropdown-item">菜单3</div>
<div class="chax-option-dropdown-item">菜单4</div>
</div>
</div>
<label>
<input id="search-input" class="chax-search-input" type="text" placeholder="点击这里搜索">
</label>
<div class="chax-search-popover">
<div class="pop-content p1">输入框为空且有历史记录时展示</div>
<div class="pop-content p2">输入框为空时展示</div>
<div class="pop-content p3">输入框为空时展示</div>
<div class="pop-content p4">输入框为空时展示</div>
<div class="pop-content p5">输入框有内容时展示</div>
</div>
<div class="chax-clear-input">
<svg aria-hidden="true" class="icon icon-search">
<use xlink:href="#icon-close"></use>
</svg>
</div>
<div class="chax-search-button">
<svg aria-hidden="true" class="icon icon-search">
<use xlink:href="#icon-search"></use>
</svg>
<span>搜索</span>
</div>
</div>
</div>
<div class="chax-nav-item">
<span class="chax-nav-text">导航4</span>
</div>
<div class="chax-nav-item">
<span class="chax-nav-text">导航4</span>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="//at.alicdn.com/t/font_2219992_t8ptgy37ly.js"></script>
<script src="../js/common.js"></script>
<script src="../js/chax-nav.js"></script>
</body>
</html> 
+20
src/demos/chax-popover.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>popOver</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-popover.css">
</head>
<body style="display: flex;justify-content:center;padding-top:200px;">
<div class="chax-popover-parent">
<button>悬浮看弹出窗</button>
<div class="chax-popover">这是一个弹出框</div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
</html>
+20
src/demos/chax-suspension.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chaxSuspension</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-suspension.css">
</head>
<body>
<div class="chax-suspension">
<div style="width:150px;height:150px;">这是一个悬浮框</div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
</html> 
+47
src/demos/chax-tab.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chaxTab</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-tab.css">
</head>
<body style="display:flex;justify-content:center;padding-top:200px">
<div class="chax-tab">
<div class="chax-tab-nav">
<div class="chax-tab-nav-item active">
<div style="padding:10px">我是选项一</div>
</div>
<div class="chax-tab-nav-item">
<div style="padding:10px">我是选项二</div>
</div>
<div class="chax-tab-nav-item">
<div style="padding:10px">我是选项三</div>
</div>
<div class="chax-tab-nav-item">
<div style="padding:10px">我是选项四</div>
</div>
</div>
<div class="chax-tab-panel">
<div class="chax-tab-panel-item active">
<div style="height:100%;background: yellow;">我是内容一</div>
</div>
<div class="chax-tab-panel-item">
<div style="height:100%;background: orange;">我是内容二</div>
</div>
<div class="chax-tab-panel-item">
<div style="height:100%;background: green;">我是内容三</div>
</div>
<div class="chax-tab-panel-item">
<div style="height:100%;background: grey;">我是内容四</div>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/chax-tab.js"></script>
<script src="../js/common.js"></script>
</body>
</html>
+23
src/demos/chax-tooltip.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chaxTooltip</title>
<link rel="stylesheet" href="../css/chax-base.css">
<link rel="stylesheet" href="../css/chax-tooltip.css">
</head>
<body style="display: flex;justify-content:center;padding-top:200px">
<div class="chax-tooltip-parent">
<button>悬浮看提示信息</button>
<div class="chax-tooltip">这是一条提示信息</div>
</div>
<script src="../js/jquery.min.js"></script>
<!--点击查看提示信息-->
<!--<script src="../js/chax-tooltip.js"></script>-->
<script src="../js/common.js"></script>
</body>
</html>
+7
src/js/chax-back-top.js
// 功能：返回到顶部
backTop()
function backTop(){
$('.chax-back-top').click(function(){
$(window).scrollTop(0)
})
}
+16
src/js/chax-copy.js
// 点击复制文本
copyText()
function copyText(){
$('.chax-copy').click(function(){
let $targetNode = $($(this).attr('data-chax-copy-target'))
try{
let range = document.createRange()
range.selectNode($targetNode[0])
window.getSelection().addRange(range)
document.execCommand('copy')
window.getSelection().removeAllRanges()
}catch (error) {
alert('复制失败')
}
})
} 
+80
src/js/chax-nav.js
// 绑定搜索框相关的事件
searchBox()
function searchBox(){
bindInputEvent()
bindSearchOption()
bindSearchPopover()
function bindInputEvent(){
let $input = $('.chax-search-box input')
let historyRecord = [1,2,3] // 假设这是一个历史记录
$input.focus(function(){
// 输入框被聚焦，显示搜索弹出框，根据输入值和历史记录确定搜索弹出框的内部展示
$('.chax-search-box .chax-search-popover').addClass('active')
judgePopOverContent()
})
$input.keyup(function(){
// 输入框中有键按下，根据输入值和历史记录确定搜索弹出框的内部展示
judgePopOverContent()
})
$input.click(function(){
if($(this).is(':focus')){
$('.chax-search-box .chax-search-popover').addClass('active')
}
})
function judgePopOverContent(){
// 根据输入值和历史记录确定搜索弹出框的内部展示
let valueText = $input.val()
if(!valueText){
if(historyRecord.length){
$('.chax-search-popover').children().filter('.p5').removeClass('active-flex')
.siblings().addClass('active-flex')
}else{
$('.chax-search-popover').children().filter('.p5').removeClass('active-flex')
.siblings().addClass('active-flex')
.filter('.p1').removeClass('active-flex')
}
}else{
$('.chax-search-popover').children().removeClass('active-flex')
.filter('.p5').addClass('active-flex')
}
}
}
function bindSearchOption(){
// 悬浮事件
$('.chax-search-option').hover(function(){
$('.chax-search-option .chax-option-dropdown').addClass('active')
},function(){
$('.chax-search-option .chax-option-dropdown').removeClass('active')
})
// 点击事件
$('.chax-search-option .chax-option-dropdown-item').click(function(){
let valueText = $(this).text()
let $input = $('.chax-search-box input')
// 文本显示切换
$('.chax-search-option .chax-select-show').text(valueText)
// 设置输入框距离左边位置，并选中
let width = $('.chax-search-option').outerWidth(true)
// 选项菜单删除
$('.chax-search-option .chax-option-dropdown').removeClass('active')
$input.css('padding-left',width)
// 如果输入框有值的话，进行以下后续操作
if($input.val()){
// 将输入框选中
$input.select()
// 默认输入框选中后，搜索弹出框会弹出，这里把它去掉
$('.chax-search-box .chax-search-popover').removeClass('active')
}
})
}
function bindSearchPopover(){
$(document).mouseup(function(e){
let _con= $('.chax-search-box .chax-search-popover')
let $input = $('.chax-search-box input')
if(!$input.is(':focus') && _con.is(':visible') && !_con.is(e.target) && _con.has(e.target).length===0){
_con.removeClass('active')
}
})
}
} 
+11
src/js/chax-tab.js
// 功能：切换 tab 标签
switchTab()
function switchTab(){
$('.chax-tab .chax-tab-nav-item').hover(function(){
$(this).siblings().removeClass('active')
$(this).addClass('active')
let index = $(this).index()
$('.chax-tab .chax-tab-panel-item').removeClass('active')
.eq(index).addClass('active')
})
} 
+12
src/js/chax-tooltip.js
// 功能：点击后显示气泡
showTooltip()
function showTooltip(){
$('.chax-tooltip-click').click(function(e){
e.preventDefault()
e.stopPropagation()
$(this).children('.chax-tooltip').fadeIn()
setTimeout(()=>{
$(this).children('.chax-tooltip').fadeOut()
},1000)
})
}
+12
src/js/common.js
// 功能：返回首页
backHome()
function backHome(){
let backHomeHTML = '<a href="/src" style="position:fixed;bottom:200px;left:200px;padding:0.4em 0.8em;box-shadow:0 8px 15px rgba(47,65,93,0.1)">回到首页</a>'
let $backHomeHTML = $(backHomeHTML)
$backHomeHTML.hover(function(){
$(this).css('color','#0057FF')
},function(){
$(this).css('color','#171718')
})
$('body').append($backHomeHTML)
}
src/js/jquery.min.js

Sorry, the diff of this file is too big to display

+4
-6
package.json
{
"scripts": {
"dev": "parcel serve ./src/index.html",
"build": "rm -rf dist && parcel build ./src/index.html --no-minify --public-url=./",
"start": "live-server ./",
"push": "bash push.sh"
},
"name": "chax",
"version": "0.0.2",
"version": "0.0.3",
"description": "small UI",

@@ -14,5 +13,4 @@ "main": "index.js",

"license": "MIT",
"dependencies": {
"jquery": "^3.5.1"
}
"dependencies": {},
"devDependencies": {}
}
+1
-16
README.md

@@ -7,17 +7,2 @@ # Chax —— 一个简易 UI 组件库

* 文档以后会慢慢完善
## 开发
```
yarn
yarn global add parcel
yarn dev
```
## 重构打包
```
yarn build
```
*「作者：Eddie Ma」*
* 目前还没有想好使用方法
+3
-4
src/css/chax-modal.css

@@ -14,2 +14,3 @@ .chax-modal{

}
.chax-modal .chax-modal-content{

@@ -20,11 +21,10 @@ position:absolute;

transform: translate(-50%,-50%);
/*以下内容自由调整*/
width:500px;
height:500px;
background: tan;
border-radius:4px;
display:flex;
font-size:20px;
justify-content: center;
align-items: center;
border-radius:4px;
font-size:20px;
font-weight: bold;

@@ -35,3 +35,2 @@ }

cursor: pointer;
/*以下内容自由调整*/
top:20px;

@@ -38,0 +37,0 @@ right:20px;

+20
-38
src/index.css

@@ -1,43 +0,25 @@

@import "./css/chax-modal.css";
*{
margin:0;
padding:0;
box-sizing:border-box;
.nav-dropdown{
width:160px;
background: #FFF;
box-shadow:0 8px 15px rgba(47,63,95,0.1);
margin: 20px auto;
}
button:focus{
outline:none;
.nav-dropdown .nav-dropdown-item{
width:100%;
display:flex;
justify-content: flex-start;
align-items: center;
height:34px;
color:#171718;
font-size: 14px;
padding-left:16px;
background: #FFF;
cursor:pointer;
}
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.code-display{
display: flex;
justify-content: center;
align-items: flex-start;
.nav-dropdown .nav-dropdown-item:hover,
.nav-dropdown .nav-dropdown-item.active{
background: #F6F7F9;
color: #0057FF;
}
.code-wrapper{
position:relative;
}
[data-chax-clipboard-target]{
position:absolute;
bottom:calc(100% - 18px);
right:50px;
width:100px;
height:50px;
background: #EEE;
cursor: pointer;
}
.chax-modal-demo{
width:100px;
height:50px;
background: tan;
cursor: pointer;
}
+5
-36
src/index.html

@@ -8,42 +8,11 @@ <!doctype html>

<title>Chax UI组件库</title>
<link rel="stylesheet" href="./css/chax-base.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1 style="text-align: center">Chax UI组件库</h1>
<div style="margin: 0 auto;max-width:1200px">
<h2>弹窗组件</h2>
<button class="chax-modal-demo">弹窗演示</button>
<div class="chax-modal">
<div class="chax-modal-content">
<div>这是一个弹窗哦</div>
<div class="chax-modal-close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baseline-close-px"></use>
</svg>
</div>
</div>
</div>
<div class="code-display">
<div class="code-wrapper">
<h3>HTML</h3>
<button data-chax-clipboard-target=".chax-modal-html-code">Copy</button>
<pre class="chax-modal-html-code"></pre>
</div>
<div class="code-wrapper">
<h3>CSS</h3>
<button data-chax-clipboard-target=".chax-modal-css-code">Copy</button>
<pre class="chax-modal-css-code"></pre>
</div>
<div class="code-wrapper">
<h3>JS</h3>
<button data-chax-clipboard-target=".chax-modal-js-code">Copy</button>
<pre class="chax-modal-js-code"></pre>
</div>
</div>
</div>
<script src="https://at.alicdn.com/t/font_2219992_7h9oz1g0xo4.js"></script>
<script src="./index.js" type="module"></script>
<h1 style="text-align: center">Chax UI组件库</h1>
<div class="nav-dropdown"></div>
<script src="./js/jquery.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
+17
-10
src/index.js

@@ -1,10 +0,17 @@

import '../libs/import-jquery'
import './js/code-show.js'
import './js/copy.js'
import './js/chax-modal.js'
$('.chax-modal-demo').click(function(e){
e.stopPropagation();
e.preventDefault();
$('.chax-modal').fadeIn()
})
let linkList = {
chaxBackTop:'./demos/chax-back-top.html',
chaxCopy:'./demos/chax-copy.html',
chaxDropdown:'./demos/chax-dropdown.html',
chaxList:'./demos/chax-list.html',
chaxModal:'./demos/chax-modal.html',
chaxNav:'./demos/chax-nav.html',
chaxPopover:'./demos/chax-popover.html',
chaxSuspension:'./demos/chax-suspension.html',
chaxTab:'./demos/chax-tab.html',
chaxTooltip:'./demos/chax-tooltip.html',
}
let linkListHTML = ''
for (let key in linkList){
linkListHTML +=`<a href="${linkList[key]}" class="nav-dropdown-item">${key}</a>`
}
$('.nav-dropdown').append($(linkListHTML))
+9
-6
src/js/chax-modal.js

@@ -1,6 +0,9 @@

$('.chax-modal .chax-modal-close').click(function(e){
e.stopPropagation();
e.preventDefault();
$(this).parents(".chax-modal").fadeOut()
})
// 功能：关闭模态框
closeModal()
function closeModal(){
$('.chax-modal .chax-modal-close').click(function(e){
e.stopPropagation();
e.preventDefault();
$(this).parents(".chax-modal").fadeOut()
})
}
-48
dist/index.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chax UI组件库</title>
<link rel="stylesheet" href="src.d73e2f09.css">
</head>
<body>
<h1 style="text-align: center">Chax UI组件库</h1>
<div style="margin: 0 auto;max-width:1200px">
<h2>弹窗组件</h2>
<button class="chax-modal-demo">弹窗演示</button>
<div class="chax-modal">
<div class="chax-modal-content">
<div>这是一个弹窗哦</div>
<div class="chax-modal-close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baseline-close-px"></use>
</svg>
</div>
</div>
</div>
<div class="code-display">
<div class="code-wrapper">
<h3>HTML</h3>
<button data-chax-clipboard-target=".chax-modal-html-code">Copy</button>
<pre class="chax-modal-html-code"></pre>
</div>
<div class="code-wrapper">
<h3>CSS</h3>
<button data-chax-clipboard-target=".chax-modal-css-code">Copy</button>
<pre class="chax-modal-css-code"></pre>
</div>
<div class="code-wrapper">
<h3>JS</h3>
<button data-chax-clipboard-target=".chax-modal-js-code">Copy</button>
<pre class="chax-modal-js-code"></pre>
</div>
</div>
</div>
<script src="https://at.alicdn.com/t/font_2219992_7h9oz1g0xo4.js"></script>
<script src="src.f49d70ee.js" type="module"></script>
</body>
</html>
-1
dist/index.js.map
{"version":3,"sources":["C:/Users/macha/AppData/Local/Yarn/Data/global/node_modules/parcel-bundler/src/builtins/bundle-url.js","C:/Users/macha/AppData/Local/Yarn/Data/global/node_modules/parcel-bundler/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"index.js","sourceRoot":"..\\src","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n if (!bundleURL) {\n bundleURL = getBundleURL();\n }\n\n return bundleURL;\n}\n\nfunction getBundleURL() {\n // Attempt to find the URL of the current script and use that as the base URL\n try {\n throw new Error;\n } catch (err) {\n var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n if (matches) {\n return getBaseURL(matches[0]);\n }\n }\n\n return '/';\n}\n\nfunction getBaseURL(url) {\n return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n var newLink = link.cloneNode();\n newLink.onload = function () {\n link.remove();\n };\n newLink.href = link.href.split('?')[0] + '?' + Date.now();\n link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n if (cssTimeout) {\n return;\n }\n\n cssTimeout = setTimeout(function () {\n var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n for (var i = 0; i < links.length; i++) {\n if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n updateLink(links[i]);\n }\n }\n\n cssTimeout = null;\n }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]}
-1
dist/src.9ad09f98.js.map
{"version":3,"sources":["C:/Users/macha/AppData/Local/Yarn/Data/global/node_modules/parcel-bundler/src/builtins/bundle-url.js","C:/Users/macha/AppData/Local/Yarn/Data/global/node_modules/parcel-bundler/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"src.9ad09f98.js","sourceRoot":"..\\src","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n if (!bundleURL) {\n bundleURL = getBundleURL();\n }\n\n return bundleURL;\n}\n\nfunction getBundleURL() {\n // Attempt to find the URL of the current script and use that as the base URL\n try {\n throw new Error;\n } catch (err) {\n var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n if (matches) {\n return getBaseURL(matches[0]);\n }\n }\n\n return '/';\n}\n\nfunction getBaseURL(url) {\n return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n var newLink = link.cloneNode();\n newLink.onload = function () {\n link.remove();\n };\n newLink.href = link.href.split('?')[0] + '?' + Date.now();\n link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n if (cssTimeout) {\n return;\n }\n\n cssTimeout = setTimeout(function () {\n var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n for (var i = 0; i < links.length; i++) {\n if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n updateLink(links[i]);\n }\n }\n\n cssTimeout = null;\n }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]}
-80
dist/src.d73e2f09.css
.chax-modal{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background: rgba(0,0,0,0.2);
z-index:100;
display:none;
}
.chax-modal.active{
display:block;
}
.chax-modal .chax-modal-content{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*以下内容自由调整*/
width:500px;
height:500px;
background: tan;
border-radius:4px;
display:flex;
font-size:20px;
justify-content: center;
align-items: center;
font-weight: bold;
}
.chax-modal .chax-modal-content .chax-modal-close{
position: absolute;
cursor: pointer;
/*以下内容自由调整*/
top:20px;
right:20px;
font-size: 20px;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
button:focus{
outline:none;
}
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.code-display{
display: flex;
justify-content: center;
align-items: flex-start;
}
.code-wrapper{
position:relative;
}
[data-chax-clipboard-target]{
position:absolute;
bottom:calc(100% - 18px);
right:50px;
width:100px;
height:50px;
background: #EEE;
cursor: pointer;
}
.chax-modal-demo{
width:100px;
height:50px;
background: tan;
cursor: pointer;
}
/*# sourceMappingURL=src.d73e2f09.css.map */
-1
dist/src.d73e2f09.css.map
{"version":3,"sources":["css/chax-modal.css","index.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AClCA;IACI,QAAQ;IACR,SAAS;IACT,qBAAqB;AACzB;;AAEA;IACI,YAAY;AAChB;;AAEA;KACK,UAAU,EAAE,WAAW;KACvB,uBAAuB;KACvB,kBAAkB;KAClB,gBAAgB;CACpB;AACD;IACI,aAAa;IACb,uBAAuB;IACvB,uBAAuB;AAC3B;;AAEA;IACI,iBAAiB;AACrB;;AAEA;IACI,iBAAiB;IACjB,wBAAwB;IACxB,UAAU;IACV,WAAW;IACX,WAAW;IACX,gBAAgB;IAChB,eAAe;AACnB;AACA;IACI,WAAW;IACX,WAAW;IACX,eAAe;IACf,eAAe;AACnB","file":"src.d73e2f09.css","sourceRoot":"..\\src","sourcesContent":[".chax-modal{\r\n position:fixed;\r\n left:0;\r\n right:0;\r\n top:0;\r\n bottom:0;\r\n background: rgba(0,0,0,0.2);\r\n z-index:100;\r\n display:none;\r\n}\r\n.chax-modal.active{\r\n display:block;\r\n}\r\n.chax-modal .chax-modal-content{\r\n position:absolute;\r\n top:50%;\r\n left:50%;\r\n transform: translate(-50%,-50%);\r\n /*以下内容自由调整*/\r\n width:500px;\r\n height:500px;\r\n background: tan;\r\n border-radius:4px;\r\n display:flex;\r\n font-size:20px;\r\n justify-content: center;\r\n align-items: center;\r\n font-weight: bold;\r\n}\r\n.chax-modal .chax-modal-content .chax-modal-close{\r\n position: absolute;\r\n cursor: pointer;\r\n /*以下内容自由调整*/\r\n top:20px;\r\n right:20px;\r\n font-size: 20px;\r\n}","@import \"./css/chax-modal.css\";\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\nbutton:focus{\r\n outline:none;\r\n}\r\n\r\n.icon {\r\n width: 1em; height: 1em;\r\n vertical-align: -0.15em;\r\n fill: currentColor;\r\n overflow: hidden;\r\n }\r\n.code-display{\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n}\r\n\r\n.code-wrapper{\r\n position:relative;\r\n}\r\n\r\n[data-chax-clipboard-target]{\r\n position:absolute;\r\n bottom:calc(100% - 18px);\r\n right:50px;\r\n width:100px;\r\n height:50px;\r\n background: #EEE;\r\n cursor: pointer;\r\n}\r\n.chax-modal-demo{\r\n width:100px;\r\n height:50px;\r\n background: tan;\r\n cursor: pointer;\r\n}"]}
dist/src.e31bb0bc.js.map

Sorry, the diff of this file is too big to display

dist/src.f49d70ee.js

Sorry, the diff of this file is too big to display

dist/src.f49d70ee.js.map

Sorry, the diff of this file is too big to display

-5
libs/htmlEscape.js
function htmlEscape(str){
return str.replace(/</g,'&lt;').replace(/>/g,'&gt;')
}
export {htmlEscape}
-2
libs/import-jquery.js
import jquery from 'jquery'
export default ((window.$ = window.jQuery = jquery))
-58
src/js/code-show.js
import {htmlEscape} from "../../libs/htmlEscape.js"
$('.chax-modal-html-code').html(
htmlEscape('<div class="chax-modal">\n' +
' <div class="chax-modal-content">\n' +
' <div>这是一个弹窗哦</div>\n' +
' <div class="chax-modal-close">\n' +
' <svg class="icon" aria-hidden="true">\n' +
' <use xlink:href="#icon-baseline-close-px"></use>\n' +
' </svg>\n' +
' </div>\n' +
' </div>\n' +
' </div>')
)
$('.chax-modal-css-code').html('.chax-modal{\n' +
' position:fixed;\n' +
' left:0;\n' +
' right:0;\n' +
' top:0;\n' +
' bottom:0;\n' +
' background: rgba(0,0,0,0.2);\n' +
' z-index:100;\n' +
' display:none;\n' +
'}\n' +
'.chax-modal.active{\n' +
' display:block;\n' +
'}\n' +
'.chax-modal .chax-modal-content{\n' +
' position:absolute;\n' +
' top:50%;\n' +
' left:50%;\n' +
' transform: translate(-50%,-50%);\n' +
' /*以下内容自由调整*/\n' +
' width:500px;\n' +
' height:500px;\n' +
' background: tan;\n' +
' border-radius:4px;\n' +
' display:flex;\n' +
' font-size:20px;\n' +
' justify-content: center;\n' +
' align-items: center;\n' +
' font-weight: bold;\n' +
'}\n' +
'.chax-modal .chax-modal-content .chax-modal-close{\n' +
' position: absolute;\n' +
' cursor: pointer;\n' +
' /*以下内容自由调整*/\n' +
' top:20px;\n' +
' right:20px;\n' +
' font-size: 20px;\n' +
'}')
$('.chax-modal-js-code').html('$(\'.chax-modal .chax-modal-close\').click(function(e){\n' +
' e.stopPropagation();\n' +
' e.preventDefault();\n' +
' $(this).parents(".chax-modal").fadeOut()\n' +
'})')
-13
src/js/copy.js
$('[data-chax-clipboard-target]').click(function(){
if(!$(this).data().chaxClipboardTarget) return
try{
let targetNode = $($(this).data().chaxClipboardTarget)[0]
let range = document.createRange()
range.selectNode(targetNode)
window.getSelection().addRange(range)
document.execCommand('copy')
window.getSelection().removeAllRanges()
}catch (error) {
alert('复制失败')
}
})