liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

将搜索放在了书签页面里面，点详情的时候弹出

This commit is contained in:
luchenqun 2016-10-25 17:47:37 +08:00
parent e1a6b26b1d
commit b31a121126
9 changed files with 160 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/css/externe/calendar.min.css vendored Normal file
View File

@ -0,0 +1,9 @@
/*!
* # Semantic UI 0.0.2 - Calendar
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/.ui.calendar .ui.popup{max-width:none;padding:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui.calendar .calendar:focus{outline:0}.ui.calendar .ui.table.minute,.ui.calendar .ui.table.month,.ui.calendar .ui.table.year{min-width:15em}.ui.calendar .ui.table.day{min-width:18em}.ui.calendar .ui.table.hour{min-width:20em}.ui.calendar .ui.table tr td,.ui.calendar .ui.table tr th{padding:.5em;white-space:nowrap}.ui.calendar .ui.table tr th{border-left:none}.ui.calendar .ui.table tr th .icon{margin:0}.ui.calendar .ui.table tr:first-child th{position:relative;padding-left:0;padding-right:0}.ui.calendar .ui.table.day tr:first-child th{border:none}.ui.calendar .ui.table.day tr:nth-child(2) th{padding-top:.2em;padding-bottom:.3em}.ui.calendar .ui.table tr td{padding-left:.1em;padding-right:.1em}.ui.calendar .ui.table tr .link{cursor:pointer}.ui.calendar .ui.table tr .prev.link{width:14.28571429%;position:absolute;left:0}.ui.calendar .ui.table tr .next.link{width:14.28571429%;position:absolute;right:0}.ui.calendar .ui.table tr .disabled{pointer-events:none;color:rgba(40,40,40,.3)}.ui.calendar .ui.table tr td.today{font-weight:700}.ui.calendar .ui.table tr td.range{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);box-shadow:none}.ui.calendar .ui.table.inverted tr td.range{background:rgba(255,255,255,.08);color:#fff;box-shadow:none}.ui.calendar .calendar.active .ui.table tbody tr td.focus,.ui.calendar .calendar.active .ui.table.inverted tbody tr td.focus,.ui.calendar .calendar:focus .ui.table tbody tr td.focus,.ui.calendar .calendar:focus .ui.table.inverted tbody tr td.focus{box-shadow:inset 0 0 0 1px #85B7D9}

76
public/index.html
View File

@ -1,39 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8"> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8">
<meta name="description" content="bookmark"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="luchenqun"> <meta name="description" content="bookmark">
<title>我的书签</title> <meta name="author" content="luchenqun">
<link href="/css/externe/semantic.min.css " rel="stylesheet"/> <title>我的书签</title>
<link href="/css/style.css " rel="stylesheet"/> <link href="/css/externe/semantic.min.css " rel="stylesheet" />
<base href="/"> <link href="/css/externe/calendar.min.css" rel="stylesheet" />
</head> <link href="/css/style.css " rel="stylesheet" />
<body ng-app="bookmarkApp">
<div class="ui container "> <base href="/">
<!-- directive：菜单 --> </head>
<menus></menus>
<div class="ui container" style="width:100%;height:20px"></div> <body ng-app="bookmarkApp">
<div class="ui container"> <div class="ui container ">
<div ui-view></div> <!-- directive：菜单 -->
</div> <menus></menus>
<div class="foot"></div> <div class="ui container" style="width:100%;height:20px"></div>
<!-- directive：书签编辑 --> <div class="ui container">
<edit></edit> <div ui-view></div>
</div> </div>
<script src="/scripts/externe/jquery-3.1.1.min.js"></script> <div class="foot"></div>
<script src="/scripts/externe/angular.min.js"></script> <!-- directive：书签编辑 -->
<script src="/scripts/externe/angular-ui-router.min.js"></script> <edit></edit>
<script src="/scripts/app-angular.js"></script> </div>
<script src="/scripts/services/bookmark-service.js"></script> <script src="/scripts/externe/jquery-3.1.1.min.js"></script>
<script src="/scripts/services/pub-sub-service.js"></script> <script src="/scripts/externe/angular.min.js"></script>
<script src="/scripts/directives/edit-directive.js"></script> <script src="/scripts/externe/angular-ui-router.min.js"></script>
<script src="/scripts/directives/menus-directive.js"></script> <script src="/scripts/app-angular.js"></script>
<script src="/scripts/controllers/bookmarks-controller.js"></script> <script src="/scripts/services/bookmark-service.js"></script>
<script src="/scripts/controllers/tags-controller.js"></script> <script src="/scripts/services/pub-sub-service.js"></script>
<script src="/scripts/controllers/menus-controller.js"></script> <script src="/scripts/directives/edit-directive.js"></script>
<script src="/scripts/controllers/edit-controller.js"></script> <script src="/scripts/directives/menus-directive.js"></script>
<script src="/scripts/externe/semantic.min.js"></script> <script src="/scripts/controllers/bookmarks-controller.js"></script>
</body> <script src="/scripts/controllers/tags-controller.js"></script>
<script src="/scripts/controllers/menus-controller.js"></script>
<script src="/scripts/controllers/edit-controller.js"></script>
<script src="/scripts/externe/semantic.min.js"></script>
<script src="/scripts/externe/calendar.min.js"></script>
</body>
</html> </html>

9
public/scripts/app-angular.js
View File

@ -8,7 +8,12 @@ app.config(function($stateProvider, $urlRouterProvider) {
.state('bookmarks', { .state('bookmarks', {
url: '/bookmarks', url: '/bookmarks',
templateUrl: '/views/bookmarks.html', templateUrl: '/views/bookmarks.html',
params: {
foo: null,
bar: null
},
controller: 'bookmarksCtr' controller: 'bookmarksCtr'
}) })
.state('addBookmark', { .state('addBookmark', {
url: '/addBookmark', url: '/addBookmark',
@ -35,10 +40,6 @@ app.config(function($stateProvider, $urlRouterProvider) {
url: '/intro', url: '/intro',
templateUrl: '/views/intro.html' templateUrl: '/views/intro.html'
}) })
.state('search', {
url: '/search',
templateUrl: '/views/search.html'
})
.state('/', { .state('/', {
url: '/', url: '/',
templateUrl: '/views/intro.html' templateUrl: '/views/intro.html'

41
public/scripts/controllers/bookmarks-controller.js
View File

@ -1,6 +1,9 @@
app.controller('bookmarksCtr', ['$scope', '$filter', 'bookmarkService', 'pubSubService', function($scope, $filter, bookmarkService, pubSubService) { app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', 'bookmarkService', 'pubSubService', function($scope, $stateParams, $filter, bookmarkService, pubSubService) {
console.log("Hello bookmarksCtr..."); console.log("Hello bookmarksCtr...", $stateParams);
$scope.bookmarks = []; // 书签数据 $scope.bookmarks = []; // 书签数据
$scope.showSearch = false; // 书签数据
semanticInit();
var params = { var params = {
s: 111, s: 111,
b: 222, b: 222,
@ -10,6 +13,10 @@ app.controller('bookmarksCtr', ['$scope', '$filter', 'bookmarkService', 'pubSubS
pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, data) { pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, data) {
console.log('subscribe MenuCtr.bookmarks', data); console.log('subscribe MenuCtr.bookmarks', data);
$scope.showSearch = (Math.random() >= 0.5);
if ($scope.showSearch) {
semanticInit();
}
getBookmarks(data); getBookmarks(data);
}); });
@ -29,4 +36,34 @@ app.controller('bookmarksCtr', ['$scope', '$filter', 'bookmarkService', 'pubSubS
} }
); );
} }
function semanticInit() {
$('.ui.dropdown').dropdown();
$('.ui.calendar.js-date-begin').calendar({
type: 'date',
formatter: {
date: function(date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
},
endCalendar: $('.ui.calendar.js-date-end')
});
$('.ui.calendar.js-date-end').calendar({
type: 'date',
formatter: {
date: function(date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
},
startCalendar: $('.ui.calendar.js-date-begin')
});
}
}]); }]);

18
public/scripts/controllers/menus-controller.js
View File

@ -3,23 +3,16 @@ app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope,
$scope.selectLoginIndex = 0; /**< 默认登陆之后的选择的菜单索引，下表从 0 开始 */ $scope.selectLoginIndex = 0; /**< 默认登陆之后的选择的菜单索引，下表从 0 开始 */
$scope.selectNotLoginIndex = 0; /**< 默认未登陆之后的选择的菜单索引，下表从 0 开始 */ $scope.selectNotLoginIndex = 0; /**< 默认未登陆之后的选择的菜单索引，下表从 0 开始 */
$scope.keyword = ''; /**< 搜索关键字 */ $scope.keyword = ''; /**< 搜索关键字 */
$scope.showSearchInput = true; /**< 是否显示输入搜索关键字的输入框 */
if ($scope.login) {
setTimeout(() => {
$state.go('bookmarks')
}, 0);
}
semanticInit(); semanticInit();
/** /**
* @todo http://stackoverflow.com/questions/31449948/ui-router-state-go-not-working * @todo http://stackoverflow.com/questions/31449948/ui-router-state-go-not-working
*/ */
if ($scope.login) { if ($scope.login) {
setTimeout(() => { setTimeout(() => {
$state.go('bookmarks') $state.go('bookmarks', {foo: 'i love you', bar: 'hello world'})
}, 0); }, 0);
} }
// 登陆之后显示的菜单数据。uiSerf：内部跳转链接。 // 登陆之后显示的菜单数据。uiSerf：内部跳转链接。
$scope.loginMenus = [{ $scope.loginMenus = [{
@ -84,7 +77,6 @@ app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope,
* @desc 点击下拉列表详情搜索 * @desc 点击下拉列表详情搜索
*/ */
$scope.searchDetail = function() { $scope.searchDetail = function() {
$scope.showSearchInput = false;
pubSubService.publish('MenuCtr.searchDetail', { pubSubService.publish('MenuCtr.searchDetail', {
'key': 'JavaScript' 'key': 'JavaScript'
}); });

1
public/scripts/externe/calendar.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

56
public/views/bookmarks.html
View File

@ -1,4 +1,58 @@
<table class="ui celled table"> <div class="ui small menu js-search-detail" ng-if="showSearch">
<div class="ui dropdown item">
<div class="text">搜索范围</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">自己书签</div>
<div class="item">全站书签</div>
</div>
</div>
<div class="item" style="width:136px;">
<div class="ui calendar js-date-begin">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期">
</div>
</div>
</div>
<div class="item" style="width:136px;">
<div class="ui calendar js-date-end">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期">
</div>
</div>
</div>
<div class="ui dropdown item">
<div class="text">点击次数</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">大于</div>
<div class="item">小于</div>
</div>
</div>
<div class="ui item transparent icon input" style="width:120px;">
<input class="prompt" type="text" ng-model="keyword" placeholder="点击次数">
</div>
<div class="ui item transparent icon input" style="width:120px;">
<input class="prompt" type="text" ng-model="keyword" placeholder="用户账号">
</div>
<div class="ui item transparent icon input" style="width:160px;">
<input type="text" placeholder="标题，链接，分类">
</div>
<div class="right item">
<div class="ui button">搜索</div>
</div>
</div>
<table class="ui celled table" ng-show="bookmarks.length > 0">
<thead> <thead>
<tr> <tr>
<th>标题</th> <th>标题</th>

15
public/views/menus.html
View File

@ -2,21 +2,16 @@
<div class="ui small menu js-login-in" ng-show="login"> <div class="ui small menu js-login-in" ng-show="login">
<a class="item" ng-class="{active:$index==selectLoginIndex}" ui-sref="{{ menu.uiSref }}" ng-click="selectMenu($index, login)" ng-repeat="menu in loginMenus">{{ menu.title}}</a> <a class="item" ng-class="{active:$index==selectLoginIndex}" ui-sref="{{ menu.uiSref }}" ng-click="selectMenu($index, login)" ng-repeat="menu in loginMenus">{{ menu.title}}</a>
<div class="right menu"> <div class="right menu">
<div class="ui dropdown item"> <div class="ui category right search item">
<div class="text">搜索设置</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" ng-click="showSearchInput = true">自己书签</div>
<div class="item" ng-click="searchDetail()" ui-sref="search">详情搜索</div>
</div>
</div>
<div class="ui category right search item" ng-show="showSearchInput">
<div class="ui transparent icon input"> <div class="ui transparent icon input">
<input class="prompt" type="text" ng-model="keyword" placeholder="标题，链接，分类..."> <input class="prompt" type="text" ng-model="keyword" placeholder="标题，链接，分类...">
<i class="search link icon" ng-click="searchBookmarks()" ui-sref="bookmarks"></i> <i class="search link icon" ng-click="searchBookmarks()" ui-sref="bookmarks({foo: 'fooVal1', bar: 'barVal1'})"></i>
</div> </div>
<div class="results"></div> <div class="results"></div>
</div> </div>
<div class="item">
<div class="ui button" ng-click="searchDetail()" ui-sref="bookmarks">详情搜索</div>
</div>
<div class="item"> <div class="item">
<div class="ui button" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks">添加书签</div> <div class="ui button" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks">添加书签</div>
</div> </div>

3
public/views/search.html
View File

@ -1,3 +0,0 @@
<p>
这是详情搜索页
</p>