JavaScript DHTML/Ext JS/Tooltip

Материал из Web эксперт
Перейти к: навигация, поиск

Add tooltip to tab

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {

   Ext.QuickTips.init();
   new Ext.Viewport({
       layout : "fit",
       title  : "Exercising scrollable tabs",
       items  : {
           xtype           : "tabpanel",
           activeTab       : 0,
           id              : "myTPanel",
           enableTabScroll : true,
           resizeTabs      : true,
           minTabWidth     : 75,
           items           : [
               {
                   title : "our first tab",
                   tabTip   : "asdf"
               }
           ]
       }
   });
   

}); </script>

asdf

</body> </html>


 </source>
   
  


Ajax tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" >
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.ToolTip({
       target: "tip1",
       html: "A very simple tooltip"
   });
   new Ext.ToolTip({
       target: "ajax-tip",
       width: 200,
       autoLoad: {url: "ajax-tip.html"},
       dismissDelay: 15000 // auto hide after 15 seconds
   });
   new Ext.ToolTip({
       target: "tip2",
       html: "Click the X to close me",
       title: "My Tip Title",
       autoHide: false,
       closable: true,
       draggable:true
   });
   new Ext.ToolTip({
       target: "track-tip",
       title: "Mouse Track",
       width:200,
       html: "This tip will follow the mouse while it is over the element",
       trackMouse:true
   });
   
   new Ext.ToolTip({        
       title: "<a href="#">Rich Content Tooltip</a>",
       id: "content-anchor-tip",
       target: "leftCallout",
       anchor: "left",
       html: null,
       width: 415,
       autoHide: false,
       closable: true,
       contentEl: "content-tip", // load content from the page
       listeners: {
           "render": function(){
               this.header.on("click", function(e){
                   e.stopEvent();
                   Ext.Msg.alert("Link", "Link to something interesting.");
                   Ext.getCmp("content-anchor-tip").hide();
               }, this, {delegate:"a"});
           }
       }
   });
   
   new Ext.ToolTip({
       target: "bottomCallout",
       anchor: "top",
       anchorOffset: 85, // center the anchor on the tooltip
       html: "This tip\"s anchor is centered"
   });
   
   new Ext.ToolTip({
       target: "trackCallout",
       anchor: "right",
       trackMouse: true,
       html: "Tracking while you move the mouse"
   });
   Ext.QuickTips.init();

});

   </script>
   <style type="text/css">
       .tip-target {
           width: 100px;
           text-align:center;
           padding: 5px 0;
           border:1px dotted #99bbe8;
           background:#dfe8f6;
           color: #15428b;
           cursor:default;
           margin:10px;
           font:bold 11px tahoma,arial,sans-serif;
           float:left;
       }
   </style>

</head> <body>

Tips examples

Easiest Tip

Basic ToolTip
autoHide disabled
Ajax ToolTip
Mouse Track
QuickTip

Callout Tip

Anchor right, rich content
Anchor below
Anchor with tracking
  • 5 bedrooms
  • 2 bathrooms
  • Large backyard
  • Close to transport
           <img src="images/house.jpg" alt="Website Thumbnail" />

</body> </html>


 </source>
   
  


Anchor right tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" >
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.ToolTip({
       target: "tip1",
       html: "A very simple tooltip"
   });
   new Ext.ToolTip({
       target: "ajax-tip",
       width: 200,
       autoLoad: {url: "ajax-tip.html"},
       dismissDelay: 15000 // auto hide after 15 seconds
   });
   new Ext.ToolTip({
       target: "tip2",
       html: "Click the X to close me",
       title: "My Tip Title",
       autoHide: false,
       closable: true,
       draggable:true
   });
   new Ext.ToolTip({
       target: "track-tip",
       title: "Mouse Track",
       width:200,
       html: "This tip will follow the mouse while it is over the element",
       trackMouse:true
   });
   
   new Ext.ToolTip({        
       title: "<a href="#">Rich Content Tooltip</a>",
       id: "content-anchor-tip",
       target: "leftCallout",
       anchor: "left",
       html: null,
       width: 415,
       autoHide: false,
       closable: true,
       contentEl: "content-tip", // load content from the page
       listeners: {
           "render": function(){
               this.header.on("click", function(e){
                   e.stopEvent();
                   Ext.Msg.alert("Link", "Link to something interesting.");
                   Ext.getCmp("content-anchor-tip").hide();
               }, this, {delegate:"a"});
           }
       }
   });
   
   new Ext.ToolTip({
       target: "bottomCallout",
       anchor: "top",
       anchorOffset: 85, // center the anchor on the tooltip
       html: "This tip\"s anchor is centered"
   });
   
   new Ext.ToolTip({
       target: "trackCallout",
       anchor: "right",
       trackMouse: true,
       html: "Tracking while you move the mouse"
   });
   Ext.QuickTips.init();

});

   </script>
   <style type="text/css">
       .tip-target {
           width: 100px;
           text-align:center;
           padding: 5px 0;
           border:1px dotted #99bbe8;
           background:#dfe8f6;
           color: #15428b;
           cursor:default;
           margin:10px;
           font:bold 11px tahoma,arial,sans-serif;
           float:left;
       }
   </style>

