Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 fd78bf07 编写于 作者: Y yiminghe
浏览文件
操作

Merge pull request #47 from ant-design/search 

replace search
上级 42b66fa5 80886d65
隐藏空白更改
内联 并排
Showing with 254 addition and 267 deletion
scripts/demo.js
浏览文件 @ fd78bf07
window['css-animation'] = require('css-animation');
window['react-router'] = window.ReactRouter;
var $ = require('jquery');
var React = require('react');
$(function () {
// auto complete for components
var Select = antd.Select;
var Option = Select.Option;
// 获取搜索数据
var searchData = window.ANT_COMPONENTS;
var AutoComplete = React.createClass({
getOptions() {
return searchData.map(function (s) {
return <Option sData={s} key={s.title}>
<strong>{s.title}</strong>
&nbsp;
<span>{s.desc}</span>
</Option>;
});
},
handleSelect(value) {
location.pathname = '/components/' + value.replace(/([a-z])([A-Z])/g, function (m, m1, m2) {
return m1 + '-' + m2;
}).toLowerCase();
},
filterOption(input, option) {
return option.props.sData.title.toLowerCase().indexOf(input.toLowerCase()) !== -1 || option.props.sData.desc.indexOf(input) !== -1;
},
render() {
return <Select style={{width: 200}}
placeholder="Select Components"
onChange={this.handleSelect}
dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
searchPlaceholder="Filter Components"
renderDropdownToBody={true}
showSearch={true}
filterOption={this.filterOption}>{this.getOptions()}</Select>;
}
});
React.render(<AutoComplete/>, document.getElementById('autoComplete'));
});
site/templates/component.html
浏览文件 @ fd78bf07
{% extends "page.html" %}
{% block scripts %}
<script src="/dist/{{ config.package.name }}-{{ config.package.version }}.js"></script>
<script src="/dist/demo.js"></script>
<script>
window.require = function(path) {
var result = window;
var namespaces = path.split('/');
namespaces.forEach(function(key, i) {
if (i !== 0 && i === namespaces.length - 1) {
key = capitalizeFirstLetter(key);
}
if (key !== 'lib') {
if (result[key]) {
result = result[key];
} else {
throw 'There should not have modules here 2.';
}
}
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
return result;
};
</script>
{% endblock %}
{% block content %}
<section class="main-container">
<article class="markdown">
......
site/templates/layout.html
浏览文件 @ fd78bf07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" href="/static/normalize.css">
{% block styles %}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script>
(function (con) {
'use strict';
var prop, method;
var empty = {};
var dummy = function () {};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) {
con[prop] = con[prop] || empty;
}
while (method = methods.pop()) {
con[method] = con[method] || dummy;
}
})(this.console = this.console || {});
</script>
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim-debug.js,es5-shim/4.0.5/es5-sham-debug.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js,seajs/seajs/2.2.2/sea.js,seajs/seajs-combo/1.0.1/seajs-combo.js,seajs/seajs-style/1.0.2/seajs-style.js"></script>
<script src="/static/script.js"></script>
<script>
window.antdVersion = {
latest: '{{config.package.version}}',
stable: '{{config.package.stableVersion}}'
};
</script>
{% block scripts %}{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/static/normalize.css">
{% block styles %}{% endblock %}
<link rel="stylesheet" href="/dist/{{ config.package.name }}-{{ config.package.version }}.css">
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script>
(function (con) {
'use strict';
var prop, method;
var empty = {};
var dummy = function () {
};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) {
con[prop] = con[prop] || empty;
}
while (method = methods.pop()) {
con[method] = con[method] || dummy;
}
})(this.console = this.console || {});
</script>
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim-debug.js,es5-shim/4.0.5/es5-sham-debug.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
<script>
var ANT_COMPONENTS=[];
{%- for item in resource.pages %}
{%- if item.meta.category === 'Components' %}
ANT_COMPONENTS.push({
title: '{{item.title}}',
desc: '{{item.meta.chinese}}'
});
{%- endif %}
{%- endfor %}
</script>
<script src="/static/script.js"></script>
<script>
window.antdVersion = {
latest: '{{config.package.version}}',
stable: '{{config.package.stableVersion}}'
};
</script>
<script src="/dist/{{ config.package.name }}-{{ config.package.version }}.js"></script>
<script src="/dist/demo.js"></script>
<script>
window.require = function (path) {
var result = window;
var namespaces = path.split('/');
namespaces.forEach(function (key, i) {
if (i !== 0 && i === namespaces.length - 1) {
key = capitalizeFirstLetter(key);
}
if (key !== 'lib') {
if (result[key]) {
result = result[key];
} else {
throw 'There should not have modules here 2.';
}
}
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
return result;
};
</script>
{% block scripts %}{% endblock %}
</head>
<body {% block bodyAttribute %}{% endblock %}>
<header id="header">
<header id="header">
<a class="logo" href="/">
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"> {{ config.site.name }}
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"> {{ config.site.name }}
</a>
<div class="search">
<div class="hidden">
{%- for item in resource.pages %}
{%- if item.meta.category === 'Components' %}
<input type="hidden" value="{{item.title}} {{item.meta.chinese}}"/>
{%- endif %}
{%- endfor %}
</div>
<form>
<input class="search-input" type="text" placeholder="search">
<button type="submit"></button>
</form>
<div class="search" >
<form>
<div id="autoComplete"></div>
</form>
</div>
<nav class="nav">
<span class="bar"></span>
<ul>
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
<a href="/">首页</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('docs') %}current{%- endif %}">
<a href="/docs/introduce">使用</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('design') %}current{%- endif %}">
<a class="disabled" href="/design/">设计</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('components') %}current{%- endif %}">
<a href="/components">组件</a>
</li>
<li>
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
</li>
</ul>
<span class="bar"></span>
<ul>
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
<a href="/">首页</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('docs') %}current{%- endif %}">
<a href="/docs/introduce">使用</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('design') %}current{%- endif %}">
<a class="disabled" href="/design/">设计</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('components') %}current{%- endif %}">
<a href="/components">组件</a>
</li>
<li>
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
</header>
<div class="main-wrapper">
{% block aside %}{% endblock %} {% block content %}{% endblock %}
</div>
{%- include "footer.html" %}
</div>
{%- include "footer.html" %}
</body>
</html>
site/templates/page.html
浏览文件 @ fd78bf07
......@@ -10,10 +10,6 @@
{% block description %}{% if post.summay %}{{post.summary}}{% endif %}{% endblock %}
{% block styles %}
<link rel="stylesheet" href="/dist/{{ config.package.name }}-{{ config.package.version }}.css">
{% endblock %}
{% block aside %}
{%- include "aside.html" %}
{% endblock %}
......
static/script.js
浏览文件 @ fd78bf07
$(function() {
// 获取搜索数据
var searchData = [];
$('.hidden input').each(function(i, item) {
var obj = {};
obj.english = item.value.split(' ')[0];
obj.chinese = item.value.split(' ')[1];
obj.value = item.value.toLowerCase().replace(/\s+/g, "");
searchData.push(obj);
});
seajs.config({
base: 'http://static.alipayobjects.com',
alias: {
'jquery': 'jquery/1.7.2/jquery',
'autocomplete': 'arale-autocomplete/1.4.1/autocomplete'
}
});
seajs.use(['jquery', 'autocomplete'], function($, AutoComplete){
$(function() {
var ac = new AutoComplete({
trigger: '.search-input',
selectFirst: true,
submitOnEnter: false,
dataSource: searchData,
html: '<strong>{{english}}</strong>&nbsp;<span>{{chinese}}</span>',
filter: function(data, query) {
var result = [];
query = query.toLowerCase().replace(/^\s+|\s+$/g, '');
if (!query) return result;
$.each(data, function(index, item) {
if (new RegExp(query).test(item.value)) {
result.push(item);
}
});
return result;
}
}).render();
ac.on('itemSelected', function(item) {
$(ac.get('trigger')).val('正转到 ' + item.english + ' ' + item.chinese).attr('disabled', 'disabled');
location.href = '/components/' + item.english.toLowerCase();
});
});
});
$('.component-demos .icon-all').on('click', function() {
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
......@@ -102,7 +54,6 @@ $(function() {
self.navBar = self.navBox.find(".bar");
self.navList = self.navBox.find("ul li");
self.navNum = $(".current").index();
self.search($(".search"));
self.navBarAnim();
self.navResize(null);
$(window).bind("resize", self.navResize);
......@@ -114,25 +65,6 @@ $(function() {
self.navList.eq(self.navNum).find("a").addClass("hover");
},
search: function(c) {
var self = this;
self.searchBox = c;
self.searchInput = self.searchBox.find("input[type='text']");
self.searchBtn = self.searchBox.find("button");
self.searchInput.focus(function(e) {
$(this).addClass("focus");
self.searchBtn.css("left", self.searchBox.width() + 13);
});
self.searchInput.blur(function(e) {
if (!self.searchInput.val()) {
self.searchBtn.attr("style", "");
$(this).removeClass("focus");
}
});
self.searchBtn.click(function(e) {
self.searchBox.find("form").submit();
});
},
navBarAnim: function() {
var self = this,
delay;
......
style/components/select.less
浏览文件 @ fd78bf07
......@@ -104,6 +104,31 @@
}
}
&-disabled &-selection__choice__remove {
color: #ccc;
cursor: default;
&:hover {
color: #ccc;
}
}
&-search--inline {
float: left;
.@{selectPrefixCls}-search__field {
border: none;
font-size: 100%;
//margin-top: 5px;
background: transparent;
outline: 0;
}
> i {
float: right;
}
}
&-selection--multiple {
min-height: 28px;
cursor: text;
......@@ -160,21 +185,6 @@
}
}
&-search--inline {
float: left;
.@{selectPrefixCls}-search__field {
border: none;
font-size: 100%;
//margin-top: 5px;
background: transparent;
outline: 0;
}
> i {
float: right;
}
}
&-dropdown {
display: none;
background-color: white;
......@@ -182,17 +192,78 @@
box-shadow: 0 0px 4px #d9d9d9;
border-radius: 4px;
box-sizing: border-box;
width: 100%;
z-index: 100;
//border-top: none;
//border-top-left-radius: 0;
//border-top-right-radius: 0;
left: -9999px;
top: -9999px;
position: absolute;
top: 100%;
margin-top: 4px;
outline: none;
.@{selectPrefixCls}-menu-item[aria-selected=true] {
background-color: #ddd;
&-menu {
outline: none;
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
z-index: 9999;
max-height: 250px;
overflow: auto;
> li {
margin: 0;
padding: 0;
}
& > &-item {
position: relative;
display: block;
padding: 7px 16px;
font-weight: normal;
color: #666666;
white-space: nowrap;
cursor: pointer;
&:hover, &-active, &-selected {
background-color: tint(@primary-color, 90%) !important;
}
&-selected {
position: relative;
&:after {
content: '\e613';
font-family: 'anticon';
font-weight: bold;
position: absolute;
top: 6px;
right: 16px;
color: @primary-color;
}
}
&-disabled {
color: #ccc;
cursor: not-allowed;
pointer-events: none;
&:hover {
color: #ccc;
background-color: #fff;
cursor: not-allowed;
}
}
&-divider {
height: 1px;
margin: 1px 0;
overflow: hidden;
background-color: #e5e5e5;
line-height: 0;
}
}
}
}
&-dropdown-container-open, &-open {
.@{selectPrefixCls}-dropdown {
display: block;
}
}
......@@ -217,77 +288,11 @@
.ie-rotate(3);
.rotate(270deg);
}
.@{selectPrefixCls}-dropdown {
display: block;
}
.@{selectPrefixCls}-selection {
border-color: @primary-color;
box-shadow: 0 0 3px tint(@primary-color, 20%);
}
}
&-menu {
outline: none;
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
z-index: 9999;
max-height: 250px;
overflow: auto;
> li {
margin: 0;
padding: 0;
}
& > &-item {
position: relative;
display: block;
padding: 7px 16px;
font-weight: normal;
color: #666666;
white-space: nowrap;
cursor: pointer;
&:hover, &-active, &-selected {
background-color: tint(@primary-color, 90%) !important;
}
&-selected {
position: relative;
&:after {
content: '\e613';
font-family: 'anticon';
font-weight: bold;
position: absolute;
top: 6px;
right: 16px;
color: @primary-color;
}
}
&-disabled {
color: #ccc;
cursor: not-allowed;
pointer-events: none;
&:hover {
color: #ccc;
background-color: #fff;
cursor: not-allowed;
}
}
&-divider {
height: 1px;
margin: 1px 0;
overflow: hidden;
background-color: #e5e5e5;
line-height: 0;
}
}
}
&-combobox {
.@{selectPrefixCls}-arrow {
display: none;
......
webpack.config.js
浏览文件 @ fd78bf07
......@@ -12,7 +12,7 @@ module.exports = {
entry: entry,
resolve: {
extensions: ['', '.js', '.jsx'],
extensions: ['', '.js', '.jsx']
},
output: {
......@@ -22,7 +22,7 @@ module.exports = {
externals: {
react: "React",
jquery: 'jQuery'
jquery:"jQuery"
},
module: {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或