Ширина вкладок пользовательского интерфейса jquery 100% - PullRequest
Новая
       1

Ширина вкладок пользовательского интерфейса jquery 100%

11 голосов
/ 10 февраля 2012

enter image description here Мне нужно использовать только 2 вкладки в моем приложении. Поэтому я хочу, чтобы они покрывали 100% ширины. В настоящее время он выравнивает обе таблицы на левой стороне и оставляет все виды пустого пространства на правой стороне. Что я могу сделать, чтобы обе мои вкладки занимали 100% площади. Я использую jquery-ui-1.8.17.custom.css

код 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
        <script type="text/javascript">

            $(function(){


                // Tabs
                $('#tabs').tabs();


            });
        </script>

    </head>
    <body>

    <div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
            <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First</a></li>
                <li><a href="#tabs-2">Second</a></li>

            </ul>
            <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
                </div>

    </div><!-- /content -->

</div><!-- /page -->
        <!-- Tabs -->




    </body>
</html>

Ответы [ 2 ]

14 голосов
/ 10 февраля 2012

С помощью набора CSS: 

.ui-tabs .ui-tabs-nav li {
    width:50%;
}

Примечание. Из-за отступов, полей и границ вам может понадобиться уменьшить его до менее 50%.

Обновление : если вы хотите центрировать текст на вкладках, вам нужно сделать два изменения CSS (сохраняя 50% -ое изменение сверху). 

.ui-tabs .ui-tabs-nav li {
    width:50%;
    text-align: center;
}
.ui-tabs .ui-tabs-nav li a {
    display: inline-block;
    float: none;
    padding: 5px;
    text-decoration: none;
    width: 100%;
}

Обратите внимание, что вы можете настроить отступ по мере необходимости.

1 голос
/ 03 ноября 2016

С Flexbox это гибко и просто: 

.ui-tabs .ui-tabs-nav {
    display: flex;
}

.ui-tabs .ui-tabs-nav li {
    flex: 1;
    display: flex;
    /* If placed in a small width sidebar or something like that disabling nowrap will fix the overflow issue */
    white-space: normal;
}

.ui-tabs .ui-tabs-nav li a {
    flex: 1;
    /* If you want to align tab titles center */
    text-align: center;
}

When the default jquery-ui tab is put on normal or larger width place

When it's put a on smaller width place

...