</head> <body>

Tips examples

Easiest Tip

Basic ToolTip
autoHide disabled
Ajax ToolTip
Mouse Track
QuickTip

Callout Tip

Anchor right, rich content
Anchor below
Anchor with tracking
  • 5 bedrooms
  • 2 bathrooms
  • Large backyard
  • Close to transport
           <img src="images/house.jpg" alt="Website Thumbnail" />

</body> </html>


 </source>
   
  


Auto hide tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" >
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.ToolTip({
       target: "tip1",
       html: "A very simple tooltip"
   });
   new Ext.ToolTip({
       target: "ajax-tip",
       width: 200,
       autoLoad: {url: "ajax-tip.html"},
       dismissDelay: 15000 // auto hide after 15 seconds
   });
   new Ext.ToolTip({
       target: "tip2",
       html: "Click the X to close me",
       title: "My Tip Title",
       autoHide: false,
       closable: true,
       draggable:true
   });
   new Ext.ToolTip({
       target: "track-tip",
       title: "Mouse Track",
       width:200,
       html: "This tip will follow the mouse while it is over the element",
       trackMouse:true
   });
   
   new Ext.ToolTip({        
       title: "<a href="#">Rich Content Tooltip</a>",
       id: "content-anchor-tip",
       target: "leftCallout",
       anchor: "left",
       html: null,
       width: 415,
       autoHide: false,
       closable: true,
       contentEl: "content-tip", // load content from the page
       listeners: {
           "render": function(){
               this.header.on("click", function(e){
                   e.stopEvent();
                   Ext.Msg.alert("Link", "Link to something interesting.");
                   Ext.getCmp("content-anchor-tip").hide();
               }, this, {delegate:"a"});
           }
       }
   });
   
   new Ext.ToolTip({
       target: "bottomCallout",
       anchor: "top",
       anchorOffset: 85, // center the anchor on the tooltip
       html: "This tip\"s anchor is centered"
   });
   
   new Ext.ToolTip({
       target: "trackCallout",
       anchor: "right",
       trackMouse: true,
       html: "Tracking while you move the mouse"
   });
   Ext.QuickTips.init();

});

   </script>
   <style type="text/css">
       .tip-target {
           width: 100px;
           text-align:center;
           padding: 5px 0;
           border:1px dotted #99bbe8;
           background:#dfe8f6;
           color: #15428b;
           cursor:default;
           margin:10px;
           font:bold 11px tahoma,arial,sans-serif;
           float:left;
       }
   </style>

</head> <body>

Tips examples

Easiest Tip

Basic ToolTip
autoHide disabled
Ajax ToolTip
Mouse Track
QuickTip

Callout Tip

Anchor right, rich content
Anchor below
Anchor with tracking
  • 5 bedrooms
  • 2 bathrooms
  • Large backyard
  • Close to transport
           <img src="images/house.jpg" alt="Website Thumbnail" />

</body> </html>


 </source>
   
  


Basic tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" >
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.ToolTip({
       target: "tip1",
       html: "A very simple tooltip"
   });
   new Ext.ToolTip({
       target: "ajax-tip",
       width: 200,
       autoLoad: {url: "ajax-tip.html"},
       dismissDelay: 15000 // auto hide after 15 seconds
   });
   new Ext.ToolTip({
       target: "tip2",
       html: "Click the X to close me",
       title: "My Tip Title",
       autoHide: false,
       closable: true,
       draggable:true
   });
   new Ext.ToolTip({
       target: "track-tip",
       title: "Mouse Track",
       width:200,
       html: "This tip will follow the mouse while it is over the element",
       trackMouse:true
   });
   
   new Ext.ToolTip({        
       title: "<a href="#">Rich Content Tooltip</a>",
       id: "content-anchor-tip",
       target: "leftCallout",
       anchor: "left",
       html: null,
       width: 415,
       autoHide: false,
       closable: true,
       contentEl: "content-tip", // load content from the page
       listeners: {
           "render": function(){
               this.header.on("click", function(e){
                   e.stopEvent();
                   Ext.Msg.alert("Link", "Link to something interesting.");
                   Ext.getCmp("content-anchor-tip").hide();
               }, this, {delegate:"a"});
           }
       }
   });
   
   new Ext.ToolTip({
       target: "bottomCallout",
       anchor: "top",
       anchorOffset: 85, // center the anchor on the tooltip
       html: "This tip\"s anchor is centered"
   });
   
   new Ext.ToolTip({
       target: "trackCallout",
       anchor: "right",
       trackMouse: true,
       html: "Tracking while you move the mouse"
   });
   Ext.QuickTips.init();

});

   </script>
   <style type="text/css">
       .tip-target {
           width: 100px;
           text-align:center;
           padding: 5px 0;
           border:1px dotted #99bbe8;
           background:#dfe8f6;
           color: #15428b;
           cursor:default;
           margin:10px;
           font:bold 11px tahoma,arial,sans-serif;
           float:left;
       }
   </style>

</head> <body>

Tips examples

Easiest Tip

Basic ToolTip
autoHide disabled
Ajax ToolTip
Mouse Track
QuickTip

Callout Tip

Anchor right, rich content
Anchor below
Anchor with tracking
  • 5 bedrooms
  • 2 bathrooms
  • Large backyard
  • Close to transport
           <img src="images/house.jpg" alt="Website Thumbnail" />

</body> </html>


 </source>
   
  


Callout tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" >
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.ToolTip({
       target: "tip1",
       html: "A very simple tooltip"
   });
   new Ext.ToolTip({
       target: "ajax-tip",
       width: 200,
       autoLoad: {url: "ajax-tip.html"},
       dismissDelay: 15000 // auto hide after 15 seconds
   });
   new Ext.ToolTip({
       target: "tip2",
       html: "Click the X to close me",
       title: "My Tip Title",
       autoHide: false,
       closable: true,
       draggable:true
   });
   new Ext.ToolTip({
       target: "track-tip",
       title: "Mouse Track",
       width:200,
       html: "This tip will follow the mouse while it is over the element",
       trackMouse:true
   });
   
   new Ext.ToolTip({        
       title: "<a href="#">Rich Content Tooltip</a>",
       id: "content-anchor-tip",
       target: "leftCallout",
       anchor: "left",
       html: null,
       width: 415,
       autoHide: false,
       closable: true,
       contentEl: "content-tip", // load content from the page
       listeners: {
           "render": function(){
               this.header.on("click", function(e){
                   e.stopEvent();
                   Ext.Msg.alert("Link", "Link to something interesting.");
                   Ext.getCmp("content-anchor-tip").hide();
               }, this, {delegate:"a"});
           }
       }
   });
   
   new Ext.ToolTip({
       target: "bottomCallout",
       anchor: "top",
       anchorOffset: 85, // center the anchor on the tooltip
       html: "This tip\"s anchor is centered"
   });
   
   new Ext.ToolTip({
       target: "trackCallout",
       anchor: "right",
       trackMouse: true,
       html: "Tracking while you move the mouse"
   });
   Ext.QuickTips.init();

});

   </script>
   <style type="text/css">
       .tip-target {
           width: 100px;
           text-align:center;
           padding: 5px 0;
           border:1px dotted #99bbe8;
           background:#dfe8f6;
           color: #15428b;
           cursor:default;
           margin:10px;
           font:bold 11px tahoma,arial,sans-serif;
           float:left;
       }
   </style>

</head> <body>

Tips examples

Easiest Tip

Basic ToolTip
autoHide disabled
Ajax ToolTip
Mouse Track
QuickTip

