您的位置: 首页  >  IT文章  >  Ext.QuickTips.init() 的一个容易用法及注意事项

Ext.QuickTips.init() 的一个容易用法及注意事项

分类: IT文章 • 2023-12-05 13:11:49
Ext.QuickTips.init() 的一个简单用法及注意事项

最近在学习 ext 的例子中，发现好多程序都在第一行使用了如下语句：

Ext.QuickTips.init();

但是QuickTips的用处是什么呢？

我们先来看下面的代码：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Html</title>
<body >
<a href="http://extjs.com" title="ExtJS官方网站">ExtJS</a>
<input type="text" title="请填写 ..."></input>
</body>
</html>



用IE打开后，把属标放到ExtJS上面，可以看到显示一个提示框，如下图：
Ext.QuickTips.init() 的一个容易用法及注意事项

现在我们在来看下面这代码：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<body >
<a href="http://extjs.com" ext:qtip="ExtJS官方网站">ExtJS</a>
<input type="text" ext:qtip="请填写 ..."></input>

<script type="text/javascript" charset="utf-8">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    });        
</script>
</body>
</html>



用IE打开后，把属标放到ExtJS上面，可以看到显示一个提示框，如下图：
Ext.QuickTips.init() 的一个容易用法及注意事项

这时，我们可以发现，Ext.QuickTips.init(); 的作用就是把 ext:qtip 的值用于显示提示，作用和前面的例子中的title的作用是一样的。

下面我们改改第二个例子，在<body>后面加上“例子：<br>”，如：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<body >例子：<br>
<a href="http://extjs.com" ext:qtip="ExtJS官方网站">ExtJS</a>
<input type="text" ext:qtip="请填写 ..."></input>

<script type="text/javascript" charset="utf-8">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    });        
</script>
</body>
</html>



这时候，在打开后，属标放上去，显示就有错误了，如下图：Ext.QuickTips.init() 的一个容易用法及注意事项

这主要是写法不规范造成的，因为那文字内容是直接写在body里了，只要把文件用<p>和</p>把引起来就可以了，如下：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<body ><p>例子：</p><br>
<a href="http://extjs.com" ext:qtip="ExtJS官方网站">ExtJS</a>
<input type="text" ext:qtip="请填写 ..."></input>

<script type="text/javascript" charset="utf-8">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    });        
</script>
</body>
</html>

相关推荐