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
    102
    Vote Rating
    7
    mcouillard is on a distinguished road

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar