Direkt zum Hauptbereich

CSS Switch in Visualforce Page

Es ist schon erstaunlich, was man alles mit CSS und ohne Einsatz von JavaScript und Grafiken erreichen kann.
Das folgende Beispiel zeigt einen Switch eingebaut in eine Visualforce Seite.




Auszug aus Visualforce Page
--------------------------------------
<!-- BUTTONS -->
<div style="border:0px solid blue; width:100%; text-align:center;">
  <!-********************************-->
  <!-- SWITCH -->
  <!-********************************-->
  <apex:actionRegion >
    <apex:outputPanel styleclass="rss" rendered="true">
      <input type="checkbox" id="inputVersion" class="inputVersion" checked="checked"/>
          <label for="inputVersion" id="swtitchLabel">
            <i></i>
          </label>   
        <apex:actionSupport event="onclick" action="{!switchVersion}" rerender="version" status="switchVersionStatus"/>   
      </apex:outputPanel>
  </apex:actionRegion>
  <!-********************************-->                      
  <!-- SAVE -->
  <apex:commandButton styleClass="btn" value="Save" action="{!save}" />
</div>

                   
<!-- ********** AJAX LOADING STATUS ************-->
<apex:actionStatus id="switchVersionStatus">
  <apex:facet name="start">                                                                        
    <div class="switchVersionStatus">
      <img src="/img/loading32.gif" height="20"/>
    </div>
  </apex:facet>
</apex:actionStatus>
                 
<apex:outputPanel id="version">
  <!-- hier wird der dynamische Inhalt geladen -->
</apex:outputPanel>


Styles

--------------------------------------

<style>  
        .clear {
            clear: both;
        }
       
        .rss{
            padding-right:20px;
        }
       
        #swtitchLabel {
            width: 80px;
            height: 20px;
            display: inline-block;
            position: relative;
            border-radius: 14px;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding-box;
            background-clip: padding-box;
            background: rgb(138,138,138);
            background: -webkit-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            background: -moz-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            background: -o-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            background: -ms-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            background: linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
            box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.32), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
            line-height: 20px;
            font-style: normal;
            color: #fff;
            text-shadow: 0 1px 1px rgba(0,0,0,0.1);
            font-weight: bold;
            -webkit-box-reflect: below 0px
                -webkit-gradient(linear, left top, left bottom,
                color-stop(0.5, transparent),
                to(rgba(255, 255, 255, 0.3)));
            -moz-transition: all 1s ease-in;
            -webkit-transition: all 1s ease-in;
            -o-transition: all 1s ease-in;
            transition: all 1s ease-in;
            cursor: pointer;
        }
       
        #swtitchLabel.attention:hover {
            background: rgb(238,159,7);
            background: -moz-linear-gradient(top,  rgba(238,159,7,1) 0%, rgba(240,171,8,1) 45%, rgba(243,182,15,1) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,159,7,1)), color-stop(45%,rgba(240,171,8,1)), color-stop(100%,rgba(243,182,15,1)));
            background: -webkit-linear-gradient(top,  rgba(238,159,7,1) 0%,rgba(240,171,8,1) 45%,rgba(243,182,15,1) 100%);
            background: -o-linear-gradient(top,  rgba(238,159,7,1) 0%,rgba(240,171,8,1) 45%,rgba(243,182,15,1) 100%);
            background: -ms-linear-gradient(top,  rgba(238,159,7,1) 0%,rgba(240,171,8,1) 45%,rgba(243,182,15,1) 100%);
            background: linear-gradient(to bottom,  rgba(238,159,7,1) 0%,rgba(240,171,8,1) 45%,rgba(243,182,15,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee9f07', endColorstr='#f3b60f',GradientType=0 );
        }
        #swtitchLabel.attention:hover:before {
            content: "☢"; /* &#9762; */
            font-size: 22px
        }
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel.attention:hover:before  {
            content: "on";
            font-size: 14px
        }
       
       
        #swtitchLabel i {
            position: absolute;
            top: -4px;
            right:60px;
            width: 24px;
            height: 24px;
            display: block;
            border-radius: 24px;
            background: rgb(255,255,255);
            background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
            box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.2);
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            transition: all 200ms ease;
        }
       
        #swtitchLabel i:before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 14px;
            height: 14px;
            margin: -7px 0 0 -7px;
            border-radius: 18px;
            background: rgb(239,239,239);
            background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: -o-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: -ms-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
        }
        #swtitchLabel:hover i {
            box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.3);
        }
        #swtitchLabel:active i:before {
            box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
        }
       
        #swtitchLabel:before {
            content: "off";
            margin-left: 30px;
            text-transform: uppercase;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            transition: all 200ms ease;
        }
       
        #swtitchLabel:after {
            content: "Category Search";
            right: 60px;
            width: 150px;
       
            text-transform: uppercase;
            font-size: 10px;
            font-weight: bold;
            color: #999;
            text-shadow: 0 1px 1px rgba(255,255,255,0.5), 0 -1px 1px rgba(0,0,0,0.1);
            position: absolute;
            top: 0;
        }
       
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel:before {
            content: "on";
            text-transform: uppercase;
            margin-right: 30px;
            margin-left: 0;
        }
       
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel:after {
            xcontent: "Category Search";
            xright: -170px;
        }
       
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel{
            background: rgb(141,173,51);
            background: -webkit-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
            background: -moz-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
            background: -o-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
            background: -ms-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
            background: radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
        }
       
        .inputVersion[type=checkbox]:checked ~ #swtitchLabel i {
            right: -6px;
        }
       
        /* you can hide leter */
        .inputVersion:before {
            xcontent: "Logic:";
            margin-left: -35px;
            font-size: 10px;
            color: #333;
        }
        .inputVersion {
            display:none;
            position: absolute;
            bottom: 5px;
            left: 50%;
            margin-left: 10px;
            opacity: .1;
          -webkit-transition: all 0.3s ease-out;
             -moz-transition: all 0.3s ease-out;
               -o-transition: all 0.3s ease-out;
                  transition: all 0.3s ease-out;
        }
        .inputVersion:hover {
            opacity: 1;
        }                   
                   
     .switchVersionStatus{
            display: block;
            position: absolute;
        }              
                   

    </style>
