jQuery Mobile center popup on show

Для того чтобы разместить POPUP при появлении точно по центру экрана можно обрабатывать событие POPUPAFTEROPEN. В нем считать отступы сверху и слева и задавать их для POPUP.

$('#popupMenu').on('popupafteropen', function () {
    var centerX = ($(document).width() - $('.ui-popup-container').width())/2;
    var centerY = ($(document).height() - $('.ui-popup-container').height())/2;
      $('.ui-popup-container').css({
        top: centerY,
        left: centerX
    });
});

jQuery handle div show/hide

Как обработать перехват появления или скрытия элемента. Для того чтобы показать/скрыть элемент используются методы show/hide. В этот метод можно передать два параметра - второй из них это обработчик (callback/handler) вызова метода. В нем мы можем сделать все необходимое нам при появлении или скрытии элемента. 

JavaScript Version

$('#show').click(function() {
    $('#myDiv').show(0, onDivShow);
});
 
$('#hide').click(function() {
    $('#myDiv').hide(0, onDivHide);
});
 
 
function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }

CoffeeScript Version

$('#cancelBtn').on 'click', () =>
    $('#dialogPage1').show(0, () =>
     @onDivShow()
     return
    )
 
onDivShow: () =>
    centerX = ($(document).width() - $('.ui-popup-container').width())/2
    centerY = ($(document).height() - $('.ui-popup-container').height())/2
    $('.ui-popup-container').css
        top: centerY
        left: centerX
    return

AngularJS Filter. Фильтрация в AngularJS.

Angular JS предоставляет удобные возможности для фильтрации объектов в зависимости от значения либо самих объектов, либо их полей. В данном примере, мы будем фильтровать объекты по значению поля status. У нас будет checkbox, который будет определять, объекты с каикм значением поля status мы будем показывать. Если галочка стоит то значения -
["STARTED", "NOT_STARTED", "FINISHED"]
если галочка не стоит, то значения
["STARTED", "NOT_STARTED"]

HTML Code

Checkbox показывать объекты со статусом FINISHED.

<div class="col-lg-3 pull-right text-right">
    <input  type="checkbox" id="showFinishedCheckbox"
      ng-model="showFinished" ng-change="showFinishedClicked()">
    <label for="showFinishedCheckbox">Show Finished Clients</label>
</div>

Таблица объектов, в которой используется фильтр.

 <table class="table table-hover">
    <thead>
        <th ng-repeat="item in head" ng-click="changeSorting(item.field)" 
          class="sortable">{{item.title}}
        <span ng-show="displaySorting(item.field, false)">▼</span>
        <span ng-show="displaySorting(item.field, true)">▲</span>
      </th>
    </thead>
    <tbody>
        <tr ng-class="{active : selectedCampaign.id == c.id}"
          ng-repeat="c in campaigns | orderBy:sort.column:sort.descending | 
          filter:query | filter:statusFilter" ng-click="selectCampaign(c)">
     <td><a ng-click="editCampaign(c); $event.stopPropagation()" 
              style="cursor:pointer;">{{c.title}}</a>
     </td>
     <td>{{c.campaignCode}}</td>
     <td>{{c.startDate | date:'mediumDate'}}</td>
     <td>{{c.endDate | date:'mediumDate'}}</td>
     <td>{{getStatus(c.status).name}}</td>
 </tr>
    </tbody>
</table>

Использование фильтра.

 <tr ng-class="{active : selectedCampaign.id == c.id}"
          ng-repeat="c in campaigns | orderBy:sort.column:sort.descending | 
          filter:query | filter:statusFilter" ng-click="selectCampaign(c)">

CoffeScript Code

Изначально показываем объекты у которых поле status имеет значение либо STARTED либо NOT_STARTED

$scope.filteredStatuses = ["STARTED", "NOT_STARTED"]

Изначально не стоит галочка показывать объекты, у которых поле status имеет значение FINISHED

$scope.showFinished = false

Обработчки нажатия на checkbox. Если ставим галочку, то добавляем в массив допустимых статусов статус FINISHED, если убираем галочку, то массив без статуса FINISHED

$scope.showFinishedClicked = () ->
    if $scope.showFinished
      $scope.filteredStatuses = ["STARTED", "NOT_STARTED", "FINISHED"]
    else
      $scope.filteredStatuses = ["STARTED", "NOT_STARTED"]
    return

Непосредственно сам фильтер. Проверяем, если поле status объекта не входит в массив допустимых значений, то не возвращаем ничего. Если же входит то, возвращаем объект.

$scope.statusFilter = (campaign) ->
    if $scope.filteredStatuses.length > 0
        if $.inArray(campaign.status, $scope.filteredStatuses) < 0
            return
    return campaign

Источники

https://docs.angularjs.org/api/ng/filter/filter

https://docs.angularjs.org/guide/filter

http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs

https://docs.angularjs.org/guide/filter#creating-custom-filters

http://jsfiddle.net/Xesued/Bw77D/7/

http://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments

http://jsfiddle.net/65Pyj/