Callout Tip

Anchor right, rich content
Anchor below
Anchor with tracking
  • 5 bedrooms
  • 2 bathrooms
  • Large backyard
  • Close to transport
           <img src="images/house.jpg" alt="Website Thumbnail" />

</body> </html>


 </source>
   
  


Closable tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" >
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.ToolTip({
       target: "tip1",
       html: "A very simple tooltip"
   });
   new Ext.ToolTip({
       target: "ajax-tip",
       width: 200,
       autoLoad: {url: "ajax-tip.html"},
       dismissDelay: 15000 // auto hide after 15 seconds
   });
   new Ext.ToolTip({
       target: "tip2",
       html: "Click the X to close me",
       title: "My Tip Title",
       autoHide: false,
       closable: true,
       draggable:true
   });
   new Ext.ToolTip({
       target: "track-tip",
       title: "Mouse Track",
       width:200,
       html: "This tip will follow the mouse while it is over the element",
       trackMouse:true
   });
   
   new Ext.ToolTip({        
       title: "<a href="#">Rich Content Tooltip</a>",
       id: "content-anchor-tip",
       target: "leftCallout",
       anchor: "left",
       html: null,
       width: 415,
       autoHide: false,
       closable: true,
       contentEl: "content-tip", // load content from the page
       listeners: {
           "render": function(){
               this.header.on("click", function(e){
                   e.stopEvent();
                   Ext.Msg.alert("Link", "Link to something interesting.");
                   Ext.getCmp("content-anchor-tip").hide();
               }, this, {delegate:"a"});
           }
       }
   });
   
   new Ext.ToolTip({
       target: "bottomCallout",
       anchor: "top",
       anchorOffset: 85, // center the anchor on the tooltip
       html: "This tip\"s anchor is centered"
   });
   
   new Ext.ToolTip({
       target: "trackCallout",
       anchor: "right",
       trackMouse: true,
       html: "Tracking while you move the mouse"
   });
   Ext.QuickTips.init();

});

   </script>
   <style type="text/css">
       .tip-target {
           width: 100px;
           text-align:center;
           padding: 5px 0;
           border:1px dotted #99bbe8;
           background:#dfe8f6;
           color: #15428b;
           cursor:default;
           margin:10px;
           font:bold 11px tahoma,arial,sans-serif;
           float:left;
       }
   </style>

</head> <body>

Tips examples

Easiest Tip

Basic ToolTip
autoHide disabled
Ajax ToolTip
Mouse Track
QuickTip

Callout Tip

Anchor right, rich content
Anchor below
Anchor with tracking
  • 5 bedrooms
  • 2 bathrooms
  • Large backyard
  • Close to transport
           <img src="images/house.jpg" alt="Website Thumbnail" />

</body> </html>


 </source>
   
  


CSS customized tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
   <script type="text/javascript">
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.Slider({
       renderTo: "basic-slider",
       width: 214,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "increment-slider",
       width: 214,
       value:50,
       increment: 10,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "vertical-slider",
       height: 214,
       vertical: true,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "tip-slider",
       width: 214,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });
   var tip = new Ext.ux.SliderTip({
       getText: function(slider){
           return String.format("{0}% complete", slider.getValue());
       }
   });
   new Ext.Slider({
       renderTo: "custom-tip-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: tip
   });
   new Ext.Slider({
       renderTo: "custom-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });

});

   </script>

</head> <body>

Ext Slider Example

Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.

Basic Slider


Snapping Slider


Vertical Slider


Slider with tip


Slider with custom tip


CSS Customized Slider

</body> </html>


 </source>
   
  