Labels:

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Community Builder funktioniert nicht

Nachdem ich eine in einer Sandbox konfigurierte und getestete Lightning Community per Changeset auf die Produktion übertrage und bereitgestellt hatte, stellte ich fest, dass sich die Community nicht konfigurieren lässt. Das Deployment lief fehlerfrei durch. Alle Komponenten der Lightning Community sind verfügbar. Jedoch erscheint die Fehlermeldung Cannot read property 'def' of undefined sobald ich auf den "Builder" - Link klicke. Folgendes Workaround löst das Problem: 1. Go to "All Communities" and click on "Workspaces" beside the problematic community. 2. Go to "Administration | Pages" and click on "Go to Site.com Studio". 3. Once site.com studio has finished loading, click on the "Site Actions" icon (small cog in top right of screen), and select "Export This Site". 4. When prompted, specify a local location to save the site export, and wait for the file download to complete. 5. After the d...
Kommentar veröffentlichen
Mehr anzeigen

Bad value for restricted picklist field

Der Einsatz von "Restricted Picklists" bereitet spätestens im Deployment Kopfschmerzen. Basiert das Deployment auf Basis eines Drittanbietertools, dann sind die Kopfschmerzen noch intensiver. In meinem Fall habe ich versucht, ein neues Picklist-Feld mit Copado zu deployen. Während der Bereitstellung bekomme ich die folgende Fehlermeldung: System.DmlException: Insert failed. First exception on row 0; first error: INVALID_OR_NULL_FOR_RESTRICTED_PICKLIST, bad value for restricted picklist field: Z012: [CountryGroup__c] Das neue Picklist-Feld übernimmt alle Werte aus einem Global Value Set. Das bedeutet, die Option "Restrict to the values defined in the value set" ist automatisch aktiv und lässt sich nicht deaktivieren. Eine APEX-Testklasse beschreibt ebenfalls die neue Pickliste. Mit dem folgenden Workaround konnte ich das Deployment-Problem lösen: 1) Global Value Set samt Pickliste per Changeset in die Zielorg übertragen und bereitstellen ggf. Prof...
Kommentar veröffentlichen
Mehr anzeigen

Crazy SOQL

Genauso habe ich heute geschaut, als ich den folgenden Code ausgeführt und das Ergebnis ausgewertet habe: CustomObj__c obj = [select LookupField__c from CustomObj__c where LookupField__c != NULL AND Id = 'hereisavalidid']; system.debug(' LookupField__c darf nicht NULL sein '); if(obj.LookupField__c == null){     system.debug(' Also doch NULL '); } Und was sehen meine müde Augen im Log... LookupField__c ist ein Lookup- und Pflichtfeld, somit darf eigentlich per Definition nicht NULL sein. Offensichtlich gibt es (alte) Daten im System mit dem  LookupField__c = NULL Habe erwartet, dass die SOQL Abfrage die NULL-Daten filtert.
Kommentar veröffentlichen
Mehr anzeigen