Category / Section
How to create custom toolbar for ejPdfViewer with themes support?
1 min read
You can create custom toolbar with ej themes support by using the Syncfusion ejToolbar control. Refer to the following code snippet.
<div id="ToolbarItem"> <ul> <li id="Previous" title="Go to the previous page of the PDF document"> <div class="PdfDocument e-icon e-pdfviewer-icon e-pdfviewer-gotoprevious "></div> </li> <li id="Next" title="Go to the next page of the PDF document"> <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-gotonext "></div> </li> </ul> <ul> <li id="ZoomIn" title="Zoom in to the PDF document"> <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-zoomin "></div> </li> <li id="ZoomOut" title="Zoom out of the PDF document"> <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-zoomout "></div> </li> </ul> </div> <script type="text/javascript"> $(function () { // initializing ejToolbar $("#ToolbarItem").ejToolbar({ height: "auto", enableSeparator: true, click: "onItemclick" }); }); function ondocumentload(args) { var _ejPdfViewer = $("#container").data("ejPdfViewer"); //hiding the default toolbar _ejPdfViewer.showToolbar(false); } function onItemclick(args) { // adding functionalities to the icons var option = args.currentTarget.id; var _ejPdfViewer = $("#container").data("ejPdfViewer"); switch (option) { case "ZoomIn": _ejPdfViewer.zoomIn(); break; case "ZoomOut": _ejPdfViewer.zoomOut(); break; case "Previous": _ejPdfViewer.goToPreviousPage(); break; case "Next": _ejPdfViewer.goToNextPage(); break; } </script>
Sample link: