Руководство пользователя Отмена

Использование эффектов jQuery в Dreamweaver

 

 

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

Добавление эффектов jQuery

  1. В представлении «Дизайн» или «Код» документа Dreamweaver выберите элемент, к которому требуется добавить эффект jQuery.

  2. Выберите команду меню «Окно» > «Поведение», чтобы открыть панель «Поведение».

  3. Щелкните значок «плюс», щелкните Эффекты, а затем выберите требуемый эффект.

    Добавление эффектов jQuery
    Добавление эффектов jQuery

    На экране появится панель настроек с параметрами выбранного эффекта.

  4. Укажите параметры, например целевой элемент, к которому будет применен эффект, а также продолжительность эффекта.

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

  5. Для добавления нескольких эффектов jQuery повторяйте описанные выше действия.

    При выборе нескольких эффектов Dreamweaver применяет их в том порядке, в котором они расположены на панели «Поведение». Чтобы изменить порядок эффектов, используйте клавиши со стрелками, расположенные в верхней части панели.

Dreamweaver автоматически вставит в документ соответствующий код. Например, при выборе эффекта «Растворение» добавляется следующий код:

  • Ссылка на внешние файлы, которые необходимы для работы эффектов jQuery:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
  • Следующий код добавляется к элементу в теге body:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
  • Добавляется тег сценария вместе со следующим кодом:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

Эффекты jQuery на основе событий

При применении эффекта jQuery по умолчанию он назначается событию onClick. С помощью панели «Поведение» событие, по которому запускается эффект, можно изменить.

  1. Выберите нужный элемент страницы.

  2. На панели «Окно» > «Поведение» щелкните значок «Показать заданные события».

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

  4. Щелкните требуемое событие.

Удаление эффектов jQuery

  1. Выберите нужный элемент страницы.

    На панели «Поведение» будет приведен список всех эффектов, которые применены к выбранному элементу страницы.

  2. Нажмите эффект, который требуется удалить, затем щелкните значок «Удалить».

Получайте помощь быстрее и проще

Новый пользователь?