有人可以通过CSS（less）帮助我，因为我似乎还无法理解它的工作原理，我已经通过node.js安装了它，但是现在如何将其链接到我的代码/网页？
由于某些原因，选择框未输出到网页上，因为很可能我需要将较少的文件添加到目录中（如果我输入错误，请更正我），但是我不知道该从哪个位置或从哪个位置添加它们。
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>
</head>
<div class="container">
<div id="select" ng-model=""></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900');
@import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
body {
font-family: 'Roboto';
padding: 0;
margin: 0;
background: linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%, #22254c 75%, #22254c 100%);
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: 100px;
margin-left: 20px;
color: #ecf0f1;
}
.container {
margin: 0 auto;
display: table;
}
/* selecionator */
.selectionator {
position: relative;
border-radius: 2px;
background-color: #2c3e50;
color: #95a5a6;
perspective: 800px;
width: 200px;
/*
&:before {
content: "";
background-color: transparent;
width: 100%;
height: 2.5em;
position: absolute;
background-image: linear-gradient(top, #000, rgba(0,0,0,0));
}
*/
.search {
position: relative;
display: block;
border: 0px;
width: 100%;
padding: 1em;
outline: none;
color: #FFF;
background-color: #16a085;
box-sizing: border-box;
transform-style: preserve-3d;
transform-origin: 50% 0%;
transition: transform .3s;
border-radius: 2px;
z-index: 99;
.overlay {
width: 100%;
background-color: #f00;
height: 100%;
position: absolute;
left: 0;
top: 0px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 100%);
opacity: 0;
}
.shadow {
position: absolute;
height: 15px;
width: 100%;
left: 0;
bottom: -15px;
transform-origin: center bottom;
transform: scale(0.95, 1) translate3d(0, 0px, 0);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
opacity: 0;
}
&:before {
content: "\f078";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1.5;
float: right;
vertical-align: middle;
}
}
&:hover, &.opened {
.search {
transform: rotate3d(1,0,0,60deg);
.overlay, .shadow {
opacity: 1;
}
}
.menu {
height: 200px;
opacity: 1;
}
}
.menu {
overflow: hidden;
position: absolute;
width: 100%;
top: 50%;
height: 0px;
border-radius: 0px;
background-color: #2c3e50;
transition: all 0.3s ease;
opacity: 0;
border: 1px solid #16a085;
border-top: none;
}
ul.list {
list-style: none;
padding: 0px;
margin: 0px;
overflow:hidden;
overflow-y: scroll;
height: 0px;
backface-visibility: hidden;
transition: all 0.3s ease;
opacity: 0.75;
width: 100%;
height: 100%;
> li span.header {
display: block;
padding: 6px;
background-color: #34495e;
font-weight: 200;
color: #fff;
}
}
ul.optgroup {
list-style: none;
padding: 0px;
margin: 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
li {
&:hover {
background-color: #16a085;
color: #fff;
}
input[type="checkbox"] {
display: none;
margin: 6px;
&:checked {
background-color: #1abc9c;
~ label {
background-color: #2980b9;
color: #fff;
&:before {
content: "\f14a";
}
}
}
}
label {
font-weight: 100;
display: block;
//margin: 0px 0px 0px 15px;
padding-left: 15px;
line-height: 2em;
transition: all 0.3s ease;
&:before {
content: "\f096";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
margin-right: 8px;
vertical-align: middle;
}
}
}
}
}
</style>
<script>
/*
* library dependencies:
* jquery
*/
// plugin 1.0
$(document).ready(function () {
"use strict";
var pluginName = "selectionator";
var defaults = {
propertyName: "selectionator",
src: null,
orgElement: null,
checkedItems: [],
// custom callback events
onError: function(error) {}
};
function Plugin(element, options) {
this.element = element;
this.selector = null;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
console.log("options: ", this.options);
var that = this;
var self = $(that.element);
that.options.src = that.element.getAttribute('data-src');
that.selector = that.createFromJson(that.options.data);
that.options.orgElement = that.element.parentNode.replaceChild(that.selector, that.element);
$(that.selector).addClass(that._name);
},
createFromJson: function(options) {
var that = this;
var select = document.createElement('select');
var popup = document.createElement('div');
var header = document.createElement('div');
var search = document.createElement('span');
var overlay = document.createElement('span');
overlay.className = 'overlay';
var shadow = document.createElement('span');
shadow.className = 'shadow';
var placeholder = document.createTextNode('Options');
search.className = 'search';
search.appendChild(shadow);
search.appendChild(overlay);
search.appendChild(placeholder);
popup.appendChild(search);
var menu = document.createElement('ul');
select.style.display = 'none';
menu.className = 'list';
var box = document.createElement('div');
box.className = 'menu';
box.appendChild(menu);
popup.appendChild(box);
console.log("optgroup", options.optgroups);
options.optgroups.forEach(function(optgroup, index) {
var menuItem = document.createElement('li');
//menuItem.className('header');
var header = document.createElement('span');
header.className = 'header';
var caption = document.createTextNode(optgroup.label);
header.appendChild(caption);
menuItem.appendChild(header);
var menuItems = document.createElement('ul');
menuItems.className = 'optgroup';
menuItem.appendChild(menuItems);
menu.appendChild(menuItem);
optgroup.options.forEach(function(option, index) {
var opt = new Option(option.text, option.value, option.defaultSelected, option.selected);
select.options.add(opt);
var item = document.createElement('li');
var label = document.createElement('label');
label.setAttribute("for", option.value);
var checkbox = document.createElement('input');
$(checkbox).data(option);
checkbox.setAttribute('type', 'checkbox');
checkbox.addEventListener('change', function(event){
var checkbox = event.target;
var $el = $(event.srcElement);
if (checkbox.checked) {
that.options.checkedItems.push(event.srcElement);
placeholder.nodeValue = "Selected: " + that.options.checkedItems.length + " out of " + $(that.selector).find('input[type="checkbox"]').length;
} else {
that.options.checkedItems.pop();
that.options.checkedItems = that.options.checkedItems.filter(function(items, index){
return items.value != $el.data().value;
});
placeholder.nodeValue = "Selected: " + that.options.checkedItems.length + " out of " + $(that.selector).find('input[type="checkbox"]').length;
}
console.log("data: ", that.options.checkedItems);
});
checkbox.id = option.value;
var caption = document.createTextNode(option.text);
label.appendChild(caption);
item.appendChild(checkbox);
item.appendChild(label);
menuItems.appendChild(item);
});
});
return popup;
},
onAddFriend: function(data) {
var that = this;
return that.options.onAddFriend(that, data);
},
onRemoveFriend: function(data){
var that = this;
var self = $(that.element);
return that.options.onRemoveFriend(data);
},
destroy: function() {
var that = this;
$(that.element).unbind("destroyed", that.teardown);
that.teardown();
},
teardown: function() {
var that = this;
$(that.element).removeClass(that._name);
$(that.selector).replaceWith(that.options.orgElement);
$(that.element).removeData(that._name);
that.unbind();
that.element = null;
},
bind: function() { },
unbind: function() { }
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, pluginName)) {
$.data(this, pluginName, new Plugin(this, options));
}
});
};
});
//Attach plugin to all matching element
$(document).ready(function () {
$('#select').selectionator({
data: {
optgroups: [{
label: 'Marketing',
options: [{
value: 0,
text: 'Steve',
defaultSelected: true,
selected: false
}, {
value: 345,
text: 'mike',
defaultSelected: false,
selected: false
}, {
value: 111,
text: "pepe",
defaultSelected: false,
selected: false
}, {
value: 433,
text: "anna",
defaultSelected: false,
selected: true
}]
}, {
label: 'Sales',
options: [{
value: 555,
text: 'linda',
defaultSelected: false,
selected: false
}, {
value: 333,
text: "mike",
defaultSelected: false,
selected: false
}]
}]
}
});
setTimeout(function(){
$(".selectionator").addClass('opened');
}, 500);
setTimeout(function(){
$(".selectionator").removeClass('opened');
}, 1250);
});
</script>
答案 0 :(得分：0)
创建这样的项目结构
样式（文件夹）
将较少的代码复制到style.less
然后运行lessc styles.less styles.css
来自less.org
将其编译为style.css