Пример JQuery UI - подсказке окно (подсказке)

Опыт работы : Jquery UI пример - вкладки (Tabs)

Далее: JQuery UI пример - специальные эффекты (эффекты)

Настраиваемый, themable подсказке окно, заменить родную коробку в подсказке.

Для получения более подробной информации о элементе подсказке см API документации элемент подсказке окно (подсказка виджет) .

По умолчанию функция

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI подсказке окно (подсказке) - Функция по умолчанию </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ (Документ) .tooltip ();
  });
  </ Script>
  <Style>
  этикетка {
    Дисплей: встроенный блок;
    ширина: 5em;
  }
  </ Style>
</ Head>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltips </a> он может быть привязан к любому элементу. При наведении курсора на элемент, название свойство будет отображаться в маленьком поле рядом с элементом, как родные, как ящик режущей кромки инструмента. </ P>
<P> Однако, поскольку он не является родным подсказке окно, так что можно определить стили. Тема с помощью <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> создан также могут быть определены стили соответственно всплывающих подсказок окна. </ P>
<P> подсказке окно также может быть использован для формирования элементов для отображения в каждом регионе некоторую дополнительную информацию. </ P>
<P> <метка для = "возраст"> Ваш возраст: </ метка> <ввод ID = "возраст" название = ". Возраст используется только для статистической"> </ p>
<P> наведите курсор мыши на соответствующую область, чтобы просмотреть окно подсказке. </ P>
 
 
</ Body>
</ HTML>

Пользовательский стиль

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI подсказке окно (всплывающая подсказка) - Пользовательский стиль </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ (Документ) .tooltip ({
      Позиция: {
        мой: "Центр снизу-20",
        в: "центре верхней",
        используя: функцию (позиция, обратная связь) {
          $ (Это) .css (положение);
          $ ( "<Div>")
            .addClass ( "стрелка")
            .addClass (feedback.vertical)
            .addClass (feedback.horizontal)
            .appendTo (это);
        }
      }
    });
  });
  </ Script>
  <Style>
  .ui-подсказке, .arrow: после того, как {
    фон: черный;
    границы: 2px твердый белый;
  }
  .ui-подсказке {
    обивка: 10px 20px;
    цвет: белый;
    граница радиуса: 20px;
    шрифта: жирный шрифт 14px "Helvetica Neue", Sans-Serif;
    текст-преобразование: заглавными буквами;
    коробка-тень: 0 0 7px черный;
  }
  .arrow {
    ширина: 70px;
    высота: 16px;
    переполнение: скрытый;
    позицию: абсолютная;
    Слева направо: 50%;
    Левое поле: -35px;
    внизу: -16px;
  }
  .arrow.top {
    верх: -16px;
    внизу: авто;
  }
  .arrow.left {
    Слева направо: 20%;
  }
  .arrow: после того, как {
    Содержание: "";
    позицию: абсолютная;
    Слева направо: 20px;
    верх: -20px;
    ширина: 25px;
    высота: 25px;
    коробка-тень: 6px 5px 9px -9px черный;
    -webkit-преобразования: поворот (45 градусов);
    -moz-преобразования: поворот (45 градусов);
    -MS-преобразования: поворот (45 градусов);
    -о-преобразование: Поворот (45deg);
    tranform: Rotate (45deg);
  }
  .arrow.top: после того, как {
    внизу: -20px;
    верх: авто;
  }
  </ Style>
</ Head>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltips </a> он может быть привязан к любому элементу. При наведении курсора на элемент, название свойство будет отображаться в маленьком поле рядом с элементом, как родные, как ящик режущей кромки инструмента. </ P>
<P> Однако, поскольку он не является родным подсказке окно, так что можно определить стили. Тема с помощью <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> создан также могут быть определены стили соответственно всплывающих подсказок окна. </ P>
<P> подсказке окно также может быть использован для формирования элементов для отображения в каждом регионе некоторую дополнительную информацию. </ P>
<P> <метка для = "возраст"> Ваш возраст: </ метка> <ввод ID = "возраст" название = ". Возраст используется только для статистической"> </ p>
<P> наведите курсор мыши на соответствующую область, чтобы просмотреть окно подсказке. </ P>
 
 
</ Body>
</ HTML>

Настройка анимации

Этот пример демонстрирует, как использовать показывать и скрывать опции для настройки анимации, вы можете также использовать открытое событие для настройки анимации.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI подсказке окно (подсказке) - Настройка анимации </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Show-опция") .tooltip ({
      шоу: {
        Эффект: "slideDown",
        Задержка: 250
      }
    });
    $ ( "# Hide-опция") .tooltip ({
      скрыть: {
        Эффект: "взрываются",
        Задержка: 250
      }
    });
    $ ( "# Open-событие") .tooltip ({
      шоу: нуль,
      Позиция: {
        мой: "левый верх",
        в: "левом нижнем углу экрана"
      },
      открытая: функция (событие, щ) {
        ui.tooltip.animate ({верх: ui.tooltip.position () верх + 10.}, "быстрый");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Есть несколько способов настройки подсказке окна анимации. </ P>
<P> Вы можете использовать <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> шоу </a> и <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> скрыть </a> вариант. </ P>
<P> Вы можете также использовать <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> открытую </a> событие. </ P>
 
 
</ Body>
</ HTML>

Пользовательские Содержимое

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

Вам может понадобиться карта взаимодействия в подсказке окно, которое будущая версия функции должна быть реализована.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI подсказке окно (подсказке) - Пользовательские содержание </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .photo {
    ширина: 300px;
    выравнивания текста: центр;
  }
  .photo .ui-виджет-заголовок {
    Запас: 1em 0;
  }
  .map {
    ширина: 350 пикселей;
    Высота: 350 пикселей;
  }
  .ui-подсказке {
    макс-ширина: 350 пикселей;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Документ) .tooltip ({
      пункты: "IMG, [данных гео], [название]",
      Содержание: функция () {
        вар элемент = $ (это);
        если (element.is ( "[данных гео]")) {
          вар текст = element.text ();
          возвращение "<класс IMG = 'карта' Alt = '" + текст +
            " 'Src =' HTTP: //maps.google.com/maps/api/staticmap?" +
            "Zoom = 11 & размер = 350х350 & MapType = рельеф местности и датчик = ложно & центр =" +
            текст + " '>";
        }
        если (element.is ( "[название]")) {
          вернуть element.attr ( "название");
        }
        если (element.is ( "IMG")) {
          вернуть element.attr ( "Alt");
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div класс = "UI-виджета фото">
  <Div класс = "UI-виджета-заголовка пользовательский интерфейс угла всех">
    <H2> Собор Святого Стефана (Собор Святого Стефана) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo=""> Вена, Австрия (Вена, Австрия) </a> < / h3>
  </ Div>
  <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
    <Img SRC = "../ сор-содержание / добавления / 2014/03 / ст-stephens.jpg" Alt = "Собор Святого Стефана (St. Stephen & ина собор)" класс = "Пользовательский интерфейс угла всех">
  </a>
</ Div>
 
<Div класс = "UI-виджета фото">
  <Div класс = "UI-виджета-заголовка пользовательский интерфейс угла всех">
    <H2> Тауэрский мост (Tower Bridge) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo=""> London (Лондон, Англия) </a> < / h3>
  </ Div>
  <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
    <Img SRC = "../ сор-содержание / добавления / 2014/03 / башня-bridge.jpg" Alt = "Тауэрский мост (Tower Bridge)" класс = "Пользовательский интерфейс угла всех">
  </a>
</ Div>
 
<P> Все изображения из <a href="http://commons.wikimedia.org/wiki/Main_Page"> Викисклада </a> и принадлежат <A HREF = "http://creativecommons.org/~~HEAD=pobj лицензии / BY-SA / 3,0 / deed.en "название =" Creative Commons Attribution-ShareAlike 3.0 "> CC BY-SA 3.0 </a> под владельцев авторских прав. </ P>
 
 
</ Body>
</ HTML>

форма

Используйте кнопку, расположенную ниже, чтобы отобразить текст справки, или просто дайте вашей наведению мыши над полем ввода или иметь поле ввода имеет фокус, вы можете отобразить текст справки соответствующего поле ввода.

Определить фиксированную ширину в CSS, так что одновременно отображает всю необходимую помощь текст выглядит более последовательным.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI подсказке окно (всплывающая подсказка) - Формы </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  этикетка {
    Дисплей: встроенный блок; ширина: 5em;
  }
  FIELDSET DIV {
    краю дна: 2em;
  }
  FIELDSET .help {
    Дисплей: встроенный блок;
  }
  .ui-подсказке {
    ширина: 210px;
  }
  </ Style>
  <Script>
  $ (Function () {
    вар всплывающие подсказки = $ ( "[название]") .tooltip ();
    $ ( "<Button>")
      .text ( "Показать помощь")
      .button ()
      .click (функция () {
        tooltips.tooltip ( "открытый");
      })
      .insertAfter ( "форма");
  });
  </ Script>
</ Head>
<Body>
 
<Форма>
  <Fieldset>
    <Div>
      <Ярлык = "FirstName"> имя </ метка>
      <ID = Введите имя "Имя" = "Firstname" название = "Пожалуйста, укажите свое имя.">
    </ Div>
    <Div>
      <Ярлык = "LastName"> Фамилия </ метка>
      <ID = "Lastname" Введите имя = "Lastname" название = "Пожалуйста, укажите свою фамилию.">
    </ Div>
    <Div>
      <Ярлык = "адрес"> адрес </ метка>
      <Input ID = "адрес" имя = "адрес" название = "ваш домашний или рабочий адрес.">
    </ Div>
  </ Fieldset>
</ Форма>
 
 
</ Body>
</ HTML>

Отслеживание мыши

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI подсказке окно (всплывающая подсказка) - отслеживание мыши </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  этикетка {
    Дисплей: встроенный блок;
    ширина: 5em;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Документ) .tooltip ({
      Трек: правда
    });
  });
  </ Script>
</ Head>
<Body>

<P> <a href="#" title="部件的名称"> Tooltips </a> он может быть привязан к любому элементу. При наведении курсора на элемент, название свойство будет отображаться в маленьком поле рядом с элементом, как родные, как ящик режущей кромки инструмента. </ P>
<P> Однако, поскольку он не является родным подсказке окно, так что можно определить стили. Тема с помощью <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> создан также могут быть определены стили соответственно всплывающих подсказок окна. </ P>
<P> подсказке окно также может быть использован для формирования элементов для отображения в каждом регионе некоторую дополнительную информацию. </ P>
<P> <метка для = "возраст"> Ваш возраст: </ метка> <ввод ID = "возраст" название = ". Возраст используется только для статистической"> </ p>
<P> наведите курсор мыши на соответствующую область, чтобы просмотреть окно подсказке. </ P>
 
 
</ Body>
</ HTML>

видеоплеер

Виртуальный видеоплеер с кнопки, как / доля / статистики, каждая кнопка с пользовательские стили подсказке окна.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI подсказке окно (подсказке) - Video Player </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .player {
    ширина: 500px;
    высота: 300px;
    границы: 2px паз серый;
    фон: RGB (200, 200, 200);
    выравнивания текста: центр;
    высота линии: 300px;
  }
  .ui-подсказке {
    границы: 1px твердый белый;
    фон: RGBA (20, 20, 20, 1);
    цвет: белый;
  }
  .set {
    Дисплей: встроенный блок;
  }
  .notification {
    позицию: абсолютная;
    Дисплей: встроенный блок;
    размер шрифта: 2em;
    обивка: .5em;
    коробка-тень: 2px 2px 5px -2px RGBA (0,0,0,0.5);
  }
  </ Style>
  <Script>
  $ (Function () {
    функция уведомляет (вход) {
      переменная тзд = "Selected" + $ .trim (input.data ( "подсказке-заголовок") || input.text ());
      $ ( "<Div>")
        .appendTo (document.body)
        .text (MSG)
        .addClass ( "уведомление UI-состоянии по умолчанию пользовательский интерфейс угла сверху вниз")
        .position ({
          мой: "центр сверху",
          в: "центре верхней",
          из: окна
        })
        .show ({
          Эффект: "слепой"
        })
        .delay (1000)
        .hide ({
          Эффект: "слепой",
          продолжительность: "медленный"
        }, Функция () {
          $ (Это) .remove ();
        });
    }
 
    $ ( "Button") .each (функция () {
      Кнопка переменная = $ (это) .button ({
        иконки: {
          первичная обмотка: $ (это) .data ( "иконка")
        },
        текст: !! $ (это) .attr ( "название")
      });
      button.click (функция () {
        уведомить (кнопка);
      });
    });
    $ ( ".set") .buttonset ({
      пункты: "Кнопка"
    });
 
    $ (Документ) .tooltip ({
      Позиция: {
        мой: "центр сверху",
        в: "центре нижней части + 5",
      },
      шоу: {
        продолжительность: "быстрый"
      },
      скрыть: {
        Эффект: "скрыть"
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div класс = "игрок"> Вот видео (HTML5?) </ Div>
<Div класс = "Инструменты">
  <Span класс = "набор">
    <-Значок данных Кнопка = "Пользовательский интерфейс-значок круга со стрелкой-н" название = "Мне нравится это видео"> </ Button>, как
    <Кнопка данных значок = "UI-значок круга со стрелкой-s"> Мне не нравится это видео </ кнопка>
  </ Span>
  <Div класс = "набор">
    <Данных значок Кнопка = "Пользовательский интерфейс-значок круга плюс" название = "Добавить в список"> Добавить в </ Button>
    <Класс Button =-значок данных "меню" = "Пользовательский интерфейс-значок-треугольник-1-s"> Добавить в избранное </ кнопка>
  </ Div>
  Кнопка <название = "Вставить видео"> Поделиться </ кнопка>
  <-Значок данных Кнопка = "Пользовательский интерфейс-значок-предупреждение"> отмечен как несоответствующей кнопки </>
</ Div>
 
 
</ Body>
</ HTML>

Опыт работы : Jquery UI пример - вкладки (Tabs)

Далее: JQuery UI пример - специальные эффекты (эффекты)

jQuery UI курс

jQuery UI тема

jQuery UI Библиотека компонентов

jQuery UI справочное руководство

jQuery UI примеров