搜索
搜索

html响应文本区域/按钮/表格

Martin 发表于 Dev
30
马丁

我正在一个网站上工作，正文内容中有一个文本区域/按钮/表格。

我的内容反应灵敏，除了非常薄的显示器（如移动设备），在这种情况下，表格不会环绕并变得无法使用，并且按钮不会扩展以填充整个区域。

（在线代码元素似乎不太好，但这个 jsfiddle 是一个更好的例子）

https://jsfiddle.net/martinradio/b4z735tk/40/

如何使表格更具响应性，以便在调整窗口大小时，表格具有某种类似于 textarea 的自动换行（如滚动）

            button {
                border: 2px solid black;
            }
            table, th, td {
                border: 2px solid black;
                background: white;
                color:black;
                  height: 100%;
                  }
                  
                  table { 
  table-layout:fixed;
  width:100%;
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
    <title>tagger.site</title>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <!-- bootstrap css-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<!-- Style -->
<style>
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
}

/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

.btn-info {
    color: #fff;
    background-color: #b81717;
    border-color: #52b817;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    /*
    padding: 15px 10px;
    margin-right: 77px;
    */
    /* background: rgb(11, 223, 212); */
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    margin-left:11px
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    /*  background: #63c23e; NAVBAR BACKGROUND */
    color: rgb(0, 0, 0);
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    display: inline-flex;
    padding: 20px;
    /* background: #6d7fcc; */
    position: relative;
    width: 100%;
}

#sidebar ul.components {
    /* padding: 20px 0; */
    /* border-bottom: 1px solid #47748b; */
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        color: pink
        display: inline;
    }
}

#imageModal{
    z-index:3;
}

/* Sidebar expand/collapse button */
#sidebarCollapse{
    position: fixed;
    z-index: 2;
    
    margin-left: 84%;
    box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
}

/* Bottom of sidebar image stuff */
.responsive {
    width: 90%;
    bottom:20px;
    margin-left:5%;
    margin-right:5%;
}

/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}

/* image footer color boxes */
.colorBox {
  /*float: left;*/
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  vertical-align: middle;
  display: inline-block;
}

</style>

<style>

/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#colorImageDisplay:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>

<!-- Page Content -->
<div class="wrapper" class="toggled">
    
    <!-- Sidebar -->
    <nav id="sidebar" style='background: #f8f0e8; color:#000000;'>

        <!-- sidenav top title -->
        <div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
            <!-- sidebar top title text -->
            <h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3> 
            <!-- sidebar expand/collapse button -->
            <button id='sidebarCollapse'>
                <img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
            </button> 
        </div>

        <!-- sidenav list of items -->
        <ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
            <!-- about page -->
            <li>
                <a href="#">About</a>
            </li>
         
        </ul>

     
    </nav>

    <!-- Page Content -->
    <div id="content" style='background: #cec5ac;'>
        

        <div class="col-sm-12">

            <div class="col" >
                <div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
                    <div class="col" style=''>
                        <h1 class="widgettitle"><strong>page title</strong></h1>
                    </div>
                    <div class="w-100"></div>
                    
                    <div class="col" style=''>
                        <a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v&#x3D;0df7k__KEHw'>Github</a>
                    </div>
                </div>
            </div>
            <div class="col" >
                <br>
                <br>
                <div class="row" style=' margin: auto;'>
                   <!-- page main content -->
                  <div class="container-fluid" style='color: #000000'>

                      <div style="margin-top:-30px;">

 <!-- discogstagger output -->
        <hr>
        <h3>Comma-Separated Metadata Tags:</h3>
        <div class='outputDiscogstaggerBox' style='margin-left:15px;'>
            <div class='row'>
                <textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta  Song,Why,Mississippi Voodoo,Cool  Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
                <button class="btn default copyButton" style="cursor: pointer;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
                <div>
                    <table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; width: 533px; " height="100" id="adjustments">
                        <tbody>
                        <!-- Columns -->
                        <tr>
                            <th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
                            <th style="text-align:center; width: 25%;">Tags Type</th>
                            <th style="text-align:center; width: 46%;">Tags</th>
                        </tr>

                        <!-- Artists -->
                        <tr>
                            <td style="text-align:center;">
                            <input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
                            </td>
                            <td style="text-align:center;">Release Artist(s)</td>
                            <td>
                            <div style="text-align:center;">
                                <input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
                                <div class='float-left' id="releaseArtistsSliderValue">100%</div>
                                <div class='float-right' id='releaseArtistsNumber'>0 chars  </div>
                            </div>
                            </td>
                        </tr>

                        <!-- Release Info -->
                        <tr>
                            <td style="text-align:center;">
                            <input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
                            </td>
                            <td style="text-align:center;">Release Info</td>
                            <td>
                            <div style="text-align:center;">
                                <input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
                                <div class='float-left' id="releaseInfoSliderValue">100%</div>
                                <div class='float-right' id='releaseInfoNumber'>0 chars</div>
                            </div>
                            </td>

                        </tr>

                        <!-- Tracklist -->
                        <tr>
                            <td style="text-align:center;">
                            <input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
                            </td>
                            <td style="text-align:center;">Tracklist</td>
                            <td>
                            <div style="text-align:center;">    
                                <input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
                                <div class='float-left' id="tracklistSliderValue">100%</div>
                                <div class='float-right' id='tracklistNumber'>0 chars</div>
                            </div>
                            </td>

                        </tr>

                        <!-- Combinations -->
                        <tr>
                            <td style="text-align:center;">
                            <input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
                            </td>
                            <td style="text-align:center;">Combinations</td>
                            <td>
                            <div style="text-align:center;">
                                <input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
                                <div class='float-left' id="combinationsSliderValue">100%</div>
                                <div class='float-right' id='combinationsNumber'>0 chars</div>
                            </div>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
                

                      </div>


                  </div>
                </div>
                
            </div>

        </div>

        
    </div>
