CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<div id="finder">

<ul id="locator">
                    <li class="">
                        <i class="icon-screenshot"></i> <span>Bundesweit</span>

                        <input type="radio" value="all" name="location" class="hidden">

                        

                    </li>

                    <li class="states active">
                        <i class="icon-screenshot"></i> <span style="background-color: rgb(255, 255, 255); padding-right: 79px;">Bundesland</span>

                        <input type="radio" value="state" name="location" class="hidden" checked="checked">


                        <ul class="hidden" id="stateList" style="">
                                                            <li><label class="checkbox"><input type="checkbox" value="1" name="state[]"> Baden-Württemberg</label></li>
                                                            <li><label class="checkbox"><input type="checkbox" value="2" name="state[]"> Bayern</label></li>
                                             ...

CSS

.hidden {
    display: none;
}
#finder {
  margin-left: 388px;
  color: #999999;
  height: 90px;
  min-height: 90px;
  text-transform: uppercase;
}
#finder ul li {
  cursor: pointer;
  margin-bottom: 0px;
  line-height: 26px;
  position: relative;
}
#finder ul li label {
  cursor: pointer;
  line-height: 26px;
  margin-bottom: 0px;
  padding-left: 19px;
}
#finder ul li label > span {
  padding: 5px 3px;
}
#finder ul li > span {
  padding: 5px 3px;
}
#finder ul li.hover span:not(#radialSearch),
#finder ul li.hover i {
  color: #333333;
}
#finder ul li.hover span:not(#radialSearch) svg polygon,
#finder ul li.hover i svg polygon {
  fill: #333333;
}
#finder ul li.active > span,
#finder ul li.active > label span,
#finder ul li.active i {
  color: #333333;
}
#finder ul li.active > span svg polygon,
#finder ul li.active > label span svg polygon,
#finder ul li.active i svg polygon {
  fill: #333333;
}
#finder #orientation {
  float: left;
  width: 200px;
}
#finder #locator {
  float: left;
  width: 225px;
}
#finder ul#stateList {
  background: none repeat scroll 0 0 #FFFFFF;
  padding: 15px 10px 10px;
  position: absolute;
  z-index: 999;
  width: 160px;
  left: 17px;
}
#finder ul#stateList li {
  font-size: 13px;
  line-height: 13px;
  margin-bottom: 2px;
  line-height: 20px;
}
#finder ul#stateList li label {
  font-size: 13px;
  line-height: 13px;
  margin-bottom: 2px;
  line-height: 20px;
  min-height: 18px;
}
#finder ul#stateList li label > div {
  top: -3px;
}
#finder #radialSearch label {
  font-size: 12px;
  line-height: 12px;
  display: inline;
  text-transform: none;
  padding-left: 15px;
  letter-spacing: -1px;
}

JavaScript

;$(function () {
    "use strict";

    can.Control.extend('plugins.finder', {}, {
        init: function (el) {
            this.el = el;

            /** finde alle aktiven checkboxen und radiobuttons **/
            $('ul#orientation > li').each(function(){
                var _this = $(this);
                if (_this.find('div.icheckbox_minimal-gray').hasClass('checked')){
                    _this.addClass('active');
                }
            });
            $('ul#locator > li').each(function(){
                var _this = $(this);
                if (_this.find('input[name=location]').is(':checked')){
                    _this.addClass('active');
                }
            });

        },

        'ul#orientation > li, ul#locator > li mouseenter': function (el, e) {
            e.preventDefault();
            el.addClass('hover');
        },

        'ul#orientation > li, ul#locator > li mouseleave': function (el, e) {
            el.removeClass('hover');
        },

        /** setzte aktiv **/
        'ul#orientation > li click': function (el) {
            el.toggleClass('active');
        },

        'ul#locator > li click': function (el,e) {
            //e.preventDefault();
            //e.stopImmediatePropagation();

            if(el.hasClass('active')){
                return false; // RADIO BUTTON behaviour
            }else{
                $('ul#locator > li').removeClass('active')
                    .find('input[name=location]').removeAttr('checked');

                $('#locator #stateList input').removeAttr('checked')
                    .parent().removeClass('checked');

                if($('#locator #stateList').is(':visible')){
                    $('#locator #stateList').stop().slideUp(function(){
                        $('#locator .states > span').css('background-color','transparent');
                    });
                }


                el.addClass('active')
                   ...