Может ли кто-нибудь сказать мне, как использовать подсказку jQuery для управления аккордеон jQuery?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Accord').accordion(
{
create: function (event, ui) {
$('.ui-accordion-header').attr("disabled", true);
}
});
})
$(document).tooltip();
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="row" id="Accord">
<h2>Getting started</h2>
<div class="col-md-4">
<p>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
<h2>Get more libraries</h2>
<div class="col-md-4">
<p>
NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
</p>
</div>
<h2>Web Hosting</h2>
<div class="col-md-4">
<p>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
</p>
</div>
</div>
</form>
</body>
</html>
Выше мой пример кода. Пожалуйста, расскажите мне, как я могу интегрировать всплывающую подсказку с аккордеон? Я хочу получить определенное содержимое панели при наведении мыши над заголовками аккордеона.
нет необходимости использовать какой-либо плагин. просто напишите его самостоятельно. вы можете поместить свой контент, который хотите отобразить при наведении в пользовательский атрибут (или, например, атрибут rel
), и получить его значение и показать его в абсолютном позиционном диапазоне, сгенерированном jquery.
например:
HTML:
<h2 rel="YOUR CONTENT GOES HERE">Web Hosting</h2>
JQuery:
$(function(){
var ttContent = $('h2').attr('rel');
$('h2').hover(function(){
$(this).append('<span class="ttbox">' + ttContent + '</span>');
},function(){
$(this).children('.ttbox').remove();
});
});
CSS:
h2 { position:relative; }
.ttbox { position:absolute; display:none; top:20px; width:200px; height:30px; display:block; background:#000; color:#fff; }