"Search Panel"
Bootstrap 3.2.0 Snippet by Synergi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="col-xs-12">
<div id="btn-search" class="nav-controller psuedo-link pull-right"><i class="fa fa-search"></i> Search</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="view">
<div class="caption">
<h3>Wiseberry</h3>
<a href="" rel="tooltip" title="Add to Favorites"><span class="fa fa-heart-o fa-2x"></span></a>
<a href="" rel="tooltip" title="View"><span class="fa fa-search fa-2x"></span></a>
</div>
<img src="http://202.51.173.32/agency/246/62116.jpg" class="img-responsive">
<div class="propertyType house">House</div>
</div>
<div class="info">
<p class="small" style="text-overflow: ellipsis">CASTLE HILL</p>
<p class="small wb-red">30/1-7 Hume Ave</p>
<span class="wb wb-beds pull-right"> <strong>4</strong> </span>
<span class="wb wb-baths pull-right"> <strong>3</strong> </span>
</div>
<div class="stats wb-red-bg">
<span class="fa fa-heart-o" rel="tooltip" title="Liked"> <strong>47</strong></span>
<span class="fa fa-eye" rel="tooltip" title="Viewed"> <strong>137</strong></span>
<span class="fa fa-photo pull-right" rel="tooltip" title="Photos"> <strong>12</strong></span>
</div>
</div>
<div class="col-md-3">
<div class="view">
<div class="caption">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
@import url("http://www.wiseberry.com.au/css/wiseberry-icons.css");
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0; z-index: 1001;}
.multiselect-container .input-group{margin:5px}
.multiselect-container>li{padding:0}
.multiselect-container>li>a.multiselect-all label{font-weight:700}
.multiselect-container>li>label.multiselect-group{margin:0;padding:3px 20px;height:100%;font-weight:700}
.multiselect-container>li>a{padding:0}
.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}
.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}
.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}
.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}
.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}
.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}
.square, .btn { border-radius: 0px!important; }
.inline { display: inline-block; }
/* -- color classes -- */
.coralbg { background-color: #FA396F; }
.coral { color: #FA396f; }
.turqbg { background-color: #46D8D2; }
.turq { color: #46D8D2; }
.wb-red-bg { background-color: #822433; }
.wb-red { color: #822433;}
.white { color: #fff!important; }
/* -- The "User's Menu Container" specific elements. Custom container for the snippet -- */
div.user-menu-container {
z-index: 10;
background-color: #fff;
margin-top: 20px;
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
* bootstrap-multiselect.js
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012 - 2014 David Stutz
*
* Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
*/
!function($) {
"use strict";// jshint ;_;
if (Array.prototype.forEach === null || Array.prototype.forEach === undefined) {
Array.prototype.forEach = function (func) {
var index;
for (index = 0; index < this.length; ++index) {
func(this[index]);
}
};
}
if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
ko.bindingHandlers.multiselect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var listOfSelectedItems = allBindingsAccessor().selectedOptions,
config = ko.utils.unwrapObservable(valueAccessor());
$(element).multiselect(config);
if (isObservableArray(listOfSelectedItems)) {
//set the initial selection state on the multi-select list
$(element).multiselect('select', ko.utils.unwrapObservable(listOfSelectedItems));
// Subscribe to the selectedOptions: ko.observableArray
listOfSelectedItems.subscribe(function (changes) {
var addedArray = [], deletedArray = [];
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: