JavaScript DHTML/Ext JS/Tooltip
Содержание
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>
</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
Callout Tip
</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
Callout Tip
</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
Callout Tip
</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
Callout Tip
</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
Callout Tip
</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
Callout Tip
</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
Callout Tip
</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>
</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>