Hi,
Das sehe ich anders. Nehmen wir als Beispiel einen virtuellen Posteingang, dort habe ich eine Liste von eingegangen Nachrichten, jetzt möchte ich gerne eine Button haben, der alle ungelesenen Nachrichten markiert.
Beispiel:
Ich habe mir mal erlaubt, das Beispiel mit meinem derzeitigen Lieblingsframework (Angular.Js) nachzubauen:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body ng-app="myApp">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
'use strict';
angular.module('myApp', [])
.controller('InboxCtrl', function ($scope) {
$scope.currentMail = null;
$scope.mails = [
{
title: "E-Mail 1",
body: "This is e-mail 1",
read: false
},
{
title: "E-Mail 2",
body: "This is e-mail 2",
read: false
},
{
title: "E-Mail 3",
body: "This is e-mail 3",
read: false
},
{
title: "E-Mail 4",
body: "This is e-mail 4",
read: false
},
{
title: "E-Mail 5",
body: "This is e-mail 5",
read: false
}
];
function markEmailAsRead(email) {
email.read = true;
}
function markEmailAsUnRead(email) {
email.read = false;
}
$scope.markAllAsRead = function() {
angular.forEach($scope.mails, markEmailAsRead);
};
$scope.showMail = function(mail) {
$scope.currentMail = mail;
markEmailAsRead(mail);
};
$scope.markAllAsUnRead = function() {
angular.forEach($scope.mails, markEmailAsUnRead);
}
});
</script>
<div ng-controller="InboxCtrl">
<ul>
<li ng-repeat="mail in mails" ng-click="showMail(mail)">
{{ mail.title }}
<span ng-hide="mail.read">(New)</span>
</li>
</ul>
<button type="button" ng-click="markAllAsRead()">
Alle als gelesen markieren
</button>
<button type="button" ng-click="markAllAsUnRead()">
Alle als ungelesen markieren
</button>
<section ng-show="currentMail">
<h2>{{ currentMail.title }}</h2>
<p>{{currentMail.body }}</p>
</section>
</div>
</body>
</html>
Wie du siehst, benutze ich hier überhaupt kein CSS mehr. Durch Direktiven (in diesem Falle ng-hide/ng-show) wird sofort ersichtlich, wann was ein- bzw. ausgeblendet wird.
Bis die Tage,
Matti