Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: perfectline/jquery_fancyselect
base: 2b77782b09
...
head fork: perfectline/jquery_fancyselect
compare: 046b721a47
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 5 files changed
  • 0 commit comments
  • 1 contributor
View
2  .gitignore
@@ -0,0 +1,2 @@
+.idea
+
View
68 demo.html
@@ -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>
View
0  sample/test.html
No changes.
View
124 src/jquery.fancyselect.css
@@ -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;
+}
View
0  src/jquery.fancyselect.scss
No changes.

No commit comments for this range

Something went wrong with that request. Please try again.