在书签菜单里面加了展示方式选项
This commit is contained in:
luchenqun
parent
b31a121126
commit
2a6387761c
|
|
@ -13,10 +13,13 @@ app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', 'bookmarkSe
|
|||
|
||||
pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, data) {
|
||||
console.log('subscribe MenuCtr.bookmarks', data);
|
||||
$scope.showSearch = (Math.random() >= 0.5);
|
||||
if ($scope.showSearch) {
|
||||
semanticInit();
|
||||
}
|
||||
// $scope.showSearch = (Math.random() >= 0.5);
|
||||
// if ($scope.showSearch) {
|
||||
// setTimeout(() => {
|
||||
// semanticInit();
|
||||
// }, 100);
|
||||
//
|
||||
// }
|
||||
getBookmarks(data);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,14 @@ app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope,
|
|||
/**
|
||||
* @todo http://stackoverflow.com/questions/31449948/ui-router-state-go-not-working
|
||||
*/
|
||||
if ($scope.login) {
|
||||
setTimeout(() => {
|
||||
$state.go('bookmarks', {foo: 'i love you', bar: 'hello world'})
|
||||
}, 0);
|
||||
}
|
||||
if ($scope.login) {
|
||||
setTimeout(() => {
|
||||
$state.go('bookmarks', {
|
||||
foo: 'i love you',
|
||||
bar: 'hello world'
|
||||
})
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// 登陆之后显示的菜单数据。uiSerf：内部跳转链接。
|
||||
$scope.loginMenus = [{
|
||||
|
|
@ -86,6 +89,9 @@ app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope,
|
|||
}
|
||||
|
||||
function semanticInit() {
|
||||
$('.ui.dropdown').dropdown();
|
||||
// $('.ui.dropdown').dropdown();
|
||||
$('.ui.dropdown.js-bookmark-dropdown').dropdown({
|
||||
maxSelections: 2,
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<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">
|
||||
|
|
@ -24,7 +23,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui dropdown item">
|
||||
<div class="text">点击次数</div>
|
||||
<i class="dropdown icon"></i>
|
||||
|
|
@ -33,30 +31,26 @@
|
|||
<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>
|
||||
<tr>
|
||||
<th>标题</th>
|
||||
<th>描述</th>
|
||||
<th>创建日期</th>
|
||||
<th>最后点击日期</th>
|
||||
<th>点击次数</th>
|
||||
<th>链接</th>
|
||||
<th>标签</th>
|
||||
</tr>
|
||||
|
|
@ -64,14 +58,16 @@
|
|||
<tbody>
|
||||
<tr ng-repeat="bookmark in bookmarks">
|
||||
<td>{{ bookmark.title }}</td>
|
||||
<td>{{ bookmark.description }}</td>
|
||||
<td>{{ bookmark.create_date }}</td>
|
||||
<td>{{ bookmark.click_latest_date }}</td>
|
||||
<td>{{ bookmark.click_count }}</td>
|
||||
<td>{{ bookmark.url }}</td>
|
||||
<td>{{ bookmark.tags }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="4">
|
||||
<th colspan="6">
|
||||
<div class="ui right floated pagination menu">
|
||||
<a class="icon item">
|
||||
<i class="left chevron icon"></i>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>备忘</label>
|
||||
<textarea rows="2" placeholder="可以是网站的说明，也可以备忘一下账号密码什么的，就算公开你的链接，这个也只有自己能在详情里面看到"></textarea>
|
||||
</div>
|
||||
<div class="ui segment">
|
||||
<div class="field">
|
||||
<div class="ui toggle checkbox checked">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,33 @@
|
|||
<div class="js-menu" ng-controller="menuCtr">
|
||||
<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 }}
|
||||
<div class="ui inline labeled dropdown js-bookmark-dropdown" ng-if="$index==0">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
<div class="header">显示方式</div>
|
||||
<div class="divider"></div>
|
||||
<div class="item">导航</div>
|
||||
<div class="item">表格</div>
|
||||
<div class="item">卡片</div>
|
||||
<div class="divider"></div>
|
||||
<div class="header">搜索方式</div>
|
||||
<div class="item">状态</div>
|
||||
<div class="item">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="ui buttons menu">
|
||||
<div class="ui button">切换</div>
|
||||
<div class="ui floating dropdown icon button">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="drop">下拉</div>
|
||||
<div class="item" data-value="horizontal flip">水平翻转</div>
|
||||
<div class="item" data-value="fade up">渐隐</div>
|
||||
<div class="item" data-value="scale">规模</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right menu">
|
||||
<div class="ui category right search item">
|
||||
<div class="ui transparent icon input">
|
||||
|
|
|
|||
|
|
@ -1,23 +1,60 @@
|
|||
|
||||
var api = require('express').Router();
|
||||
|
||||
api.get('/bookmarks', function (req, res) {
|
||||
console.log('hello bookmarks', JSON.stringify(req.query));
|
||||
api.get('/bookmarks', function(req, res) {
|
||||
console.log('hello bookmarks', JSON.stringify(req.query));
|
||||
|
||||
var data = [
|
||||
{title:'谷歌', description:'一个网站', url:'https://www.google.com.hk/', tags:['搜索','常用']},
|
||||
{title:'百度', description:'二个网站', url:'https://www.baidu.com/', tags:['搜索','常用']},
|
||||
{title:'博客', description:'三个网站', url:'http://luchenqun.com/', tags:['博文','常用']},
|
||||
{title:'腾讯', description:'四个网站', url:'http://www.qq.com/', tags:['新闻','常用']},
|
||||
{title:'知乎', description:'五个网站', url:'http://www.zhihu.com/', tags:['问题','常用']}
|
||||
]
|
||||
res.json(data);
|
||||
var data = [{
|
||||
title: '谷歌',
|
||||
description: '一个网站',
|
||||
create_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
click_latest_date: '20161025',
|
||||
url: 'https://www.google.com.hk/',
|
||||
tags: ['搜索', '常用']
|
||||
}, {
|
||||
title: '百度',
|
||||
description: '二个网站',
|
||||
create_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
click_latest_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
url: 'https://www.baidu.com/',
|
||||
tags: ['搜索', '常用']
|
||||
}, {
|
||||
title: '博客',
|
||||
description: '三个网站',
|
||||
create_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
click_latest_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
url: 'http://luchenqun.com/',
|
||||
tags: ['博文', '常用']
|
||||
}, {
|
||||
title: '腾讯',
|
||||
description: '四个网站',
|
||||
create_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
click_latest_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
url: 'http://www.qq.com/',
|
||||
tags: ['新闻', '常用']
|
||||
}, {
|
||||
title: '知乎',
|
||||
description: '五个网站',
|
||||
create_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
click_latest_date: '20161025',
|
||||
click_count: parseInt(Math.random() * 100),
|
||||
url: 'http://www.zhihu.com/',
|
||||
tags: ['问题', '常用']
|
||||
}]
|
||||
res.json(data);
|
||||
});
|
||||
|
||||
api.get('/tags', function (req, res) {
|
||||
console.log('hello tags', JSON.stringify(req.query));
|
||||
var data = ['搜索', '常用', '新闻', '博文', 'JavaScript']
|
||||
res.json(data);
|
||||
api.get('/tags', function(req, res) {
|
||||
console.log('hello tags', JSON.stringify(req.query));
|
||||
var data = ['搜索', '常用', '新闻', '博文', 'JavaScript']
|
||||
res.json(data);
|
||||
});
|
||||
|
||||
module.exports = api;
|
||||
|
|
|
|||
Loading…
Reference in New Issue