GJL BUTTON - Demo Page

Current NPM pagackage:

xxx

GJL Button module - code example Plain Button - HTML and JS

          
            // HTML

            <div id="plainButton"></div>


            //JS

            gjl.button.init($('#plainButton'), {
              'id': 'plainButtonDemo',
              'btnText': 'PlainButton',
              'config': {
                'onclick': 'alert(\'Test\');'
              }
            });


            // JS - calling function when clicking the button

            gjl.button.init($('#plainButtonActive'), {
              'id': 'plainButtonActiveDemo',
              'btnText': 'PlainButton Active',
              'state': 'active',
              'config': {
                'gj-event-click': 'plainButtonClicked'
              }
            });


            // To initalize an active plain button

            gjl.button.init($('#plainButton'), {
              'id': 'plainButtonDemo',
              'btnText': 'PlainButton',
              'state': 'active'
            });


            // To initalize a disabled plain button

            gjl.button.init($('#plainButton'), {
              'id': 'plainButtonDemo',
              'btnText': 'PlainButton',
              'state': 'disabled'
            });

GJL BUTTON module - code example - Template and JS

          
            // Template
            '<div gjl-id="gjl.button" gjl-config="{{plainButtonConfig}}"></div>';

            // JS
            var plainButtonConfig = {
              'id': 'plainButtonDemo',
              'btnText': 'PlainButton'
            }

GJL BUTTON module - code example - Button with Icon - Template and JS

        
          // Template
          '<div gjl-id="gjl.button" gjl-config="{{iconLeftButtonConfig}}"></div>';

          // JS
          var iconLeftButtonConfig = {
            'id': 'buttonIconLeftDemo',
            'btnText': 'Left Icon',
            'type': 'withIcon',
            'iconClass': 'fa-upload',
            'iconPosition': 'left'
          }

          // Template
          '<div gjl-id="gjl.button" gjl-config="{{iconRightButtonConfig}}"></div>';

          // JS
          var iconRightButtonConfig = {
            'id': 'buttonIconRightDemo',
            'btnText': 'Right Icon',
            'type': 'withIcon',
            'iconClass': 'fa-upload',
            'iconPosition': 'right'
          }

GJL BUTTON module - code example - Button with Icon - HTML and JS

        
          // HTML
          <div id="buttonIconLeft"></div>

          // JS
          gjl.button.init($('#buttonIconLeft'), {
            'id': 'buttonIconLeftDemo',
            'btnText': 'Left Icon',
            'type': 'withIcon',
            'iconClass': 'fa-upload',
            'iconPosition': 'left'
          });

          // HTML
          <div id="buttonIconRight"></div>

          // JS
          gjl.button.init($('#buttonIconRight'), {
            'id': 'buttonIconRightDemo',
            'btnText': 'Right Icon',
            'type': 'withIcon',
            'iconClass': 'fa-upload',
            'iconPosition': 'right'
          });

Examples for Big Button comming here...