Mouse track tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" >
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.ToolTip({
       target: "tip1",
       html: "A very simple tooltip"
   });
   new Ext.ToolTip({
       target: "ajax-tip",
       width: 200,
       autoLoad: {url: "ajax-tip.html"},
       dismissDelay: 15000 // auto hide after 15 seconds
   });
   new Ext.ToolTip({
       target: "tip2",
       html: "Click the X to close me",
       title: "My Tip Title",
       autoHide: false,
       closable: true,
       draggable:true
   });
   new Ext.ToolTip({
       target: "track-tip",
       title: "Mouse Track",
       width:200,
       html: "This tip will follow the mouse while it is over the element",
       trackMouse:true
   });
   
   new Ext.ToolTip({        
       title: "<a href="#">Rich Content Tooltip</a>",
       id: "content-anchor-tip",
       target: "leftCallout",
       anchor: "left",
       html: null,
       width: 415,
       autoHide: false,
       closable: true,
       contentEl: "content-tip", // load content from the page
       listeners: {
           "render": function(){
               this.header.on("click", function(e){
                   e.stopEvent();
                   Ext.Msg.alert("Link", "Link to something interesting.");
                   Ext.getCmp("content-anchor-tip").hide();
               }, this, {delegate:"a"});
           }
       }
   });
   
   new Ext.ToolTip({
       target: "bottomCallout",
       anchor: "top",
       anchorOffset: 85, // center the anchor on the tooltip
       html: "This tip\"s anchor is centered"
   });
   
   new Ext.ToolTip({
       target: "trackCallout",
       anchor: "right",
       trackMouse: true,
       html: "Tracking while you move the mouse"
   });
   Ext.QuickTips.init();

});

   </script>
   <style type="text/css">
       .tip-target {
           width: 100px;
           text-align:center;
           padding: 5px 0;
           border:1px dotted #99bbe8;
           background:#dfe8f6;
           color: #15428b;
           cursor:default;
           margin:10px;
           font:bold 11px tahoma,arial,sans-serif;
           float:left;
       }
   </style>

</head> <body>

Tips examples

Easiest Tip

Basic ToolTip
autoHide disabled
Ajax ToolTip
Mouse Track
QuickTip

Callout Tip

Anchor right, rich content
Anchor below
Anchor with tracking
  • 5 bedrooms
  • 2 bathrooms
  • Large backyard
  • Close to transport
           <img src="images/house.jpg" alt="Website Thumbnail" />

</body> </html>


 </source>
   
  


Set message target to use tooltip

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {

Ext.QuickTips.init(); var formPanelItems =[

  {
     fieldLabel    : "Special Chars Only",
     allowBlank    : false,
     msgTarget : "qtip",
     stripCharsRe  : /[a-zA-Z0-9]/ig
  }

]; var fp = new Ext.form.FormPanel({

  renderTo     : Ext.getBody(),
  width        : 400,
  title        : "Title here",
  height       : 170,
  frame        : true,
  bodyStyle    : "padding: 5px",
  monitorValid : true,
  monitorPoll  : 50, 
  labelWidth   : 125,   
  defaultType  : "textfield",
  defaults     : {
     msgTarget : "side",
     anchor    : "-20"
  },
  items        : formPanelItems,

});

}); </script>

asdf

</body> </html>


 </source>
   
  


Slider with custom tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
   <script type="text/javascript">
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.Slider({
       renderTo: "basic-slider",
       width: 214,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "increment-slider",
       width: 214,
       value:50,
       increment: 10,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "vertical-slider",
       height: 214,
       vertical: true,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "tip-slider",
       width: 214,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });
   var tip = new Ext.ux.SliderTip({
       getText: function(slider){
           return String.format("{0}% complete", slider.getValue());
       }
   });
   new Ext.Slider({
       renderTo: "custom-tip-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: tip
   });
   new Ext.Slider({
       renderTo: "custom-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });

});

   </script>

</head> <body>

Ext Slider Example

Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.

Basic Slider


Snapping Slider


Vertical Slider


Slider with tip


Slider with custom tip


CSS Customized Slider

</body> </html>


 </source>
   
  


Slider with tooltip

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
   <script type="text/javascript">
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.Slider({
       renderTo: "basic-slider",
       width: 214,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "increment-slider",
       width: 214,
       value:50,
       increment: 10,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "vertical-slider",
       height: 214,
       vertical: true,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "tip-slider",
       width: 214,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });
   var tip = new Ext.ux.SliderTip({
       getText: function(slider){
           return String.format("{0}% complete", slider.getValue());
       }
   });
   new Ext.Slider({
       renderTo: "custom-tip-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: tip
   });
   new Ext.Slider({
       renderTo: "custom-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });

});

   </script>

</head> <body>

Ext Slider Example

Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.

Basic Slider


Snapping Slider


Vertical Slider


Slider with tip


Slider with custom tip


CSS Customized Slider

</body> </html>


 </source>