1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    48
    Vote Rating
    0
    wregen is on a distinguished road

      0  

    Default Unanswered: Ext.Tipsy Initial

    Unanswered: Ext.Tipsy Initial


    Hi,
    I'd like to share with the community Ext.Tipsy (very rough version of jQuery Tipsy, used in github). Example below.

    HTML Code:
    <!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">
    <head>
    	<style>
    /* Ext.Tipsy CSS */
    .tipsy { padding: 5px; font-size: 13px; position: absolute; z-index: 100001; display:none; }
    .tipsy-inner { padding: 9px 12px 8px 12px; background-color: black; color: white; max-width: 1200px; text-align: center; white-space:nowrap;}
    .tipsy-inner { border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
    .tipsy-arrow { position: absolute; background: url("data:image/png;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==") no-repeat top left; width: 9px; height: 5px; }
    .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
    /* Ext.Tipsy CSS */
    
    .obj {float:left;margin:20px;width:100px;height:40px;background:#eee;border:1px solid #999}
    body{font-family:Verdana, sans-serif;margin-left:100px;}
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
      <title>Test</title>
    </head>
    <body>
    
    <div class="obj" ext:tipsy="The First Ext Tipsy Example"></div>
    <div class="obj" ext:tipsy="Another Ext Tipsy Example"></div>
    <script>
    Ext.Tipsy = function(){
      var tipTpl = '<div class="tipsy tipsy-n"><div class="tipsy-arrow"></div><div class="tipsy-inner"></div></div>';
      return {
        init: function () {
          this.body 	= Ext.getBody();
          this.tip 	= Ext.get(Ext.DomHelper.append(this.body, tipTpl));
          this.tip.setOpacity(.7);
          this.tipInner = this.tip.down('.tipsy-inner');
          this.attachTip();
        },
        attachTip: function() {
          this.body.on({
            scope		: this,
            mouseover 	: function(e, t) {
              var target = Ext.fly(t),
              tipsy  = target.getAttribute('tipsy', 'ext');
              if (!Ext.isEmpty(tipsy)) {
                this.show(target);
              }
            },
            mouseout	: function(e, t) {
              if (!Ext.isEmpty(t)) {
                this.tip.hide();
              }
            }
          });
        },
        show: function(t) {
          xy = t.getXY();
          h  = t.getHeight();
          w  = t.getWidth();
          this.tipInner.update(t.getAttribute('tipsy', 'ext'));
          this.tip.show();
          this.tip.setLocation(xy[0]-this.tip.getWidth()/2+w/2, xy[1]+h);
        }
      }
    }();
    
    Ext.onReady(function () {
      Ext.Tipsy.init();
    });
    </script>
    </body>
    </html>

  2. #2
    Sencha User
    Join Date
    Dec 2007
    Posts
    167
    Vote Rating
    0
    hello2008 is on a distinguished road

      0  

    Default


    good work
    just one suggestion:
    1. using Ext.ux namespace may be better: Ext.ux.Tipsy
    2. browser compatibility:
    works pretty well in Chrome 7, Firefox 3.6
    losing border-radius in IE8
    losing border-radius and tipsy-arrow in IE7/6

  3. #3
    Ext JS Premium Member mcouillard's Avatar
    Join Date
    Jun 2008
    Location
    Bucks County, PA
    Posts
    103
    Vote Rating
    8
    mcouillard will become famous soon enough

      0  

    Default


    Thank you! Now to add position logic so it never displays off the page...

  4. #4
    Ext User
    Join Date
    Apr 2010
    Posts
    4
    Vote Rating
    0
    taghouse is on a distinguished road

      0  

    Default


    Works Great, I will try to improve in anything I can help!

Similar Threads

  1. Replies: 0
    Last Post: 11 Nov 2009, 7:07 AM
  2. Replies: 1
    Last Post: 14 May 2009, 1:57 AM
  3. [2.??] Ext.Panel AutoScroll not working on initial HTML config object
    By foxwhisper in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 Dec 2008, 8:26 AM
  4. Removing Initial Ext.Window Render Delay?
    By mdm-adph in forum Ext 2.x: Help & Discussion
    Replies: 14
    Last Post: 17 Apr 2008, 10:50 AM

Thread Participants: 3

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi