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

Salesforce Community URL Settings

Ich habe mich in den letzten Tagen etwas ausführlicher mit Salesforce Communities in Kombination mit der API beschäftigt. Ein Problem dabei war, den richtigen Endpoint zu berechnen, wie im letzten Beitrag beschrieben API im Salesforce Partner Portal. Um die Weichen im Code für Community Benutzer einzubauen, muss während der Laufzeit berechnet werden, in welchem Context sich der aktuell eingeloggte Benutzer befindet. Dabei muss man sich zwangsweise mit den Fragen folgender Art beschäftigen: ist der eingeloggte Benuter ein Community Benutzer? ob und welche Community ist gerade aktiv? wie sieht die definierte Community URL aus? Antwort auf die Frage 1: private Boolean isCommunityUser(){         Boolean bIsCommunityUser = false;         String sUserType = UserInfo.getUserType();         sUserType = sUserType.toUpperCase();         if(sUserTyp...
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