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

Zeitgesteuerter Flow blockiert Custom Leadkonvertierung

Die programmierte Konvertierung eines Leads bricht mit der Fehlermeldung "Unable to convert lead that is in use by workflow" ab. Der Grund ist ein Prozess, der automatisiert und zeitgesteuert ausgeführt wird. Dieser Prozess ruft zu einem späteren Zeitpunkt einen Flow auf. Während der Speicherung eines Leads wird dabei automatisch ein Flow Interview erstellt. Dieser Datensatz vom Typ "FlowInterview" blockiert die Leadkonvertierung. Lösung: Unmittelbar vor der Leadkonvertierung eine Checkbox auf dem Lead auf TRUE setzen. Da dieselbe Checkbox in den Process Builder Kriterien eingebunden ist und der Prozess nur auf den FALSE Wert reagiert, löscht das System automatisch das entsprechende Flow Interview.
Kommentar veröffentlichen
Mehr anzeigen