Всплывающее меню для одностраничного портала

Введение

Недавно решил изучить ASP.NET и одновременно создать что-нибудь полезное, посложнее «Hello, world!». Первое знакомство с ASP.NET у меня началось с IBuySpy. Довольно быстро разобравшись с этим Shared Source проектом, я начал его перекраивать под свои нужды. В итоге осталось довольно мало оригинального кода, кроме части ядра (ибо, зачем изобретать велосипед? icon smile Всплывающее меню для одностраничного портала ). Кроме всего прочего, хотелось сделать больше функциональности, например, всплывающее меню. В сети много примеров всяких всплывающих менюшек, в том числе и исходников Open Source. Но они, как правило, сложны и не очень подходили под мои нужды. Поэтому я решил написать простое меню в виде пользовательского элемента и предложить Вам результаты своего творчества. В результате должно получиться это:.

1. Реализация базы данных

Начнем с написания базы данных. Для этой статьи я немного переделал таблицу Tabs из IBuySpy:

CREATE TABLE [Tabs]   (              [TabID] [int] IDENTITY (1, 1) NOT NULL,              [TabOrder] [int] NOT NULL,              [TabName] [nvarchar] (50) NOT NULL,              [ParentTab] [int] NOT NULL   ) ON [PRIMARY]  GO


TabID – идентификатор закладки,

TabOrder – порядковый номер закладки,

TabName – имя закладки,

ParentTab – указывает на идентификатор родительской закладки или имеет -1, если это верхний уровень меню.

Также необходимо написать пару процедур. Одну для составления списка меню из закладок (Tabs):

CREATE PROCEDURE GetMenuItems   AS   SELECT         TabID,       TabOrder,       TabName   FROM       Tabs   WHERE       ParentTab = -1   ORDER BY       TabOrder   GO


И еще одну для получения подменю для текущей закладки:

CREATE PROCEDURE GetSubMenuItems   (       @ParentTab int   )   AS   SELECT         TabID,       TabOrder,       TabName   FROM       Tabs   WHERE       ParentTab = @ParentTab   ORDER BY       TabOrder   GO


Надеюсь, тут все ясно. В принципе, можно обойтись только второй процедурой, передавая ей в качестве параметра -1 для заглавного меню. Но для большей простоты и наглядности оставим все как есть.

В качестве примера наполним таблицу следующими значениями:

На этом наша работа с SQL Server закончена, переходим к кодированию проекта.

2. Кодирование пользовательского элемента

Создадим для сего произведения новый проект. Он будет состоять из простой формы с таблицей для тестирования, класса для доступа к данным и собственно пользовательского элемента.

Для доступа к данным из базы создадим свой класс DataSource. Вот его код:

