Bootstrap 3 и Angular JS - ряд со столом и дивом - PullRequest
Новая
       8

Bootstrap 3 и Angular JS - ряд со столом и дивом

0 голосов
/ 27 ноября 2018

Я новичок во фронтэнде, который использует начальную загрузку и не могу понять, как добиться этого эффекта:

Я говорю о строке с таблицей и скрытым div.Таблица имеет ширину 100%, и когда после нажатия кнопки появляется скрытый элемент div, размер таблицы изменится на 60-70%, а оставшаяся ширина будет использоваться для элемента div.Когда я закрою div (сделаю его скрытым), таблица вернется к ширине 100%.

Не могли бы вы мне помочь, пожалуйста, понять, как мне сделать это наиболее распространенным и правильным способом?

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Здесь!Без AngularJs.Вы можете добавить анимацию, чтобы сделать ее более плавной. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="script.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        table{
            margin: 0;
            padding: 0;
            background: grey;
            float: left;
        }
        table tr, td, th{
            margin: 0;
            padding: 0;
        }
        #divToResize{
            width: 0;
            height: 100px;
            margin: 0;
            padding: 0;
            background: blue;
            float: left;
            color: white;
        }
    </style>
    <script>
        'use strict';
        let resized = false;
        function resize(){
            if (resized === false){
                document.getElementById("tableToResize").style.width = "60%";
                document.getElementById('divToResize').style.width = "40%";
                resized = true;
            } else{
                document.getElementById("tableToResize").style.width = "100%";
                document.getElementById('divToResize').style.width = "0";
                resized = false;
            }
        }
    </script>
</head>
<body>
    <div id="container">
        <table cellpadding="0" style="width: 100%;" id="tableToResize">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr><tr>
                <td>Header 1</td>
                <td>Header 2</td>
                <td>Header 3</td>
            </tr><tr>
                <td>Header 1</td>
                <td>Header 2</td>
                <td>Header 3</td>
            </tr><tr>
                <td>Header 1</td>
                <td>Header 2</td>
                <td>Header 3</td>
            </tr>
        </table>
        <div id="divToResize">
            I love Food
        </div>
        <button onclick="resize()">Resize</button></div>
</body>

</html>
0 голосов
/ 27 ноября 2018

Angular предоставляет ряд встроенных директив для условного / динамического управления стилями CSS - например.ng-class - используйте, когда набор стилей CSS статичен / известен раньше времени

Вот простой способ изменить ширину ячейки таблицы после нажатия: 

<button ng-hide="click" ng-click="click = true">click</button>
<button ng-hide="!click" ng-click="click = false">click</button>
<table id="mytable">

      <thead>
        <tr>
        <th>Name</th>
        <th>Name</th>
        </tr>
      </thead>
    <tbody>
    <tr ng-repeat="data in data">
        <td >
           {{data.person}} 
        </td>
         <td style="background:grey" ng-class="{after_click_width: click}">
           {{data.person}} 
        </td>

    </tr>
    </tbody>
</table>

стиль: 

.after_click_width {
  width: 70%
}

рабочий поршень: http://plnkr.co/edit/DuxbZFZbUpjU2BSLlpm2?p=preview

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...