Tutorialspoint

jQuery Mobile Basic Radio Mini size Widget

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Mini Size Example</h2>
         <fieldset data-role = "controlgroup" data-mini = "true">
            <input type = "radio" id = "radio1" name = "radio-choice-0" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

jQuery Mobile Basic Radio Widget

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Basic Radio Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "radio" id = "radio1" name = "radio-choice-0" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

Lisp Array Example4

(setq myarray (make-array '(3 2 3) 
   :initial-contents 
   '(((a b c) (1 2 3)) 
      ((d e f) (4 5 6)) 
      ((g h i) (7 8 9)) 
   ))
) 
(setq array2 (make-array 4 :displaced-to myarray :displaced-index-offset 2)) 
(write myarray)
(terpri)
(write array2)

Lisp Array Example3

(setq a (make-array '(4 3)))
(dotimes (i 4)
   (dotimes (j 3)
      (setf (aref a i j) (list i 'x j '= (* i j)))
   )
)
(dotimes (i 4)
   (dotimes (j 3)
      (print (aref a i j))
   )
)

Ext.js Auto Layout

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.container.Container', {
               renderTo : Ext.getBody(),
               layout : 'auto',
               width : 600,
               
               items : [{
                  title: 'First Component',
                  html : 'This is First Component'
               },{ 
                  title: 'Second Component',
                  html : 'This is Second Component'
               },{ 
                  title: 'Third Component',
                  html : 'This is Third Component' 
               },{ 
                  title: 'Fourth Component',
                  html : 'This is Fourth Component'
               }]
            });
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

Lisp Array Example2

(setf x (make-array '(3 3) 
   :initial-contents '((0 1 2 ) (3 4 5) (6 7 8)))
)
(write x)

jQuery Mobile Checkbox Enhanced

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Enhanced Checkbox Example</h2>
      <form>
         <div class = "ui-checkbox">
            <label for = "checkbox1" class = "ui-btn ui-corner-all">Checkbox</label>
            <input type = "checkbox" id = "checkbox1" data-enhanced = "true" />
         </div>
      </form>
   </body>
</html>

Ext.js Border Layout

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.panel.Panel', {
               renderTo: Ext.getBody(),
               height: 300,
               width: 600,
               layout:'border',
               
               defaults: {
                  collapsible: true,
                  split: true,
                  bodyStyle: 'padding:15px'
               },
               items: [{
                  title: 'Panel1',
                  region:'west',
                  html: 'This is Panel 1'
               },{
                  title: 'Panel2',
                  region:'center',
                  html: 'This is Panel 2'
               },{
                  title: 'Panel3',
                  region: 'south',
                  html: 'This is Panel 3'
               },{
                  title: 'Panel4',
                  region: 'east',
                  html: 'This is Panel 4'
               },{
                  title: 'Panel5',
                  region: 'north',
                  html: 'This is Panel 5'
               }]
            });
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

Lisp Array Example1

(write (setf my-array (make-array '(10))))
(terpri)
(setf (aref my-array 0) 25)
(setf (aref my-array 1) 23)
(setf (aref my-array 2) 45)
(setf (aref my-array 3) 10)
(setf (aref my-array 4) 20)
(setf (aref my-array 5) 17)
(setf (aref my-array 6) 25)
(setf (aref my-array 7) 19)
(setf (aref my-array 8) 67)
(setf (aref my-array 9) 30)
(write my-array)

Ext.js Anchor Layout

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.container.Container', {
               renderTo : Ext.getBody(),
               layout : 'anchor' ,
               width : 600,
               
               items : [{
                  title : 'Panel 1',
                  html : 'panel 1',
                  height : 100,
                  anchor : '50%'
               },{
                  title : 'Panel 2',
                  html : 'panel 2',
                  height : 100,
                  anchor : '100%'
               },{
                  title : 'Panel 3',
                  html : 'panel 3',
                  height : 100,
                  anchor : '-100'
               },{
                  title : 'Panel 4',
                  html : 'panel 4',
                  anchor : '-70, 500'
               }]
            });
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

Advertisements
Loading...