Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

We’re showing branches in this repository, but you can also compare across forks.

base fork: perfectline/jquery_fancyselect
base: 2b77782b09
...
head fork: perfectline/jquery_fancyselect
compare: 046b721a47
  • 2 commits
  • 5 files changed
  • 0 commit comments
  • 1 contributor
2  .gitignore
View
@@ -0,0 +1,2 @@
+.idea
+
68 demo.html
View
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+
+ <title>jQuery Fancy Select Demo</title>
+
+
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/perfectline/jquery_fancyselect/master/src/jquery.fancyselect.scss"/>
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/perfectline/jquery_fancyselect/master/src/jquery.fancyselect.js"></script>
+
+ <script type="text/javascript">
+ $(document).ready(function () {
+
+ $('div.fancy_select').fancyselect({
+ onSelect : function (item) {
+ console.log(item);
+ }
+ });
+
+ });
+ </script>
+</head>
+
+<body>
+
+<div class="fancy_select">
+
+ <div class="selected">
+ <div class="title"></div>
+ <div class="arrow">
+ <span></span>
+ </div>
+ </div>
+
+ <div class="wrapper">
+ <ul>
+
+ <li data-id="1" data-name="Banana">
+ <a href="javascript:void(0);">Banana</a>
+ </li>
+
+ <li data-id="2" data-name="Pineapple">
+ <a href="javascript:void(0);">Pineapple</a>
+ </li>
+
+ <li data-id="3" data-name="Strawberry">
+ <a href="javascript:void(0);">Strawberry</a>
+ </li>
+
+ <li data-id="4" data-name="Cherry">
+ <a href="javascript:void(0);">Cherry</a>
+ </li>
+
+ <li data-id="4" data-name="Grape">
+ <a href="javascript:void(0);">Grape</a>
+ </li>
+
+ </ul>
+ </div>
+
+</div>
+
+</body>
+</html>
0  sample/test.html
View
No changes.
124 src/jquery.fancyselect.css
View
@@ -0,0 +1,124 @@
+.fancy_select {
+ position: relative;
+}
+
+.fancy_select .selected {
+ background: #ededed;
+ background: #eaeaea;
+ background: -moz-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eaeaea));
+ background: -webkit-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
+ background: -o-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
+ background: -ms-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
+ background: linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '$top', endColorstr = '$bottom', GradientType = 0);
+ border: 1px solid #d9d9d9;
+ border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+ height: 28px;
+ cursor: pointer;
+ padding: 0;
+}
+
+.fancy_select .selected .title {
+ line-height: 28px;
+ padding: 0 8px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+ border-right: 1px solid #d2d2d2;
+ width: 166px;
+ float: left;
+}
+
+.fancy_select .selected .arrow {
+ height: 28px;
+ width: 28px;
+ float: right;
+ border-left: 1px solid #f7f7f7;
+}
+
+.fancy_select .selected .arrow span {
+ float: right;
+ display: block;
+ height: 6px;
+ width: 9px;
+ margin: 13px 10px 0 0;
+}
+
+.fancy_select .wrapper {
+ display: none;
+ position: absolute;
+ background: #ebebeb;
+ width: 212px;
+ border: 1px solid #d9d9d9;
+ top: 29px;
+ z-index: 200;
+ border-radius-bottomleft: 4px;
+ border-radius-bottomright: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ -moz-border-radius-bottomright: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+}
+
+.fancy_select .wrapper ul {
+ margin: 0;
+ padding: 0;
+ max-height: 112px;
+ overflow: auto;
+}
+
+.fancy_select .wrapper ul li {
+ display: block;
+ font-size: 1em;
+ border-top: 1px solid #f9f9f9;
+ border-bottom: 1px solid #d4d4d4;
+}
+
+.fancy_select .wrapper ul li a {
+ display: block;
+ font-size: 0.875em;
+ line-height: 26px;
+ height: 26px;
+ overflow: hidden;
+ text-decoration: none;
+ padding: 0 8px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.fancy_select .wrapper ul li.hover {
+ background: #e7e7e7;
+}
+
+.fancy_select .wrapper ul li:first-child {
+ border-top: none;
+}
+
+.fancy_select .wrapper ul li:last-child {
+ border-bottom: none;
+ border-radius-bottomleft: 4px;
+ border-radius-bottomright: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ -moz-border-radius-bottomright: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+}
+
+.fancy_select .selected.open,
+.fancy_select .selected:hover,
+.fancy_select .selected:active {
+ border-radius-bottomleft: 0;
+ border-radius-bottomright: 0;
+ -moz-border-radius-bottomleft: 0;
+ -moz-border-radius-bottomright: 0;
+ -webkit-border-bottom-left-radius: 0;
+ -webkit-border-bottom-right-radius: 0;
+}
+
+.fancy_select .selected.open + .wrapper,
+.fancy_select .selected:active + .wrapper {
+ display: block;
+}
0  src/jquery.fancyselect.scss
View
No changes.

No commit comments for this range

Something went wrong with that request. Please try again.