У меня есть меню, состоящее из 9 изображений, расположенных в 3 строки и 3 столбца.Каждое изображение / значок представляет собой HTML-тег div, который использует указатель мыши для отображения подробных результатов, относящихся к этому значку, в другой части страницы.Конкретные результаты отображаются из файла .cs, который получает данные своего меню из базы данных SQL.Вариант использования состоит из:
- Пользователь выбирает значок и Onmouseover, функция javascript устанавливает значение в текстовое поле, соответствующее значению меню.
- При установке нового значениядля текстового поля свойство autopostback текстового элемента управления запускает _TextChanged в коде позади, чтобы получить новые детали меню и отображать их.div так близко, что отображаются следующие пункты меню.
- Я пытался использовать setTimeout, но не смог заставить его работать.
- Я пытался использовать таймер asp.net для задержкивыполнение кода в файле .cs.
Код, который работает в данный момент:
function fnMenuMouseOver(x) {
var txtMenu = $find("ctl00_TxtModuleMenus");
if (txtMenu !== null) {
if (x == undefined)
txtMenu.set_value(1);
else
txtMenu.set_value(x);
}
}
Я на самом деле ищу элегантное решение и идеи для решения этой проблемы, поэтому я включил рабочий пример, содержащий все 9 иконокв приведенном ниже коде: файлы изображений, которые находятся в соседних div, отображаются следующим образом:
<style>
div.rounded-apps {
border: 2px solid #398bbd;
border: 2px solid silver;
height: 95px;
width: 95px;
margin-left: 10px;
margin-bottom: 10px;
text-align: center;
background-color: White;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-border-radius: 6px; /* Firefox 3.6 and earlier */
}
div.rounded-apps:hover {
background-color: lightgray;
}
div.rounded-apps.detail-menu {
width: 300px;
height: 210px;
}
div.menu {
width: 328px;
}
div.left {
float: left;
}
div.alignL {
text-align: left;
}
div.right {
float: right;
}
div.padding {
padding: 51px;
}
div.apps-activity-grid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABMklEQVRoQ+2a/RHBQBDFf6mADtABnShBB0pABZSgI0qgAjpg1seIS0JymeQumefPONl9u/feu5uV0JNP0hMcCEhsnXQ7sgXmwDi2RJ18TsAe2Lyfp4HsgGXkANz0DMjaHqaBXIAhMAOOfwDdXt+X4VgTa6fAAbDOTFwgTQS0GK28N13RVgI21WkBCcyRzJZVR9SR32z3Fpy8rdUxT3x6Ya+BhHLrWuYp1ZJqtaha4khBsb29ocoBU2TvAtnl7IEqUHhEkWpJtT4V8JZqyW8X5FdkF9kbInsgX/MOqzt7rbt1laN5lbXyEfmI7uyZCnydy8SRmDlyBQYdG4ae36P09NayMe/K21/D/DB3PG2pGJgFMAqTV+mo1gn7w8Bjxu6OFUq/JcaFZe4eMeadyUlAYmvTHYm6tDNaIOrwAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: center;
}
div.apps-activity-grid-filled {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAA3ElEQVRoQ+2YUQ6DMAxDw4nY7n+IsRNtmtSvaIi6kkUUPX4xaetHHegWTa6tyTqChVQjCRGImBzg1TIZu1y2LZFXRDxObDki4pnuldFnIp8LtmX1ZSc2DJ02loWojrn1mchvQ+8n++T9JwjK6NvG73JDuvvBTKRMXxjGTM+H1HKnkFofIqpjbj195O64zeO3bYjTua3mvFtParlTSK0PEdUxt54+Qh8xOcD/iHvzqvWJX9Uxt74tkTLnVIPg9HzafsabUt5fFiJ+j7URIKL55VdDxO+xNgJENL/86i+oboAz+ahFfAAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-position: center;
}
div.apps-data-sheet {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABD0lEQVRoQ+1YwQ3DIAy8bNRM0JXbDbJBs1ErWpBSlNYYYclYxydBWMh39tlOFgAPABfMvW4LgOfcGD7eH4Gk95ZVgLuyDw0kaSatNT/rfR0RF/ZnEdkzgFIA6n0NxIV96NSSBD+N2F3kfK6oidQmf6iRA2MuUjGk2CVmXZ9z1qJG5ATt6lNnYm+q2zNERDs7SRx3MawlKmT5dfWhNCIi1MgPsVAjUhXJ52+iQoq9kQCfZpy1tOXR2j6kRkpDZB9hH/lmoKuBUiPWVUh7/4j/WlKH7EqVEUBcOEYgUhi8n3PW0uawtT37iDXD2vvZR7SMWdtTI9YMa++nRrSMWduH1Ij3ceqvfykiG4Dr1CiA+wsmEAtxix967gAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-position: center;
}
</style>
````
This is the body of the form:
`````
<form id="form1" runat="server">
<div class="menu padding">
<div class="left">Mouse Over to Select Menu.</div>
</div>
<div class="menu left">
<div class="menu">
<div>
<div class="rounded-apps left apps-activity-grid" onmouseover="fnMenuMouseOver(1);">Menu 1</div>
</div>
<div>
<div class="rounded-apps left apps-activity-grid-filled" onmouseover="fnMenuMouseOver(2);">Menu 2 </div>
</div>
<div>
<div class="rounded-apps right apps-data-sheet" onmouseover="fnMenuMouseOver(3);">Menu 3</div>
</div>
</div>
<div class="menu">
<div>
<div class="rounded-apps left apps-activity-grid" onmouseover="fnMenuMouseOver(4);">Menu 4</div>
</div>
<div>
<div class="rounded-apps left apps-activity-grid-filled" onmouseover="fnMenuMouseOver(5);">Menu 5</div>
</div>
<div>
<div class="rounded-apps left apps-data-sheet" onmouseover="fnMenuMouseOver(6);">Menu 6</div>
</div>
</div>
<div class="menu">
<div>
<div class="rounded-apps left apps-activity-grid" onmouseover="fnMenuMouseOver(7);">Menu 7</div>
</div>
<div>
<div class="rounded-apps left apps-activity-grid-filled" onmouseover="fnMenuMouseOver(8);">Menu 8</div>
</div>
<div>
<div class="rounded-apps left apps-data-sheet" onmouseover="fnMenuMouseOver(9);">Menu 9</div>
</div>
</div>
</div>
<div class="menu rounded-apps detail-menu left padding alignL">
<asp:Label ID="MenuSelected" runat="server" Text="Please Select Menu Item."></asp:Label>
</div>
<div class="menu padding">
<div class="left">Hover on Image(If no respnse, then type number to view selected menu (x).</div>
<div class="right">
<br />
<asp:TextBox runat="server" ID="TxtModuleMenus" Text="0" AutoPostBack="true" OnTextChanged="TxtModuleMenus_TextChanged"></asp:TextBox>
</div>
</div>
</form>
````
and finally, this is the _Textchanged file needed to get the detailed menus from the database.
protected void TxtModuleMenus_TextChanged(object sender, EventArgs e)
{
/*SQL database routine not shown here so placeholder code used
to illustrate various menus that would be rendered.
using (SqlConnection cnDsn = new SqlConnection(ConfigurationManager.AppSettings[SessionHelper.SQLDB]))
{
cnDsn.Open();
get menu details & display but below is an alternate placeholder...
*/
StringBuilder sb = new StringBuilder();
int selected;
if (int.TryParse(TxtModuleMenus.Text, out selected))
{
for (int i = 0; i <= 11; i++)
{
var menuLink = $"<a href=\"#\" target=\"_self\">{i}. This is sub-menu displayed for <b>Menu {selected}";
sb.Append(menuLink).Append("</b></a><br/>");
}
MenuSelected.Text = sb.ToString();
}
}
I expect a smooth user experience where mouseover the one icon disables adjacent mouseover so the first selection is always displayed.