<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:v = "urn:schemas-microsoft-com:vml">
<head>
<link rel="stylesheet" type="text/css" href="../../jquery.toolkit.css" />
<link rel="stylesheet" type="text/css" href="jquery.tk.tooltip.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.storage.js" type="text/javascript"></script>
<script src="../position/jquery.tk.position.js" type="text/javascript"></script>
<script src="jquery.tk.tooltip.js" type="text/javascript"></script>
<style>
body{ font-size:12px; text-align:center;}
#test-container{ width: 550px; height:650px; background:#333; float:left;margin-left:300px;}
</style>
</head>
<body>
<h1>Demonstrating xcss plugin</h1>
<div class="tk-inlineStack" id="test-container">
<input type="text" name="test" id="inputtest" class="tk-tooltip tk-tooltip-error-top-center-sticky" title="mon msg"/><br />
<a href="#" class="tk-tooltip tk-tooltip-success-middle-left" title="un lien">on the left</a><br/>
<a href="#" class="tk-tooltip tk-tooltip-error" title="default settings">with default settings</a>
<span class="tk-tooltip tk-tooltip-success-middle-right tk-inlineStack" id="cyclingPosition" title="each click on this element will <br />change the position of the tooltip"
style="background:#fefefe;border:solid silver 1px;width:150px;height:200px;">
click on me and you will see!
</span>
<select><option>just for test</option></select>
</div>
<script>
jQuery(function(){
$.toolkit.initPlugins('tooltip');
$('#cyclingPosition').click(function(){
var pos = $(this).tooltip('get1_position').join('-');
poses = [
'top-left',
'top-center',
'top-right',
'middle-right',
'bottom-right',
'bottom-center',
'bottom-left',
'middle-left'
];
for(var i=0,l=poses.length;i<l ;i++){
if( poses[i] === pos){
pos = poses[++i]?poses[i]:poses[0];
break;
}
}
$(this).tooltip('set_position',pos);
});
/*/-- create a hidden element that track the mouse position -//
$.toolkit.mouse={
elmt:null,
_attached:null,
init:function(elmt,options){
var self = this;
self._attached = [];
self.elmt = $('<div id="tk-mouse" style="visibility:hidden;position:absolute;top:0;left:O;width:0px;height:0px;"></div>')
.appendTo('body');
$('body').mousemove(function(e){
self.update(e);
});
},
attach:function(elmt,options){
if(! this.elmt){
this.init();
}
elmt = $(elmt)
elmt.positionRelative($.extend({},options||{},{related:this.elmt}));
this._attached.push(elmt);
},
update:function(e){
this.elmt.css({top:e.clientY+1,left:e.clientX+1});
for(var i=0,l=this._attached.length;i<l;i++){
this._attached[i].positionRelative('update');
}
}
};
/*
$.toolkit.mouse = $('<div id="tkMouse" style="display:block;position:absolute;top:0;left:O;width:1px;height:1px;border:solid red 1px"></div>').appendTo('body');
$(window).mousemove(function(e){
$.toolkit.mouse.css({top:e.clientY,left:e.clientX});
});
$('h1').positionRelative({rel:$.toolkit.mouse,vPos:'top',hPos:'right',hSpace:5})
$('body').mousemove(function(e){
$('h1').positionRelative('update')
});
});* /
$.toolkit.mouse.attach('h1',{vPos:'bottom',hPos:'right',hSpace:5});*/
})
</script>
</body>
</html>
|
Download
