JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

JavaScript

(function ($) {
    $.fn.chatting = function (options) {
        var defaults = {
            "sChatUrl" : "http://dev.talktalk.naver.com",
            "nWidth": 300,
            "nHeight": 600
        };
        
        var settings = $.extend(defaults, options);
        
        return this.each(function () {            
            var welBody = $(this);
            var welWrap = $("<div>", {
                id: "wrap",
                css: {
                    "position" : "fixed",
                    "right" : 0,
                    "bottom" : "-600px"
                }
            }); 
            
            var welHeader = $("<div>", {
                id: "header",
                text : "header",
                css: {
                    "background-color" : "#00ff00",
                    "border":"1px solid #c8c8c8"
                }
            });
            
            var welContent = $("<div>",{
                id : "content"
            });
            
            var welIframe = $("<iframe>",{
                id : "embeded_chat",
                width : settings.nWidth,
                height : settings.nHeight,
                src : settings.sChatUrl,
                frameborder : "no",
                scrolling : "auto"
            });
            
            var makeButton = function(sId, sText){
                var welButton = $("<button>",{
                    id : sId,
                    class : "size",
                    type : "button",
                    text : sText
                });
                return welButton;
            }
                    
            var welHeaderWithButton = welHeader.append(makeButton("size_embeded", "e")).append(makeButton("size_smartphone", "s")).append(makeButton("size_pc", "p"));             
            var welContentWithIframe = welContent.append(welIframe);
            
            welWrap.append(welHeaderWithButton);
            welWrap.append(welContentWithIframe);
           ...