using System;   using System.Configuration;   using System.Data;   using System.Data.SqlClient;   namespace Daenur.TabList   {     /// <summary>     /// Summary description for DataSource.     /// </summary>     public class DataSource     {       public SqlDataReader GetMenuItems()       {         // создаем соединение (connectionString берем из Web.config)         SqlConnection myConnection = new SqlConnection(ConfigurationSettings.AppSettings["connectionString"]);         SqlCommand myCommand = new SqlCommand("GetMenuItems", myConnection);         myCommand.CommandType = CommandType.StoredProcedure;// и получаем данные         myConnection.Open();         SqlDataReader reader = myCommand.ExecuteReader(CommandBehavior.CloseConnection);         return reader;       }       public SqlDataReader GetSubMenuItems(int parentTab)       {         // создаем соединение (connectionString берем из Web.config)         SqlConnection myConnection = new SqlConnection(ConfigurationSettings.AppSettings["connectionString"]);         SqlCommand myCommand = new SqlCommand("GetSubMenuItems", myConnection);         // добавляем параметр - № родительской закладки         SqlParameter parameterParentTab = new SqlParameter("@ParentTab", SqlDbType.Int, 4);         parameterParentTab.Value = parentTab;         myCommand.Parameters.Add(parameterParentTab);         myCommand.CommandType = CommandType.StoredProcedure;         // и получаем данные         myConnection.Open();         SqlDataReader reader = myCommand.ExecuteReader(CommandBehavior.CloseConnection);         return reader;       }     }   }


Примечание: для тех, кто не знает, как использовать Web.config для хранения строки соединения, приведу пример:

<appSettings>    <!-- строка соединения с базой -->    <add key="ConnectionString" value="server=localhost;database=TabList;uid=<Ваш_логин>;password=<Ваш_пароль>;" />   </appSettings>


Теперь создадим в проекте новый пользовательский элемент управления и назовем его TabList. В файле TabList.ascx напишем следующее:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="TabList.ascx.cs" Inherits="Daenur.TabList.TabList" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>   <table id="menuTable" height="*" cellSpacing="0" cellPadding="0" width="*" border="1" runat="server">   </table>   <script language="javascript" type="text/javascript">   var currentSubMenu = null;   var currentSubMenuNum = 0;   var closeTimer = null;   function openSubMenu(num)   {     var subMenu = document.getElementById("TabList_subMenu" + num);     if (subMenu != null)     {       cancelCloseTime();       subMenu.style.display='';       if ((currentSubMenu != null) && (currentSubMenuNum != num))       {         currentSubMenu.style.display='none';       }       currentSubMenu = subMenu;       currentSubMenuNum = num;     }   }   function closeTime()   {     closeTimer = window.setTimeout(closeMenu, 1000);   }   function cancelCloseTime()   {     if (closeTimer != null)     {       window.clearTimeout(closeTimer);       closeTimer = null;     }   }   function closeMenu()   {     if (currentSubMenu != null)     {       currentSubMenu.style.display='none';       currentSubMenu = null;       currentSubMenuNum = 0;     }   }   document.onclick = closeMenu;   </script>


Пока сам элемент это пустая таблица, которая будет наполняться данными из базы и автоматически создавать структуру меню при загрузке страницы. Скрипт здесь нужен для показа или скрытия подменю. При наведении курсора на пункт меню его подменю появляется, а при клике на форме или просто после покидания пункта меню курсором – исчезает.

Файл с кодом (TabList.cs) выглядит так:

namespace Daenur.TabList   {     using System;     using System.Data;     using System.Data.SqlClient;     using System.Web;     using System.Web.UI;     using System.Web.UI.HtmlControls;     /// <summary>     /// Summary description for TabList.     /// </summary>     // Направление меню (горизонтальное или вертикальное)     public enum repeatDirection{Horizontal = 0, Vertical};     public abstract class TabList : System.Web.UI.UserControl     {       protected System.Web.UI.HtmlControls.HtmlTable menuTable;       private DataSource data = new DataSource();// источник данных       public repeatDirection RepeatDirection; // направление меню       private void Page_Load(object sender, System.EventArgs e)       {        // Put user code to initialize the page here         DataBind();       }       public override void DataBind()       {      // получаем все закладки         SqlDataReader menuItems = data.GetMenuItems();// если меню горизонтальное         if (RepeatDirection == repeatDirection.Horizontal)         {          // то формируем строку в нашей таблице           HtmlTableRow tr = new HtmlTableRow();           tr.ID = "menu";           tr.Attributes.Add("runat", "server");           while (menuItems.Read())           {             HtmlTableCell td = new HtmlTableCell();             td.ID = "menuItem" + menuItems["TabOrder"];             // создаем код закладки - ссылки            // (здесь: onmouseout и onmouseover - события, обработчики которых находятся в скрипте)             string HtmlText = @"<nobr> &nbsp; <a onmouseout=""closeTime()"" onmouseover=""openSubMenu(" +     menuItems["TabOrder"] + @")"" href=""" + menuItems["TabOrder"] + @"""> Tab" +     menuItems["TabOrder"] + " </a> &nbsp; </nobr>";             td.Controls.Add(new LiteralControl(HtmlText));             // для каждой закладки создаем свою таблицу - подменю             td.Controls.Add(SubMenu((int) menuItems["TabOrder"]));             tr.Controls.Add(td);           }           menuTable.Controls.Add(tr);         }         else // RepeatDirection.Vertical         {          // иначе формируем столбец           // (все остальное аналогично)           while (menuItems.Read())           {             HtmlTableRow tr = new HtmlTableRow();             tr.ID = "menu";             tr.Attributes.Add("runat", "server");             HtmlTableCell td = new HtmlTableCell();             td.ID = "menuItem" + menuItems["TabOrder"];             string HtmlText = @"&nbsp; <a onmouseout=""closeTime()"" onmouseover=""openSubMenu(" +     menuItems["TabOrder"] + @")"" href=""" + menuItems["TabOrder"] + @"""> Tab" +     menuItems["TabOrder"] + " </a> &nbsp;";             td.Controls.Add(new LiteralControl(HtmlText));             td.Controls.Add(SubMenu((int) menuItems["TabOrder"]));             tr.Controls.Add(td);             menuTable.Controls.Add(tr);           }         }       }       /// <summary>       ///   Функция, создающая подменю для нужной закладки       /// </summary>       private HtmlTable SubMenu(int tabOrder)       {        // получаем все закладки для подменю         SqlDataReader subMenuItems = data.GetSubMenuItems(tabOrder);        // создаем таблицу подменю         HtmlTable tbl = new HtmlTable();         tbl.ID = "subMenu" + tabOrder.ToString();         tbl.Style.Add("display", "none");// скрыта по умолчанию         tbl.Style.Add("position", "absolute");// появляется поверх всего   //    tbl.Style.Add("filter", "alpha (opacity=75)"); // прозрачность         tbl.Attributes.Add("cellSpacing", "0");         tbl.Attributes.Add("cellPadding", "0");         tbl.Attributes.Add("width", "160px");         tbl.Attributes.Add("border", "1");         tbl.Attributes.Add("bgcolor", "white");        // назначаем обработчики событий         tbl.Attributes.Add("onmouseover", "cancelCloseTime()");// при наведении курсора         tbl.Attributes.Add("onmouseout", "closeTime()");// при выходе за пределы подменю         // формируем столбец, состоящий из ссылок         while (subMenuItems.Read())         {           HtmlTableRow tr = new HtmlTableRow();           HtmlTableCell td = new HtmlTableCell();           td.InnerHtml = @"&nbsp; <a href=""" + tabOrder + "-" + subMenuItems["TabOrder"] + @"""> SubTab" +      tabOrder + "-" + subMenuItems["TabOrder"] + "</a> &nbsp;";           tr.Cells.Add(td);           tbl.Controls.Add(tr);         }         return tbl;// возвращаем готовое подменю       }       #region Web Form Designer generated code       override protected void OnInit(EventArgs e)       {                  //                // CODEGEN: This call is required by the ASP.NET Web Form Designer.                //        InitializeComponent();         base.OnInit(e);       }       /// <summary>       /// Required method for Designer support - do not modify       /// the contents of this method with the code editor.       /// </summary>      private void InitializeComponent()       {         this.Load += new System.EventHandler(this.Page_Load);       }       #endregion     }   }


Для тестирования нашего меню необходима HTML страница, содержащая наш элемент. Вот HTML код основной формы:

<%@ Register TagPrefix="TabListControl" TagName="TabList" Src="TabList.ascx" %>   <%@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="Daenur.TabList.DefaultForm" %>   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >   <HTML>    <HEAD>     <title>DefaultForm</title>    </HEAD>    <body MS_POSITIONING="GridLayout">     <TABLE height="523" cellSpacing="0" cellPadding="0" width="174" border="0" ms_2d_layout="TRUE">      <TR vAlign="top">       <TD width="174" height="523">        <form id="DefaultForm" name="DefaultForm" action="Default.aspx" method="post">         <TABLE height="157" cellSpacing="0" cellPadding="0" width="511" border="0" ms_2d_layout="TRUE">          <TR vAlign="top">           <TD width="10" height="15"></TD>           <TD width="501"></TD>          </TR>          <TR vAlign="top">           <TD height="142"></TD>           <TD>            <table height="141" cellSpacing="0" cellPadding="0" width="500">             <tr>              <td width="20"></td>              <td width="*">               <TABLISTCONTROL:TABLIST id="TabList" runat="server" RepeatDirection="Horizontal"></TABLISTCONTROL:TABLIST>             </td>              <td width="20"></td>             </tr>             <tr>              <td width="20"></td>              <td width="*"></td>              <td width="20">              </td>             </tr>            </table>           </TD>          </TR>         </TABLE>        </form>       </TD>      </TR>     </TABLE>    </body>   </HTML>


Здесь все просто. Мы создали на форме таблицу и в одну из ее ячеек поместили наш элемент TabList.

Таким образом, получаем само меню в виде таблицы со строкой или столбцом элементов в зависимости от заданного направления и скрытые таблицы – подменю. Видимыми их делает выполнение скрипта при наведении курсора.

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

RepeatDirection="Horizontal" на RepeatDirection="Vertical"


В результате:

Заключение

Как видите, все довольно просто (а Вы как хотели icon smile Всплывающее меню для одностраничного портала ). Я показал, как можно расширить функциональность одностраничного портала, похожего на IBuySpy. Извиняюсь за возможные недочеты. В этом примере показана только суть. Остальное Вы сможете легко реализовать сами. Например, можно прикрутить сюда какую-нибудь графику или просто добавить новые свойства вроде цвета фона. Успехов в изучении новых технологий!

Поделиться в соц. сетях

mailru Всплывающее меню для одностраничного портала
facebook Всплывающее меню для одностраничного портала
odnoklassniki Всплывающее меню для одностраничного портала
livejournal Всплывающее меню для одностраничного портала
googlebuzz Всплывающее меню для одностраничного портала

Также рекомендуем:

  1. Пример создания многоязыкового приложения (XML) Введение Вопрос разработки многоязычного web – приложения (сайта) или приложения с поддержкой интерфейса пользователя на разных языках, поднимается довольно часто. Если еще пару лет назад данная задача была не так актуальна, то сейчас подобная функциональность де – факто стала одним из требований заказчика при создании web – ориентированного приложения.. Формулировка задачи Целью данной работы является [...]...
  2. Использование шаблонов при программировании WEB-приложений ЗАЧЕМ ВООБЩЕ ИСПОЛЬЗОВАТЬ ШАБЛОНЫ? Может, кто-то скажет, а зачем выносить HTML код в отдельный файл если его можно спокойно писать в скрипте? Да конечно в скрипте можно писать HTML код, но просмотреть полностью «собранную», или частично «собранную» страницу которую выводит скрипт, возможно только при его нормальной работе, а во время отладки скрипта, как правило, возникают [...]...
  3. tmp профессиональный дизайн; регистрация домена .RU на 1 год; наполнение до 10 страниц сайта; блок новостей; прайс-лист; форма заказа с сайта; регистрация в поисковых системах; счетчик посещений; срок изготовления 3-5 дней. акция 3990=...
  4. Обход ограничений безопасности в PHP Программа:PHP 4.xPHP 5.0.xPHP 5.1.x Опасность: Низкая Наличие эксплоита: Да . Описание: Обнаруженные уязвимости позволяют локальному пользователю обойти ограничения безопасности. 1. Функция "mb_send_mail()" позволяет передавать дополнительные параметры sendmail с помощью параметра "additional_parameter". Злоумышленник может заставить sendmail прочитать произвольный файл в качестве конфигурационного файла и сохранить результат в произвольную доступную для записи директорию на системе. Злоумышленник может [...]...
  5. Работа с SQLite Введение SQLite – это реляционная база данных, запросы к которой можно осуществлять при помощи языка запросов SQL. База данных не поддерживает все особенности SQL и уступает в функциональности другим развитым СУБД, но вполне подходит для хранения и извлечения информации.. Отличие SQLite от MySQL и аналогичных СУБД Классические СУБД, такие как MySQL (а так же MS [...]...
  6. Создание сайтов с возможностью печати PDF на примере PDF::AP Хотелось бы рассмотреть преимущества формата PDF (Portable Document Format), разработанного компанией Sun Microsystems, а также где и почему стоит использовать формат PDF при создании сайтов.Пожалуй, вам несколько раз встречалась необходимость печати документов прямо из Интернета. Это могут быть счета, квитанции, данные для печати на шаблоне.Возможно, вам также приходилось встречаться с особенностями печати подобных документов, оформленных [...]...
  7. Работа с шаблонами. Разработка собственных и использование существующих решений. В этом выпуске мы поговорим о такой вещи как темплейты (templates) – что это такое, зачем это нужно и почему почти все это используют. Но сначала, как обычно, немного новостей.. Новости А новости таковы, что версия PHP 4.1.0, о создании которой я говорил в предыдущем выпуске вышла! Правда пока что она доступна лишь в виде [...]...
  8. Подсвечивание кода с помощью jQuery и Chili В этом руководстве мы научимся подсвечивать исходный код с помощью плагина Chili для jQuery. Мы узнаем, как видоизменять Chili для повышения читаемости и удобства использования подсветки в собственных функциях.. [Демо] [Исходный код] Введение В первом руководстве вы узнаете, как подсвечивать исходный код с помощью плагина jQuery Chili. И это не очередная быстрая справка по Chili: [...]...
  9. Сложные графики и диаграммы в ASP.NET. Часть пятая – интерактивность. Введение В предыдущей статье речь шла об использовании диаграмм ChartSpace, входящих в состав библиотеки owc11. Мы продолжим изучение этой библиотеки, но в более сложном применении. В данном случае нас интересует интерактивность (то есть обратная связь). Только представьте себе: пользователь увидел круговую диаграмму, нажал мышью по интересующему его сектору, и тут же получил на месте круговой [...]...
  10. MySQL – это просто! Сначала ответим на вопрос – что такое MySQL? Это База Данных (БД), в которой структурировано хранятся данные. Следует второй вопрос – зачем отказываться от простых и удобных файлов к сложной БД? Потому что файлы, генерируемые каким либо скриптом на основе файловой БД (гостевые книги, CMS, форумы), постепенно начинают увеличиваться в размере, а так же их [...]...
  11. Не цепляйтесь за запросы! 2 подхода к продвижению сайтов: «только по запросам», «общее увеличение трафика» Очень часто, когда новый клиент приходит заказывать услуги по оптимизации сайтов, от него слышна фраза:«интересует вывод на первые позиции по запросам».Далее он перечисляет несколько наиболее важных, по его мнению, запросов. Как правило, такого клиента больше ничего не интересует, он цепляется за эти запросы и [...]...
  12. Ruby on Rails: Making Programmers Happy David Heinemeier Hansson, the creator of the increasingly popular Ruby on Rails Web application framework, answered a few questions about his creation earlier this week for eWEEK Senior Editor Darryl K. Taft.. What’s the allure of Ruby on Rails? Why do folks love it so? The author of Ruby, Yukihiro Matsumoto, tells us that he [...]...
  13. Лист бумаги Часть первая. 1. Создаем новый документ, называем Paper. 2. Выбираем Rectangular Marquee Tool (М) 3.Выделим весь лист. 4. Выделенное заполняем белым. 5. Заходим Layer>Layer Style>Drop Shadow-Opacity 20%-Distance 2-Spread 0 -Size 1 6. Нажимаем на Stroke.-Size 1px -Outside -Opacity 5% (Внимание! Для каждого размера листа, свои опции!) 7. Выбираем Elliptical Marquee Tool (M) 8. Зажимаем Shift [...]...
  14. GlassBox Описание Недавно обнаружили весьма интересную javascript библиотеку Glassbox.С ее помощью можно создавать прозрачные рамки, цветные полупрозрачные слои и различные визуальные эффекты, такие как плавное появление и исчезновение слоев.. Эта библиотека весьма компактна и включает в себя библиотеки Prototype и Script.aculo.us. К основным плюсам библиотеки можно отнести: * Легкость использования; * Кроссбраузерность (Работает в IE6+ , [...]...
  15. Как нарисовать сердце Новый документ 800×600. Белая заливка.. Выберем инструмент Ellipse-tool (находится под Type tool) и нарисуем держа Shift окружность. Гордо крикнем: «Мама! Иди посматри, у меня тут ВЕКТОР!»…после объятий и поздравлений от вашей семьи, растолкаем собравшихся от нашего рабочего места, и продолжим. Выберем Convert Point tool… будем надеятся что никто не увидит вашего позора, когда вы прочитав [...]...

Комментарии запрещены.