</div>

<script type="text/javascript">
    setHoverColor();
    //setColors()

    async function setHoverColor(){
        var sheet = document.createElement('style')
        //create css style rule for on-hover tab and on hover github url
        let innerHTMLHoverColorStyle = `
            /* githubUrl hover */
            #githubUrl:hover{
                color:blue;
            }

            #sidebar ul li a:hover { 
                background: #8c743c; 
                color: #ffffff;
            } `;
        sheet.innerHTML = innerHTMLHoverColorStyle 
        document.head.appendChild(sheet);
    }

    async function setColors(){
        console.log('setcolors()')
        let colors = await getColors()
        let imgPath = colors.imgPath
        //6 possible colors: 
        //Vibrant
        //LightVibrant
        //DarkVibrant
        //Muted
        //LightMuted
        //DarkMuted
        
        //get high contrast colors for text
        /*
        let sidebarColorBackground = colors.colors['DarkVibrant']
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground = sidebarColorBackground.split(',');
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground_hex = rgbToHex(213, 23, 36)
        console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
        let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
        console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
        */
        
        //change color display text and set color box hex value
        //make all colors visible 
        //document.getElementById('pageColorsText').style.display = "block";
        /*
        //color 1
        var color1 = colors.colors['Vibrant']
        var color1_hex = rgbToHex(color1)
        document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
        //color 2
        var color2 = colors.colors['LightVibrant']
        var color2_hex = rgbToHex(color2)
        document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
        //color 3
        var color3 = colors.colors['DarkVibrant']
        var color3_hex = rgbToHex(color3)
        document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
        //color 4
        var color4 = colors.colors['Muted']
        var color4_hex = rgbToHex(color4)
        document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
        //color 5
        var color5 = colors.colors['LightMuted']
        var color5_hex = rgbToHex(color5)
        document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
        //color 6
        var color6 = colors.colors['DarkMuted']
        var color6_hex = rgbToHex(color6)
        document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
        */ 

        //change display image source
        //document.getElementById('colorImageDisplay').src=`${imgPath}`

        //setup image modal popup
        //imageModalSetup()

        //change colors
        var sheet = document.createElement('style')

        let hoverColor = `#8c743c`;

        let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
        sheet.innerHTML = innerHTMLHoverColorStyle 
        document.head.appendChild(sheet);

        let innerHTMLStyle = `

        /* main page body background color solid
        body { background: red; } */

        /* sidebar_header_background_color 
        #sidebarTop {background: ${colors.colors['LightMuted']};}   */ 

        /* sidebar_background_color 
        #sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */

        /* active tab color 
        #currentPage { background: ${colors.colors['LightVibrant']}; } */

        /* main page body background color gradient 
        body { background: linear-gradient(2deg, color3_hex, color6_hex);} */ 

        /* ul ul a { expanded tab background color 
        .sideBarOption { background: ${colors.colors['Muted']}; }  */

        /* sidebar hover color */
        #sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;

        //console.log("innerHTMLStyle = ", innerHTMLStyle)
        //sheet.innerHTML = innerHTMLStyle 
        //document.head.appendChild(sheet);
    }

    function invertColor(hex) {
        if (hex.indexOf('#') === 0) {
            hex = hex.slice(1);
        }
        // convert 3-digit hex to 6-digits.
        if (hex.length === 3) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        if (hex.length !== 6) {
            throw new Error('Invalid HEX color.');
        }
        // invert color components
        var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
            g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
            b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
        // pad each with zeros and return
        return '#' + padZero(r) + padZero(g) + padZero(b);
    }

    function padZero(str, len) {
        len = len || 2;
        var zeros = new Array(len).join('0');
        return (zeros + str).slice(-len);
    }
    
    //rgb to hex 
    function componentToHex(c) {
        var hex = c.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    }

    function rgbToHex(color) {
        //color = string like rgb(a,b,c)
        //remove string parts
        color = color.substring(4, color.length-1);
        //turn into arr
        color = color.split(',');
        
        return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
    }

    //setup image modal popup
    imageModalSetup()

    async function imageModalSetup(){
      
        // Get the modal
        var modal = document.getElementById("imageModal");

        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var img = document.getElementById("colorImageDisplay");
        
        //make image visible
        img.style.display = "block";
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");
        img.onclick = function(){
            modal.style.display = "block";
            modalImg.src = this.src;
            //captionText.innerHTML = this.alt;
        }
       

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            $('#imageModal').fadeOut(500);
        }
    }

    $(document).ready(function () {

        //refresh button 
        const refreshButton = document.getElementById('refreshButton');
        const refreshPage = () => {
            location.reload();
        }
        refreshButton.addEventListener('click', refreshPage)

        

        //if clicking outside modal, close modal
        $(document).click(function (e) {
            console.log('close modal')
            if ($(e.target).is('#imageModal')) {
                $('#imageModal').fadeOut(500);
            }
        });

        //on escape key click, close modal
        $(document).keydown(function(event) { 
            if (event.keyCode == 27) { 
                $('#imageModal').fadeOut(500);
            }
        });

        //side bar collapse event
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });

    });

    //make request to colors backend
    function getColors(){
        return new Promise(async function (resolve, reject) {
            $.ajax({
                type: 'POST',
                url: '/getColors',
                data: {
                    type: "varValue",
                },
            }).then((data) => {
                resolve(data)
            }).catch((err) => {
                reject(err)
            });
        })
    }

</script>

</html>

谢维

我在这里编辑了您的代码：https : //jsfiddle.net/r0bny6h7/

  1. 为了使表格本身在较小的屏幕上具有响应性，我将 553px 的固定宽度更改为“max-width: 553px”。本质上这是在较大的屏幕上做的，确保元素不会超过 553px，但在较小的屏幕上，它会自动缩小尺寸以适应屏幕。
  2. 要在较小的屏幕上扩展按钮，只需添加一个 max-width（在本例中为“max-width: 553px”以匹配表格）和“width: 100%”以确保它在较小的屏幕上占据整个宽度.
  3. 要使表格内容自动换行，只需添加“word-wrap: break-word;” 和“空白：正常；” 到桌子，th，td。
  4. 只是一个小说明，但由于您混合了内联和声明式 CSS 样式，因此浏览代码有点困难。我建议坚持使用一种类型，特别是如果您的样式将在整个代码中重复使用（例如，您将“text-align：center”添加到许多表格内容中。您可以通过将其应用于而是整个元素，或特定的类。）

            button {
                border: 2px solid black;
            }
            table, th, td {
                border: 2px solid black;
                background: white;
                color:black;
                height: 100%;
                white-space: normal;
                word-wrap: break-word;
            }
                  
                  table { 
  table-layout:fixed;
  width:100%;
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
    <title>tagger.site</title>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <!-- bootstrap css-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<!-- Style -->
<style>
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
}

/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

.btn-info {
    color: #fff;
    background-color: #b81717;
    border-color: #52b817;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    /*
    padding: 15px 10px;
    margin-right: 77px;
    */
    /* background: rgb(11, 223, 212); */
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    margin-left:11px
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    /*  background: #63c23e; NAVBAR BACKGROUND */
    color: rgb(0, 0, 0);
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    display: inline-flex;
    padding: 20px;
    /* background: #6d7fcc; */
    position: relative;
    width: 100%;
}

#sidebar ul.components {
    /* padding: 20px 0; */
    /* border-bottom: 1px solid #47748b; */
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        color: pink
        display: inline;
    }
}

#imageModal{
    z-index:3;
}

/* Sidebar expand/collapse button */
#sidebarCollapse{
    position: fixed;
    z-index: 2;
    
    margin-left: 84%;
    box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
}

/* Bottom of sidebar image stuff */
.responsive {
    width: 90%;
    bottom:20px;
    margin-left:5%;
    margin-right:5%;
}

/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}

/* image footer color boxes */
.colorBox {
  /*float: left;*/
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  vertical-align: middle;
  display: inline-block;
}

</style>

<style>

/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#colorImageDisplay:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>

<!-- Page Content -->
<div class="wrapper" class="toggled">
    
    <!-- Sidebar -->
    <nav id="sidebar" style='background: #f8f0e8; color:#000000;'>

        <!-- sidenav top title -->
        <div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
            <!-- sidebar top title text -->
            <h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3> 
            <!-- sidebar expand/collapse button -->
            <button id='sidebarCollapse'>
                <img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
            </button> 
        </div>

        <!-- sidenav list of items -->
        <ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
            <!-- about page -->
            <li>
                <a href="#">About</a>
            </li>
         
        </ul>

     
    </nav>

    <!-- Page Content -->
    <div id="content" style='background: #cec5ac;'>
        

        <div class="col-sm-12">

            <div class="col" >
                <div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
                    <div class="col" style=''>
                        <h1 class="widgettitle"><strong>page title</strong></h1>
                    </div>
                    <div class="w-100"></div>
                    
                    <div class="col" style=''>
                        <a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v&#x3D;0df7k__KEHw'>Github</a>
                    </div>
                </div>
            </div>
            <div class="col" >
                <br>
                <br>
                <div class="row" style=' margin: auto;'>
                   <!-- page main content -->
                  <div class="container-fluid" style='color: #000000'>

                      <div style="margin-top:-30px;">

 <!-- discogstagger output -->
        <hr>
        <h3>Comma-Separated Metadata Tags:</h3>
        <div class='outputDiscogstaggerBox' style='margin-left:15px;'>
            <div class='row'>
                <textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta  Song,Why,Mississippi Voodoo,Cool  Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
                <button class="btn default copyButton" style="cursor: pointer; max-width: 553px; width: 100%;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
                <div>
                    <table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; max-width: 533px;" height="100" id="adjustments">
                        <tbody>
                        <!-- Columns -->
                        <tr>
                            <th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
                            <th style="text-align:center; width: 25%;">Tags Type</th>
                            <th style="text-align:center; width: 46%;">Tags</th>
                        </tr>

                        <!-- Artists -->
                        <tr>
                            <td style="text-align:center;">
                            <input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
                            </td>
                            <td style="text-align:center;">Release Artist(s)</td>
                            <td>
                            <div style="text-align:center;">
                                <input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
                                <div class='float-left' id="releaseArtistsSliderValue">100%</div>
                                <div class='float-right' id='releaseArtistsNumber'>0 chars  </div>
                            </div>
                            </td>
                        </tr>

                        <!-- Release Info -->
                        <tr>
                            <td style="text-align:center;">
                            <input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
                            </td>
                            <td style="text-align:center;">Release Info</td>
                            <td>
                            <div style="text-align:center;">
                                <input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
                                <div class='float-left' id="releaseInfoSliderValue">100%</div>
                                <div class='float-right' id='releaseInfoNumber'>0 chars</div>
                            </div>
                            </td>

                        </tr>

                        <!-- Tracklist -->
                        <tr>
                            <td style="text-align:center;">
                            <input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
                            </td>
                            <td style="text-align:center;">Tracklist</td>
                            <td>
                            <div style="text-align:center;">    
                                <input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
                                <div class='float-left' id="tracklistSliderValue">100%</div>
                                <div class='float-right' id='tracklistNumber'>0 chars</div>
                            </div>
                            </td>

                        </tr>

                        <!-- Combinations -->
                        <tr>
                            <td style="text-align:center;">
                            <input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
                            </td>
                            <td style="text-align:center;">Combinations</td>
                            <td>
                            <div style="text-align:center;">
                                <input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
                                <div class='float-left' id="combinationsSliderValue">100%</div>
                                <div class='float-right' id='combinationsNumber'>0 chars</div>
                            </div>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
                

                      </div>


                  </div>
                </div>
                
            </div>

        </div>

        
    </div>
</div>

<script type="text/javascript">
    setHoverColor();
    //setColors()

    async function setHoverColor(){
        var sheet = document.createElement('style')
        //create css style rule for on-hover tab and on hover github url
        let innerHTMLHoverColorStyle = `
            /* githubUrl hover */
            #githubUrl:hover{
                color:blue;
            }

            #sidebar ul li a:hover { 
                background: #8c743c; 
                color: #ffffff;
            } `;
        sheet.innerHTML = innerHTMLHoverColorStyle 
        document.head.appendChild(sheet);
    }

    async function setColors(){
        console.log('setcolors()')
        let colors = await getColors()
        let imgPath = colors.imgPath
        //6 possible colors: 
        //Vibrant
        //LightVibrant
        //DarkVibrant
        //Muted
        //LightMuted
        //DarkMuted
        
        //get high contrast colors for text
        /*
        let sidebarColorBackground = colors.colors['DarkVibrant']
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground = sidebarColorBackground.split(',');
        console.log("sidebarColorBackground = ", sidebarColorBackground)
        sidebarColorBackground_hex = rgbToHex(213, 23, 36)
        console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
        let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
        console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
        */
        
        //change color display text and set color box hex value
        //make all colors visible 
        //document.getElementById('pageColorsText').style.display = "block";
        /*
        //color 1
        var color1 = colors.colors['Vibrant']
        var color1_hex = rgbToHex(color1)
        document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
        //color 2
        var color2 = colors.colors['LightVibrant']
        var color2_hex = rgbToHex(color2)
        document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
        //color 3
        var color3 = colors.colors['DarkVibrant']
        var color3_hex = rgbToHex(color3)
        document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
        //color 4
        var color4 = colors.colors['Muted']
        var color4_hex = rgbToHex(color4)
        document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
        //color 5
        var color5 = colors.colors['LightMuted']
        var color5_hex = rgbToHex(color5)
        document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
        //color 6
        var color6 = colors.colors['DarkMuted']
        var color6_hex = rgbToHex(color6)
        document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
        */ 

        //change display image source
        //document.getElementById('colorImageDisplay').src=`${imgPath}`

        //setup image modal popup
        //imageModalSetup()

        //change colors
        var sheet = document.createElement('style')

        let hoverColor = `#8c743c`;

        let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
        sheet.innerHTML = innerHTMLHoverColorStyle 
        document.head.appendChild(sheet);

        let innerHTMLStyle = `

        /* main page body background color solid
        body { background: red; } */

        /* sidebar_header_background_color 
        #sidebarTop {background: ${colors.colors['LightMuted']};}   */ 

        /* sidebar_background_color 
        #sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */

        /* active tab color 
        #currentPage { background: ${colors.colors['LightVibrant']}; } */

        /* main page body background color gradient 
        body { background: linear-gradient(2deg, color3_hex, color6_hex);} */ 

        /* ul ul a { expanded tab background color 
        .sideBarOption { background: ${colors.colors['Muted']}; }  */

        /* sidebar hover color */
        #sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;

        //console.log("innerHTMLStyle = ", innerHTMLStyle)
        //sheet.innerHTML = innerHTMLStyle 
        //document.head.appendChild(sheet);
    }

    function invertColor(hex) {
        if (hex.indexOf('#') === 0) {
            hex = hex.slice(1);
        }
        // convert 3-digit hex to 6-digits.
        if (hex.length === 3) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        if (hex.length !== 6) {
            throw new Error('Invalid HEX color.');
        }
        // invert color components
        var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
            g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
            b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
        // pad each with zeros and return
        return '#' + padZero(r) + padZero(g) + padZero(b);
    }

    function padZero(str, len) {
        len = len || 2;
        var zeros = new Array(len).join('0');
        return (zeros + str).slice(-len);
    }
    
    //rgb to hex 
    function componentToHex(c) {
        var hex = c.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    }

    function rgbToHex(color) {
        //color = string like rgb(a,b,c)
        //remove string parts
        color = color.substring(4, color.length-1);
        //turn into arr
        color = color.split(',');
        
        return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
    }

    //setup image modal popup
    imageModalSetup()

    async function imageModalSetup(){
      
        // Get the modal
        var modal = document.getElementById("imageModal");

        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var img = document.getElementById("colorImageDisplay");
        
        //make image visible
        img.style.display = "block";
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");
        img.onclick = function(){
            modal.style.display = "block";
            modalImg.src = this.src;
            //captionText.innerHTML = this.alt;
        }
       

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            $('#imageModal').fadeOut(500);
        }
    }

    $(document).ready(function () {

        //refresh button 
        const refreshButton = document.getElementById('refreshButton');
        const refreshPage = () => {
            location.reload();
        }
        refreshButton.addEventListener('click', refreshPage)

        

        //if clicking outside modal, close modal
        $(document).click(function (e) {
            console.log('close modal')
            if ($(e.target).is('#imageModal')) {
                $('#imageModal').fadeOut(500);
            }
        });

        //on escape key click, close modal
        $(document).keydown(function(event) { 
            if (event.keyCode == 27) { 
                $('#imageModal').fadeOut(500);
            }
        });

        //side bar collapse event
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });

    });

    //make request to colors backend
    function getColors(){
        return new Promise(async function (resolve, reject) {
            $.ajax({
                type: 'POST',
                url: '/getColors',
                data: {
                    type: "varValue",
                },
            }).then((data) => {
                resolve(data)
            }).catch((err) => {
                reject(err)
            });
        })
    }

</script>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

响应文本区域

表格拟合文本区域

单个文本区域中的按钮值

带有 wordpress 等按钮的文本区域

单击按钮更新文本区域

文本区域变脏时更改按钮

文本区域中按钮的值

在文本区域打印html代码

文本区域内的HTML代码，弹出结果预览的按钮

单击提交按钮后输入文本区域的文本

文本区域内的按钮与文本重叠

单击后摆脱表格上的文本区域

CSS宽度：100％文本区域以供评论（响应式）

用户单击按钮时创建文本区域

在按钮单击时切换文本区域

文本区域内按钮的绝对位置

Bootstrap X可编辑的文本区域清除按钮

离开文本区域时按钮单击不触发

如果选择了单选按钮，则禁用文本区域？

保留文本区域焦点时未单击按钮

如何在文本区域底部之外分配按钮？

隐藏与空白文本区域相关的按钮（选择问题）

jQuery启用/禁用按钮文本区域验证

如何将按钮与文本区域对齐？

单击提交按钮后如何使文本区域为空？

具有一个文本区域的多个按钮

将按钮粘贴到文本区域的外角

文本区域上的切换按钮单击jQuery

让所选的单选按钮显示在文本区域中

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档