Добавление элемента "аккордеон" jQueryUI в клиентскую веб-часть SharePoint

Чтобы добавить в проект веб-части элемент "аккордеон" jQueryUI, требуется создать новую веб-часть, как показано на следующем изображении.

Прежде чем начинать, выполните следующие действия:

• Создайте свою первую веб-часть.

Вы также можете следовать этому руководству, посмотрев это видео на канале YouTube сообщества платформы Microsoft 365 (PnP):

Цепочка инструментов разработчика использует Webpack & SystemJS для упаковки и загрузки веб-частей. При этом загружаются возможные внешние зависимости, такие как jQuery и jQueryUI. Для загрузки внешних зависимостей на более высоком уровне:

• Получите внешнюю библиотеку с помощью NPM или скачайте ее непосредственно на сайте поставщика.
• Установите объявления типов TypeScript для соответствующей платформы (при наличии).
• При необходимости обновите конфигурацию решения, чтобы в пакет веб-части не добавлялась внешняя зависимость.

Создание новый проект веб-части

1. Создайте каталог проекта в удобном для вас расположении:

   md jquery-webpart
   

2. Перейдите к каталогу проекта:

   cd jquery-webpart
   

3. Создайте новый проект, запустив генератор Yeoman для SharePoint из созданного вами нового каталога:

   yo @microsoft/sharepoint
   

   Генератор Yeoman для SharePoint предложит вам ответить на ряд вопросов. Для всех вопросов, за исключением приведенных ниже, примите параметры по умолчанию:

   • Какой тип клиентского компонента нужно создать? WebPart
   • Какую платформу использовать?: Не использовать платформу на базе JavaScript

После этого Yeoman установит необходимые зависимости и сформирует шаблоны файлов решения, включая веб-часть. Это может занять несколько минут.

Установка пакетов NPM jQuery и jQuery UI

Веб-часть использует jQuery и элемент"аккордеон", включенный в проект jQuery UI. Чтобы использовать эти элементы, добавьте их в зависимости проекта:

1. Введите в консоли следующий код, чтобы установить пакет NPM jQuery:

   npm install jquery@2
   

2. Затем введите следующий код, чтобы установить пакет NPM jQuery:

   npm install jqueryui
   

3. Затем необходимо установить объявления типов TypeScript для нашего проекта, чтобы упростить процесс разработки.

   На консоли выполните следующие команды для установки пакетов объявления типа:

   npm install @types/jquery@2 --save-dev
   npm install @types/jqueryui --save-dev
   

Исключите внешние зависимости из пакета веб-части

По умолчанию все зависимости, на которые ссылается код проекта, включены в итоговый пакет веб-части. В большинстве случаев этот вариант не идеален, так как он без необходимости увеличивает размер файла. Вы можете настроить проект, исключив зависимости из пакета веб-части, и вместо этого дать указание среде выполнения SharePoint Framework загрузить их в качестве зависимостей перед загрузкой пакета веб-части.

1. В Visual Studio Code (VS Code) откройте файл config\config.json.

   Этот файл содержит сведения о пакетах и возможных внешних зависимостях.

   Свойство bundles содержит стандартную информацию о пакете. В данном случае это пакет веб-части jQuery. Каждой веб-части, добавленной в решение, соответствует одна запись.

   "bundles": {
     "j-query-web-part": {
       "components": [
         {
           "entrypoint": "./lib/webparts/jQuery/JQueryWebPart.js",
           "manifest": "./src/webparts/jQuery/JQueryWebPart.manifest.json"
         }
       ]
     }
   },
   

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

   "externals": {},
   

3. Исключите jQuery и jQueryUI из созданного пакета, добавив следующие два модуля в свойство externals:

   {
     "externals": {
       "jquery": "node_modules/jquery/dist/jquery.min.js",
       "jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
     },
   }
   

   Теперь при создании проекта jQuery и jQueryUI не будут добавляться в пакет веб-части по умолчанию.

   Готовый файл config.json должен выглядеть примерно следующим образом:

   {
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
     "version": "2.0",
     "bundles": {
       "j-query-web-part": {
         "components": [
           {
             "entrypoint": "./lib/webparts/jQuery/JQueryWebPart.js",
             "manifest": "./src/webparts/jQuery/JQueryWebPart.manifest.json"
           }
         ]
       }
     },
     "externals": {
       "jquery": "node_modules/jquery/dist/jquery.min.js",
       "jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
     },
     "localizedResources": {
       "JQueryWebPartStrings": "lib/webparts/jQuery/loc/{locale}.js"
     }
   }
   

Создание элемента Accordion

На этом этапе проект настроен как зависимый от jQuery и jQueryUI, но он не включает их в итоговый пакет решения. Следующим шагом является реализация веб-части путем добавления в веб-часть элемента "аккордеон".

Добавьте HTML-код элемента "аккордеон"

1. В VS Code добавьте новый файл MyAccordionTemplate.ts в папку ./src/webparts/jQuery.

2. Добавьте класс MyAccordionTemplate, содержащий HTML-код для элемента "аккордеон". Добавьте следующий код в файл MyAccordionTemplate.ts:

   export default class MyAccordionTemplate {
     public static templateHtml: string =  `
       <div class="accordion">
         <h3>Section 1</h3>
         <div>
             <p>
             Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
             ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
             amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
             odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
             </p>
         </div>
         <h3>Section 2</h3>
         <div>
             <p>
             Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
             purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
             velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
             suscipit faucibus urna.
             </p>
         </div>
         <h3>Section 3</h3>
         <div>
             <p>
             Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
             Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
             ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
             lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
             </p>
             <ul>
             <li>List item one</li>
             <li>List item two</li>
             <li>List item three</li>
             </ul>
         </div>
         <h3>Section 4</h3>
         <div>
             <p>
             Cras dictum. Pellentesque habitant morbi tristique senectus et netus
             et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
             faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
             mauris vel est.
             </p>
             <p>
             Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
             Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
             inceptos himenaeos.
             </p>
         </div>
     </div>`;
   }
   

3. Сохраните файл.

Импортируйте HTML-код элемента "аккордеон"

1. В VS Code откройте ./src/webparts/jQuery/JQueryWebPart.ts.

2. Добавьте следующий оператор import сразу после имеющихся операторов import в верхней части файла:

   import MyAccordionTemplate from './MyAccordionTemplate';
   

Импорт jQuery и jQueryUI

1. Импортируйте jQuery в свою веб-часть так же, как импортировали MyAccordionTemplate.

   Добавьте следующий оператор import после других операторов import:

   import * as jQuery from 'jquery';
   import 'jqueryui';
   

2. В проекте на jQueryUI используется внешний CSS-файл для реализации пользовательского интерфейсе. Во время выполнения веб-части необходимо загрузить следующий CSS-файл:

   1. Чтобы загрузить CSS-файл во время выполнения, используйте загрузчик модулей SharePoint с помощью объекта SPComponentLoader.

      Добавьте приведенный ниже оператор import.

      import { SPComponentLoader } from '@microsoft/sp-loader';
      

   2. Загрузите стили jQueryUI в классе JQueryWebPart веб-части, добавив конструктор и используя SPComponentLoader.

      Добавьте в веб-часть следующий конструктор:

      public constructor() {
        super();
      
        SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
      }
      

      Этот код выполняет следующие действия:

      • Вызывает родительский конструктор с контекстом для инициализации веб-части.
      • Асинхронно загружает стили элемента "аккордеон" в CSS-файле из сети CDN.

Отрисовка элемента "аккордеон"

1. В файле jQueryWebPart.ts найдите метод render().

2. Установите внутренний HTML-код веб-части для отрисовки HTML-кода элемента "аккордеон", заменив содержимое метода render() на следующее:

   this.domElement.innerHTML = MyAccordionTemplate.templateHtml;
   

3. Настроить элемент "аккордеон" jQueryUI можно несколькими способами. Определите несколько вариантов элемента "аккордеон" после имеющейся строки кода this.domElement.innerHTML = MyAccordionTemplate.templateHtml;:

   const accordionOptions: JQueryUI.AccordionOptions = {
     animate: true,
     collapsible: false,
     icons: {
       header: 'ui-icon-circle-arrow-e',
       activeHeader: 'ui-icon-circle-arrow-s'
     }
   };
   

   Типизированное объявление jQueryUI позволяет создать типизированную переменную JQueryUI.AccordionOptions и указать поддерживаемые свойства.

   Поэкспериментировав с IntelliSense, вы заметите, что поддерживаются все доступные методы в JQueryUI., а также параметры методов.

4. Инициализируйте элемент "аккордеон":

   jQuery('.accordion', this.domElement).accordion(accordionOptions);
   

   Как видите, применяется переменная jQuery, которую вы использовали для импорта модуля jquery. Затем инициализируется элемент Accordion.

   Последний метод render() должен выглядеть так:

   public render(): void {
     this.domElement.innerHTML = MyAccordionTemplate.templateHtml;
   
     const accordionOptions: JQueryUI.AccordionOptions = {
       animate: true,
       collapsible: false,
       icons: {
         header: 'ui-icon-circle-arrow-e',
         activeHeader: 'ui-icon-circle-arrow-s'
       }
     };
   
     jQuery('.accordion', this.domElement).accordion(accordionOptions);
   }
   

5. Сохраните файл.

Просмотр веб-части

1. В консоли откройте папку jquery-webpart и введите следующую строку для сборки и просмотра веб-части:

   gulp serve --nobrowser
   

   После запуска веб-сервера откройте браузер и перейдите в рабочую область, размещенную на сайте SharePoint, чтобы проверить проект. Пример: https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx.

2. Выберите значок + (знак "плюс") в рабочей области, чтобы отобразить список веб-частей, и добавьте веб-часть jQuery. Теперь должен появиться элемент "аккордеон" jQueryUI!

   

3. В консоли, в которой запущена команда gulp serve, нажмите клавиши CTRL+C, чтобы завершить задачу.