增加书签增加操作
This commit is contained in:
luchenqun
parent
f049bb2b39
commit
e84b62866e
File diff suppressed because one or more lines are too long
|
|
@ -1,70 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="bookmark">
|
||||
<meta name="author" content="luchenqun">
|
||||
<title>我的书签</title>
|
||||
<link href="/css/externe/semantic.min.css " rel="stylesheet" />
|
||||
<link href="/css/style.css " rel="stylesheet" />
|
||||
<base href="/">
|
||||
</head>
|
||||
|
||||
<body ng-app="bookmarkApp">
|
||||
<div class="ui container ">
|
||||
<div id="header" 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>
|
||||
<div class="right menu">
|
||||
<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>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="bookmark">
|
||||
<meta name="author" content="luchenqun">
|
||||
<title>我的书签</title>
|
||||
<link href="/css/externe/semantic.min.css " rel="stylesheet"/>
|
||||
<link href="/css/style.css " rel="stylesheet"/>
|
||||
<base href="/">
|
||||
</head>
|
||||
<body ng-app="bookmarkApp">
|
||||
<div class="ui container ">
|
||||
<div id="header" 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>
|
||||
<div class="right menu">
|
||||
<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 category right search item">
|
||||
<div class="ui transparent icon input">
|
||||
<input class="prompt" type="text" placeholder="请输入书签的Url...">
|
||||
<i class="search link icon"></i>
|
||||
</div>
|
||||
<div class="results"></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks">添加书签</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">退出</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui category right search item">
|
||||
<div class="ui transparent icon input">
|
||||
<input class="prompt" type="text" placeholder="请输入书签的Url...">
|
||||
<i class="search link icon"></i>
|
||||
</div>
|
||||
<div class="ui small menu js-not-login-in" ng-hide="login">
|
||||
<a class="item" ng-class="{active:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-click="selectMenu($index, login)" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
|
||||
<div class="right menu">
|
||||
<div class="item">
|
||||
<div class="ui button">登陆</div>
|
||||
</div>
|
||||
<div class="results"></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">添加书签</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui button">退出</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui small menu js-not-login-in" ng-hide="login">
|
||||
<a class="item" ng-class="{active:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-click="selectMenu($index, login)" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
|
||||
<div class="right menu">
|
||||
<div class="item">
|
||||
<div class="ui button">登陆</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui container" style="width:100%;height:20px"></div>
|
||||
<div class="ui container">
|
||||
<div ui-view></div>
|
||||
</div>
|
||||
<div class="foot"></div>
|
||||
<edit></edit>
|
||||
</div>
|
||||
<div class="ui container" style="width:100%;height:20px"> </div>
|
||||
<div class="ui container">
|
||||
<div ui-view></div>
|
||||
</div>
|
||||
<div class="foot"></div>
|
||||
</div>
|
||||
<script src="/scripts/externe/jquery-3.1.1.min.js"></script>
|
||||
<script src="/scripts/externe/angular.min.js"></script>
|
||||
<script src="/scripts/externe/angular-ui-router.min.js"></script>
|
||||
<script src="/scripts/app-angular.js"></script>
|
||||
<script src="/scripts/services/bookmark-services.js"></script>
|
||||
<script src="/scripts/controllers/bookmarks-controller.js"></script>
|
||||
<script src="/scripts/controllers/menu-controller.js"></script>
|
||||
<script src="/scripts/externe/semantic.min.js"></script>
|
||||
<script src="/scripts/semantic-init.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="/scripts/externe/jquery-3.1.1.min.js"></script>
|
||||
<script src="/scripts/externe/angular.min.js"></script>
|
||||
<script src="/scripts/externe/angular-ui-router.min.js"></script>
|
||||
<script src="/scripts/app-angular.js"></script>
|
||||
<script src="/scripts/services/bookmark-services.js"></script>
|
||||
<script src="/scripts/directives/edit-directive.js"></script>
|
||||
<script src="/scripts/controllers/bookmarks-controller.js"></script>
|
||||
<script src="/scripts/controllers/menu-controller.js"></script>
|
||||
<script src="/scripts/controllers/edit-controller.js"></script>
|
||||
<script src="/scripts/externe/semantic.min.js"></script>
|
||||
<script src="/scripts/semantic-init.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ app.config(function ($stateProvider, $urlRouterProvider) {
|
|||
// controllerAs: 'bookmarksCtrl',
|
||||
controller: 'bookmarksCtr'
|
||||
})
|
||||
.state('addBookmark', {
|
||||
url:'/addBookmark',
|
||||
templateUrl: '/views/addBookmark.html',
|
||||
})
|
||||
.state('tags', {
|
||||
url:'/tags',
|
||||
templateUrl: '/views/tags.html',
|
||||
|
|
|
|||
|
|
@ -1,15 +1,23 @@
|
|||
app.controller('bookmarksCtr', ['$scope', '$filter', 'bookmarkService', function($scope, $filter, bookmarkService) {
|
||||
$scope.bookmarks = []; // 书签数据
|
||||
|
||||
// 获取书签数据
|
||||
var pageId = 1;
|
||||
bookmarkService.getBookmarks(pageId).then(
|
||||
function(data) {
|
||||
console.log(data);
|
||||
$scope.bookmarks = data;
|
||||
$('.ui.dropdown').dropdown({
|
||||
forceSelection:false
|
||||
});
|
||||
$('.ui.checkbox').checkbox();
|
||||
},
|
||||
function(errorMsg) {
|
||||
console.log(errorMsg);
|
||||
}
|
||||
);
|
||||
|
||||
$scope.addTag = function(){
|
||||
console.log('Hello , you click addtag btn...')
|
||||
}
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
app.controller('editCtr', ['$scope', '$state', function($scope, $state) {
|
||||
|
||||
$scope.addTag = function(){
|
||||
console.log('Hello , you have click add tag btn......')
|
||||
}
|
||||
|
||||
}]);
|
||||
|
|
@ -13,6 +13,7 @@ app.controller('menuCtr', ['$scope', '$state', function($scope, $state) {
|
|||
// 登陆之后显示的菜单数据。uiSerf：内部跳转链接。
|
||||
$scope.loginMenus = [
|
||||
{uiSref:'bookmarks', title:'我的书签'},
|
||||
// {uiSref:'addBookmark', title:'添加书签'},
|
||||
{uiSref:'tags', title:'书签分类'},
|
||||
{uiSref:'advice', title:'建议'},
|
||||
{uiSref:'settings', title:'设置'},
|
||||
|
|
@ -38,4 +39,8 @@ app.controller('menuCtr', ['$scope', '$state', function($scope, $state) {
|
|||
$scope.selectNotLoginIndex = index;
|
||||
}
|
||||
}
|
||||
|
||||
$scope.showAddBookmarkMoadl = function(){
|
||||
$('.ui.modal.js-add-bookmark').modal('show');
|
||||
}
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
app.directive('edit',function(){
|
||||
return {
|
||||
restrict:'EAC',
|
||||
templateUrl: '/views/edit.html',
|
||||
replace:true
|
||||
}
|
||||
});
|
||||
|
|
@ -3,7 +3,25 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
|
|||
|
||||
// service interface
|
||||
var service = {
|
||||
getBookmarks: getBookmarks,
|
||||
/**
|
||||
* @func
|
||||
* @desc 根据显示页数的索引，获取书签的数据
|
||||
* @param {number} pageNum - 页数
|
||||
*/
|
||||
getBookmarks: function getBookmarks(pageNum) {
|
||||
var def = $q.defer();
|
||||
|
||||
$http.get('/api/bookmarks/' + pageNum)
|
||||
.success(function(data) {
|
||||
def.resolve(data);
|
||||
})
|
||||
.error(function(data) {
|
||||
console.log('Error: ' + data);
|
||||
def.reject('Failed to get todos');
|
||||
});
|
||||
|
||||
return def.promise;
|
||||
},
|
||||
// addBookmark: addBookmark,
|
||||
// delBookmark: delBookmark,
|
||||
// editBookmark: editBookmark,
|
||||
|
|
@ -11,20 +29,7 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
|
|||
};
|
||||
|
||||
// Return a promise object.
|
||||
function getBookmarks(pageId) {
|
||||
var def = $q.defer();
|
||||
|
||||
$http.get('/api/bookmarks/'+pageId)
|
||||
.success(function(data) {
|
||||
def.resolve(data);
|
||||
})
|
||||
.error(function(data) {
|
||||
console.log('Error: ' + data);
|
||||
def.reject('Failed to get todos');
|
||||
});
|
||||
|
||||
return def.promise;
|
||||
}
|
||||
|
||||
|
||||
return service;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<div class="ui modal js-add-bookmark" ng-controller="editCtr">
|
||||
<i class="close icon"></i>
|
||||
<div class="header">
|
||||
添加书签
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="ui form">
|
||||
<div class="field">
|
||||
<label>书签链接</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>书签标题</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>书签分类</label>
|
||||
<div class="fields">
|
||||
<div class="eleven wide field">
|
||||
<select class="ui fluid search dropdown" multiple="">
|
||||
<option value="">选择已有分类</option>
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Blaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Frkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Solorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="five wide field">
|
||||
<div class="ui action input">
|
||||
<input type="text" placeholder="多个分类请用 , 隔开">
|
||||
<button class="ui button" ng-click="addTag()">添加新分类</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui segment">
|
||||
<div class="field">
|
||||
<div class="ui toggle checkbox checked">
|
||||
<input type="checkbox" name="gift" tabindex="0" class="hidden">
|
||||
<label>我要公开此收藏的链接供别人搜索</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui button">取消</div>
|
||||
<div class="ui green button">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue