I can't use nodejs. How can I reference CDN resources and write JavaScript code?

I think the official website is full of typescript code tutorials. It seems that there are no examples of JavaScript use?


6 Replies

BC Berly Christopher Syncfusion Team September 30, 2021 03:16 PM UTC

Hi Xu zhi bin, 
  
Greetings from Syncfusion support. 
  
We have provided support for rendering Syncfusion components with CDN link in JavaScript platform without using NodeJS. Please refer the below demo and documentation for further details. 
  
  
  
Regards, 
Berly B.C 



XZ xu zhi bin October 1, 2021 04:03 PM UTC

Why is my color different from yours?


All colors are pink by default?





XZ xu zhi bin October 1, 2021 04:04 PM UTC

<html>


<head>

    <link rel="stylesheet" rel='nofollow' href="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/material.css">

    <script src="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/dist/global/ej2-base.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/dist/global/ej2-buttons.min.js"></script>

    <link rel="stylesheet" rel='nofollow' href="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/material.css">

</head>



<body>


<h2>Essential JS 2 Button</h2>

<!-- Add HTML button element -->

<button id="btn">Button</button>

<button id="warningbtn">Warning</button>


<script>

    // Initialize Essential JS 2 JavaScript Button control


    var button = new ej.buttons.CheckBox({ label:"test" });


    button.appendTo('#btn');

    button = new ej.buttons.Button({ cssClass: 'e-primary' });

    button.appendTo('#warningbtn');

</script>

</body>

</html>



PM Ponmani Murugaiyan Syncfusion Team October 4, 2021 02:48 PM UTC

Hi Xu zhi bin, 

Thanks for the update. 

Query: All colors are pink by default? 

By default material theme shows the pick color. We have provided support for multiple themes you can change the themes as like below highlighted code in index.html file. For more information regarding themes, please find the documentation link below for reference. 


[Index.html] 
 
<head> 
    <link rel="stylesheet" rel='nofollow' rel='nofollow' href=https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/bootstrap.css> 
</head> 

Regards, 
Ponmani M 



XZ xu zhi bin replied to Ponmani Murugaiyan October 5, 2021 02:59 AM UTC

ej2-buttons.umd.min   and  

ej2-buttons.min    

What's the difference between the two? What does UMD mean?





GK Gayathri KarunaiAnandam Syncfusion Team October 6, 2021 06:03 AM UTC

Hi Xu zhi bin, 

We have checked your reported query. We would like to let you know that UMD is an acronym of Universal Module Definition. Please find the below link to know more about the umd and min file in cdn link. 


Please check and get back to us, if you need further assistance. 

Regards, 
Gayathri K 


Loader.
Up arrow icon