1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default On/Off toggle buttom

    On/Off toggle buttom


    Hi,

    A small tweak in css gave me usual Toggle Button that we used to see in Iphone

    Example
    Code:
    {
                            xtype: 'toggle',
                            name: 'single_toggle',
                            value : 1
                        }
    Css

    Code:
    .x-field-toggle .x-slider {
        -webkit-border-radius: 0em;
        -webkit-box-shadow: inset rgba(0, 0, 0, 0) 0 0 0;
      }
      
      
      .x-field-toggle .x-slider .x-field-thumb:after {
        position: absolute;
        width: 2.5em;
        height: 2.5em;
        top: 0;
        left: 0;
        -webkit-box-shadow: rgba(0, 0, 0, 0) 0 0 0em;
        -webkit-border-radius: 0em;
        -webkit-transform: scale(0);
        border: none;
        background:none;
        overflow: visible;
        z-index: 2;
      }
      
      .x-field-toggle .x-slider.x-toggle-on {
        -webkit-appearance: none;
        background: url(checkbox_on.png);
        width: 94px;
        height: 27px;
        border: 0;
        float: left;
        margin: 8px 4px 0 5px;
      }
        
      .x-field-toggle .x-slider.x-toggle-off {
        -webkit-appearance: none;
        background: url(checkbox_off.png);
        width: 94px;
        height: 27px;
        border: 0;
        float: left;
        margin: 8px 4px 0 5px;
      }
    Attached Images

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Is this a question? I'm confused.

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,883
    Vote Rating
    102
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    tomalex0 is showing some custom styling to get iPhone style toggles.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Cool. Moved to examples/showcases.


    Should we offer an extensions forum?

  5. #5
    Sencha User
    Join Date
    Dec 2007
    Posts
    115
    Vote Rating
    12
    corvonero will become famous soon enough

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    Cool. Moved to examples/showcases.


    Should we offer an extensions forum?
    ABSOLUTELY YES!!

  6. #6
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Modified css compatible with 1.01a version

    Code:
    .x-field-toggle .x-slider {
            -webkit-border-radius: 0em;
            width:5.6em;
            height:1.6em;
            border: 0;
            
            
        }
      
        .x-field-toggle .x-slider.x-toggle-on {
          background: url(checkbox_on.png) no-repeat;
        }
        
        .x-field-toggle .x-slider.x-toggle-off {
            background: url(checkbox_off.png) no-repeat;
        }
    
        .x-field-toggle .x-thumb::before{
            -webkit-box-shadow:none;
            background-color:transparent;
            border:none;
            background-image:none;
        }

  7. #7
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Really nice tweak tomalex.

    For Sencha team: Yes please activate a Sencha Ux forum, I was wondering if this was possible in a thread I open some weeks ago.
    http://www.sencha.com/forum/showthre...-forum-section
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  8. #8
    Sencha User
    Join Date
    Sep 2010
    Location
    Lausanne / Switzerland - French Part
    Posts
    2
    Vote Rating
    0
    bbriot is on a distinguished road

      0  

    Default little refactoring on tomalex0 sample code

    little refactoring on tomalex0 sample code


    just a little message to indicate that :

    xtype: 'toggle', line code, must be replace with this one :

    xtype: 'togglefield',

    And with this modification, it will work great with senchaTouch 1.1

  9. #9
    Sencha User
    Join Date
    Feb 2011
    Posts
    104
    Vote Rating
    0
    headkit is on a distinguished road

      0  

    Default


    is there a way where you could use the css3-background-gradients and adding a transparent PNG with the button state titles? maybe by adding one more <span>-tag to the togglefield?

  10. #10
    Sencha User
    Join Date
    Jul 2011
    Location
    France
    Posts
    1
    Vote Rating
    0
    Gatoche is on a distinguished road

      0  

    Cool Simple but nice tweak

    Simple but nice tweak


    Thanks for publishing, works great.
    It's just what i was looking for.

    Thanks a lot.

Similar Threads

  1. Autoload Refresh when Click the Buttom
    By footballermahesh in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 8 Oct 2009, 7:28 PM
  2. (SOLVED) scroll dataview automatically to the buttom
    By robin30 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 21 Feb 2009, 3:06 PM
  3. in layout column to put button to buttom
    By emredagli in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 Aug 2008, 2:35 AM
  4. add tab from a link or a buttom
    By simpaulguy in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 29 Dec 2006, 11:37 AM

Thread Participants: 14

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