Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / закрепление части экрана / 15 сообщений из 15, страница 1 из 1
14.01.2013, 12:08
    #38108981
gdengam
gdengam
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
Доброго времени суток. Подскажите, пожалуйста, есть ли возможность закрепить часть страницы...
Задача: есть мастерпэйдж, в ней авторизация там и ссылки разные, есть встроенная страница с элементами управления наверху и затем длинная таблица гридвью. Можно ли сделать так, чтобы заголовок мастерпэйдж, элементы управления страницы и заголовок гридвью всегда были видны, а данные гридвью скролились? размер закрепляемой области явно определен в пикселях. нужен код яваскрипта, который бы при прокрутке оставлял эту область на месте.
Заранее спасибо
Прошу учесть, что я еще чайник в этой теме...всю жизнь писал толстые клиенты на .net и базы данных, поэтому вэбу только учусь не судите строго)))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.01.2013, 12:43
    #38109047
Местный король Делфей
Местный король Делфей
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
загуглите sticky div
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.01.2013, 12:57
    #38109075
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
position:fixed; Пример можно глянуть вконтакте в разделе "Сообщения".
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.01.2013, 13:08
    #38109098
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
st_stposition:fixedЗачем? ТСу нужно, чтобы данные скролились. Ну так и засунуть из в контейнер с overflow: scroll.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.01.2013, 13:28
    #38109132
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
skyANAst_stposition:fixedЗачем? ТСу нужно, чтобы данные скролились. Ну так и засунуть из в контейнер с overflow: scroll.

И полоса прокрутки будет на блоке. Вконтакте красивенько - полоса прокрутки стандартная браузерная, а элементы (хедер/меню) закреплены вверху/по бокам.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.01.2013, 13:29
    #38109135
Парамон
Парамон
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
Не люблю такой дизайн, реально убивает место на странице, с мобильных еще хуже.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.01.2013, 13:33
    #38109144
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
st_stskyANAпропущено...
Зачем? ТСу нужно, чтобы данные скролились. Ну так и засунуть из в контейнер с overflow: scroll.

И полоса прокрутки будет на блоке. Вконтакте красивенько - полоса прокрутки стандартная браузерная, а элементы (хедер/меню) закреплены вверху/по бокам.Ага, на блоке. Может ТС закрепить мастерпэйдж нужно только для этой страницы, кто его знает.
Вообщем решать ему.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.01.2013, 14:35
    #38109268
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
gdengam,

Ответ уже на этом форуме был. Типа, готовый компонент. Поищите.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2013, 09:38
    #38110273
gdengam
gdengam
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
skyANA, st_st
Нужно, чтобы на всех страницах с мастерпейдж ее элементы были наверху...только не пойму теперь где этот fixed поставить...если создать div на дочерней странице и поместить туда все элементы шапки страницы, то мастерпейдж все равно скролится... Мне вариант вконтакте очень подходит и нравится, но что обернуть в fixed я никак не пойму... content в мастерпэйдж?
у меня есть синий заголов в мастерпелдж и элементы логин и пару ссылок, а затем белый фон с контентом, в этот контент вставляется страница с элементами управления данными (кнопочки и списки) и гридвью. Надо чтобы синяя шапка с элементами логин и элементы управления данными оставались на месте.а гридвью скролилась как сообщения вконтакте, про заголовок гридвью можно забыть...но где поставить fixed я не соображу пока(((
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2013, 09:40
    #38110275
gdengam
gdengam
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
ShSerge,

а что поискать? я находил сложные скрипты для одновременно горизонтальной и вертикальной прокрутки гридвью, но для меня это сложновато, не хотелось бы пользоваться кодом, который не понимаешь...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2013, 09:53
    #38110288
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
gdengam, контейнер (<div>) шапки страницы должен быть в мастерпейдже. Для него и нужно применить CSS свойство position со значением fixed. Плюс выставить z-index больше нуля.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2013, 09:56
    #38110294
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
gdengam, а вообще приведите пример свой разметки, тогда можно на ней будет показать, к чему применить стили
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2013, 10:02
    #38110300
gdengam
gdengam
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
skyANA,

мастер:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="RQ_master.master.vb" Inherits="RQ_cryker.RQ_master" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
   <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    Управление заявками
                </h1>
            </div>
            <div class="loginDisplay">
                 <asp:LoginView ID="LoginView1" runat="server">
                    <LoggedInTemplate>
                        <asp:LoginName ID="LoginName1" runat="server" />
                                   &nbsp;&nbsp;&nbsp;
                        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/RQ/RQ_Tools.aspx">Настройка</asp:HyperLink>
                    </LoggedInTemplate>
                </asp:LoginView>
                &nbsp;&nbsp;&nbsp;
               <asp:LoginStatus ID="LoginStatus1" runat="server" LoginText="Вход" 
                    LogoutText="Выход" />
            </div>
            <div class="clear hideSkiplink">
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>


страница:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="RQ.aspx.vb" Inherits="RQ_cryker.RQ" MasterPageFile="~/RQ_master.Master" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <div id="headerDIV" style="position: fixed;">
        Заявки c &nbsp;&nbsp;<asp:TextBox 
            ID="date1" runat="server" MaxLength="10" Width="79px"></asp:TextBox>
         <asp:ImageButton ID="ImageButton1" runat="server" Height="16px" 
                      ImageUrl="~/images/Calendar_scheduleHS.png" />
&nbsp;&nbsp; по
        <asp:TextBox 
            ID="date2" runat="server" MaxLength="10" Width="79px"></asp:TextBox>
                <asp:ImageButton ID="ImageButton2" runat="server" Height="16px" 
                      ImageUrl="~/images/Calendar_scheduleHS.png" />
        &nbsp;&nbsp;<asp:ImageButton ID="date_refresh" runat="server" Height="16px" 
                      ImageUrl="~/images/adb_refresh.png" BorderStyle="Double" />
        &nbsp;&nbsp;<asp:ImageButton ID="RQ_create" runat="server" Height="16px" 
                      ImageUrl="~/images/button_plus_blue_5234.png" 
            BorderStyle="Double" />
        &nbsp;&nbsp;<asp:ImageButton ID="RQ_open" runat="server" Height="16px" 
                      ImageUrl="~/images/view_text_1100.png" BorderStyle="Double" />
        &nbsp;&nbsp;<asp:ImageButton ID="RQ_copy" runat="server" Height="16px" 
                      ImageUrl="~/images/copy_1291.png" BorderStyle="Double" />
        &nbsp;&nbsp;<asp:ImageButton ID="RQ_del" runat="server" Height="16px" 
                      ImageUrl="~/images/remove_1816.png" BorderStyle="Double" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:DropDownList ID="filter_1" 
            runat="server">
       </asp:DropDownList>
      &nbsp;&nbsp;   <asp:DropDownList ID="filter_2" runat="server">
            <asp:ListItem>=</asp:ListItem>
            <asp:ListItem>&gt;</asp:ListItem>
            <asp:ListItem>&lt;</asp:ListItem>
            <asp:ListItem>&lt;&gt;</asp:ListItem>
            <asp:ListItem>LIKE</asp:ListItem>
            <asp:ListItem>NOT LIKE</asp:ListItem>
        </asp:DropDownList>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="filter_3" runat="server"></asp:TextBox>
        &nbsp;&nbsp;<asp:ImageButton ID="filter_refresh" runat="server" Height="16px" 
                      ImageUrl="~/images/adb_refresh.png" BorderStyle="Double" />
            Департамент создаваемых заявок
        <asp:DropDownList ID="Department" runat="server">
        </asp:DropDownList>
        &nbsp;&nbsp;
        <asp:Button ID="Delete_4ern" runat="server" Text="Удалить черновики" 
            Visible="False" />
        <asp:GridView ID="grdv_allreq_head" runat="server" AutoGenerateColumns="False" Width="100%" 
            ForeColor="Black" Height="100%" PageSize="20" AllowSorting="True" 
            ShowHeaderWhenEmpty="True">
            <AlternatingRowStyle BackColor="#FFFF99" ForeColor="Black" />
            <Columns>
                бла-бла-бла
            </Columns>
            <HeaderStyle BackColor="#6699FF" ForeColor="Black" />
            <PagerSettings Position="TopAndBottom" />
            <SelectedRowStyle BackColor="#FF5050" />
        </asp:GridView>
           </div>
       <div style="margin: 100px 0px 0px 0px">
        <asp:GridView ID="grdv_allreq" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="IDДокумента" Width="100%" 
            ForeColor="Black" Height="100%" PageSize="20" ShowHeader="False">
            <AlternatingRowStyle BackColor="#FFFF99" ForeColor="Black" />
            <Columns>
бла-бла-бла
            </Columns>
            <HeaderStyle BackColor="#6699FF" ForeColor="Black" />
            <PagerSettings Position="TopAndBottom" />
            <SelectedRowStyle BackColor="#FF5050" />
        </asp:GridView>
        </div>
</asp:Content>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2013, 10:29
    #38110327
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
<!DOCTYPE HTML>
<html>  
<head>
  <style>
    body, .header {
      width: 500px;
    }

    .header {
      background-color: #fff;
      height: 100px;
      position: fixed;
      top: 0px;
      z-index: 100;
    }
    
    .main {
      padding-top: 100px;
    }
  </style>
</head>
<body>
  <form id="form">
    <div class="page">
      <div class="header">
        <div class="title"><h1>Управление заявками</h1></div>
        <div class="loginDisplay"><a href="#">Настройка</a></div>
        <div class="clear hideSkiplink"></div>
      </div>
      <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus imperdiet tortor vel viverra. Vivamus elementum interdum
 est, a ultricies mauris imperdiet ac. Donec placerat ligula eu libero lobortis fermentum. Pellentesque dui mauris, ultrices quis sodales eget,
 dignissim ut dui. Aliquam magna nisi, mollis at mattis vitae, pulvinar ac libero. Sed condimentum porttitor dictum. Sed consectetur, nunc 
sit amet iaculis egestas, mi massa congue libero, vitae molestie orci quam sed lorem. Nunc diam erat, viverra nec tristique vitae, tristique
 eget justo. In eget lectus vitae ipsum ullamcorper tempor. Mauris viverra eros ac quam rutrum sit amet mollis nisi sollicitudin. Cras ac 
mattis eros. Etiam consectetur, turpis et fermentum ultrices, erat lorem accumsan justo, non aliquet justo nisi vitae dolor. Curabitur 
molestie ligula in arcu pretium aliquet.</p>
        <p>Ut vitae arcu id diam gravida faucibus. Cras tristique venenatis quam, sit amet interdum orci sodales et. Sed est nisl, semper sit 
amet vehicula id, viverra in justo. Suspendisse imperdiet sodales lectus, eget hendrerit risus rhoncus non. Fusce eu neque in nisl ornare 
aliquam ut ut magna. Integer odio justo, auctor nec consectetur eget, laoreet nec lorem. Maecenas egestas volutpat leo, eu gravida 
metus rhoncus id. Vestibulum bibendum mauris eu magna suscipit sed imperdiet risus mattis. Quisque vel dui dui. Etiam pellentesque mi sed 
arcu ultrices pretium.</p>
        <p>Mauris sodales molestie cursus. Ut dignissim nisl eget lorem auctor in fringilla enim semper. Donec porttitor porttitor suscipit. Cras
 congue velit blandit nisl auctor aliquet ornare mi suscipit. Sed porta, ante quis consectetur iaculis, erat nisl sollicitudin dolor, et laoreet 
ipsum arcu et nibh. Vivamus ac quam sem, sit amet dapibus tortor. Phasellus tincidunt, urna eget posuere feugiat, nunc nulla suscipit velit, 
eget elementum ipsum erat at lorem. Nunc suscipit fermentum mi non ultrices. In gravida dignissim interdum. Cras nunc leo, facilisis 
pellentesque facilisis vel, commodo adipiscing turpis. Nulla aliquet porttitor molestie.</p>
        <p>Donec eros nulla, sagittis id congue eu, fringilla et dolor. Nulla egestas sem sit amet lacus faucibus sodales. Phasellus rhoncus 
facilisis blandit. Curabitur cursus interdum mauris vitae ullamcorper. Integer ullamcorper egestas augue, eget blandit felis mollis in. Nulla 
facilisi. Sed blandit posuere turpis, eu congue nisi fermentum ut. Sed commodo iaculis pharetra. Integer vel felis in dui molestie commodo id 
semper elit. Morbi volutpat tincidunt eros, quis laoreet diam laoreet quis. Aliquam a nibh et nulla sagittis imperdiet vel quis dolor. 
Suspendisse a commodo purus. Aliquam iaculis, justo accumsan porttitor scelerisque, magna neque iaculis eros, interdum convallis dui nunc 
id dolor. Suspendisse pretium ante ac magna fermentum gravida. Duis id est quam, et cursus lacus.</p>
        <p>Nunc accumsan tempor mi, et tempus tellus aliquam vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus odio nulla, 
blandit a mollis ac, iaculis vitae leo. Aenean venenatis iaculis placerat. Quisque eget eros odio, nec vulputate nisi. Fusce vulputate libero 
quis dui elementum id suscipit neque tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Integer lacinia vestibulum justo non auctor. Suspendisse facilisis aliquam erat ut commodo.</p>
      </div>
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
  </form>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2013, 11:32
    #38110409
gdengam
gdengam
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
закрепление части экрана
skyANA,
Спасибо большое, разобрался...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / закрепление части экрана / 15 сообщений из 15, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]