Поиск по этому блогу

Показаны сообщения с ярлыком HTML. Показать все сообщения
Показаны сообщения с ярлыком HTML. Показать все сообщения

вторник, 25 августа 2015 г.

CSS. Стиль для Placeholder

При помощи CSS возможно стилизовать атрибут placeholder так как нам нужно. Делается это следующим образом.
::-webkit-input-placeholder {
   color: red;
}
 
:-moz-placeholder { /* Firefox 18- */
   color: red;  
}
 
::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}
 
:-ms-input-placeholder {  
   color: red;  
}


Допустим у нас имеется текстовое поле ввода.

<input type="text" placeholder="Оставьте сообщение здесь">


Создадим для него класс который будет стилизовать placeholder.
title-not-input {
   input[type="text"]::-webkit-input-placeholder {
       color: #D5193B;   }
   input[type="text"]:-moz-placeholder { color: #D5193B; }
   input[type="text"]::-moz-placeholder { color: #D5193B; }
   input[type="text"]:-ms-input-placeholder { color: #D5193B; }
   input[type="text"] { 
      font-family: "Gotham Light";      
      font-size: 26pt;      
      letter-spacing: 1.3pt;   }
}

Изменять можно следующие свойства placeholder
  • font (и сопутствующие свойства)
  • background (и сопутствующие свойства)
  • color
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • text-overflow
  • opacity

Источники

  1. https://css-tricks.com/snippets/css/style-placeholder-text/
  2. http://html5.by/blog/placeholder/
  3. http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
  4. http://htmlbook.ru/css/-webkit-input-placeholder












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
    });
});

CSS Show div on center

Выровнять DIV по середине экрана возможно различными методами как при помощи CSS так и при помощи jQuery.

При помощи jQuery 

   jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (jQuery(window).height()-this.height())/2+jQuery(window).scrollTop()+"px");
    this.css("left", (jQuery(window).width()-this.width())/2+jQuery(window).scrollLeft()+"px");
    return this;

При помощи CSS

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48%;
  height: 59%;
}

Чтобы работало на iOS

Для того чтобы работало в iOS устройствах необходимо добавить следующие строчки.
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

Конечный вариант CSS
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 48%;
  height: 59%;
}

Источники

1. http://stackoverflow.com/questions/27303339/transform-not-working-on-ios

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

jQuery programming scroll in GWT

Программно прокрутить скрол до нужного элемента можно при помощи jQuery следующим образом. Нужно использовать метод animate() и метод scrollTop() в нем. Параметр 2000 задержка - это анимация. Если он равен 0, то прокрутка происходит мгновенно.

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Как это реализовать в GWT.

private native void jQueryScrollCalendar(elementId) /*-{
  $wnd.jQuery("#scrollContainer").animate({
   scrollTop: $wnd.jQuery("#" + elementId).offset().top}, 0);
 }-*/;
 


Источники 

1. http://stackoverflow.com/questions/6677035/jquery-scroll-to-element

jQuery get scroll position - scrollTop()


Для того,  чтобы узнать величину отступа прокрутки от верхней границы необходимо использовать метод scrollTop(). Этим же методом можно и задать значение отступа прокрутки, передав туда параметр - scrollTop(value).
В GWT для использования jQuery нужно писать $wnd.jQuery вместо $.

@Overridepublic void setCurrentScrollPosition() {
    currentScrollPosition = getCurrentScrollPosition();
}
 
private native int getCurrentScrollPosition() /*-{   
    return $wnd.jQuery("#scrollContainer").scrollTop(); }-*/;
 
@Overridepublic void scrollCalendar() {
    if (currentScrollPosition > 0) {
        jQueryScrollCalendar(currentScrollPosition);   
    }
}
 
private native void jQueryScrollCalendar(int position) /*-{   
    $wnd.jQuery("#scrollContainer").animate({scrollTop: position}, 0);}-*/;

Источники

понедельник, 29 июня 2015 г.

Phonegap prompt. How to set input type.

В HTML для обычного поля ввода задать, данные какого типа туда можно вводить, очень просто - достаточно задать атрибут "type".

Для ввода чисел
<input type="number" name="numberTextfield"/>

Для ввода телефона
<input type="tel" name="phoneTextfield"/>

Это же прекрасно работает и в Phonegap. Появляются соответствующие клавиатуры для ввода.

А вот как задать тип клавиатуры для поля ввода, которое будет в диалоге Prompt?

Вот документация по соответствующему плагину.
http://docs.phonegap.com/en/edge/cordova_notification_notification.md.html

navigator.notification.prompt(message, promptCallback, [title], [buttonLabels], [defaultText])
Эта функция позволяет нам показывать более кастомный dislog box. Можно задать многое - callback, заголовок, текст по умолчанию и даже текст на кнопках. Но нельзя задать тип клавиатуры.

Пример использования
// Show a custom prompt dialog
function showPrompt() {
    navigator.notification.prompt(
        'Please enter your name',  // message
        onPrompt,                  // callback to invoke
        'Registration',            // title
        ['Ok','Exit']              // buttonLabels
    );
}

Еще пример со встроенным callback
window.navigator.notification.prompt(
    new String(), // message
    function(answer) {
        if (answer.buttonIndex === 1) {
            // Ok
            var newcat = answer.input1;
            transaction.executeSql("INSERT INTO cat (Name) VALUES (?)", [newcat]);
        }
        else {
            // Exit
        }
    }, // callback
    "ADD CATEGORY", //title
    ["Ok", "Exit"], // button titles
    new String() // defaultText
);

Для того чтобы его настроить нам придется лезть в исходный код плагина и дополнять его.
plugins/CDVNotification.m

Нас интересует метод
- (void)prompt:(CDVInvokedUrlCommand*)command
{
    NSString* callbackId = command.callbackId;
    NSString* message = [command argumentAtIndex:0];
    NSString* title = [command argumentAtIndex:1];
    NSArray* buttons = [command argumentAtIndex:2];
    NSString* defaultText = [command argumentAtIndex:3];
 
    [self showDialogWithMessage:message title:title 
    buttons:buttons defaultText:defaultText 
    callbackId:callbackId dialogType:DIALOG_TYPE_PROMPT];
}

В нем вызывается другой метод
    title:(NSString*)title buttons:(NSArray*)buttons 
    defaultText:(NSString*)defaultText 
    callbackId:(NSString*)callbackId dialogType:(NSString*)dialogType {
 
CDVAlertView* alertView = [[CDVAlertView alloc]
    initWithTitle:title
              message:message
             delegate:self
    cancelButtonTitle:nil
    otherButtonTitles:nil];
 
alertView.callback
 
Id = callbackId;
 
    int count = [buttons count];
 
    for (int n = 0; n < count; n++) {
        [alertView addButtonWithTitle:[buttons objectAtIndex:n]];
    }
 
    if ([dialogType isEqualToString:DIALOG_TYPE_PROMPT]) {
        UITextField* textField = [alertView textFieldAtIndex:0];
        textField.text = defaultText;
    }
 
    [alertView show];
}

Нам нужно задать полю ввода тип клавиатуры.
[textField setKeyboardType:UIKeyboardTypeNamePhonePad];

Все возможные типы клавиатур
typedef enum {
    UIKeyboardTypeDefault,                // Default type for the current input method.
    UIKeyboardTypeASCIICapable,           // Displays a keyboard which can enter ASCII characters, non-ASCII keyboards remain active
    UIKeyboardTypeNumbersAndPunctuation,  // Numbers and assorted punctuation.
    UIKeyboardTypeURL,                    // A type optimized for URL entry (shows . / .com prominently).
    UIKeyboardTypeNumberPad,              // A number pad (0-9). Suitable for PIN entry.
    UIKeyboardTypePhonePad,               // A phone pad (1-9, *, 0, #, with letters under the numbers).
    UIKeyboardTypeNamePhonePad,           // A type optimized for entering a person's name or phone number.
    UIKeyboardTypeEmailAddress,           // A type optimized for multiple email address entry (shows space @ . prominently).
    UIKeyboardTypeDecimalPad,             // A number pad including a decimal point
    UIKeyboardTypeTwitter,                // Optimized for entering Twitter messages (shows # and @)
    UIKeyboardTypeWebSearch,              // Optimized for URL and search term entry (shows space and .)
 
    UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable, // Deprecated
 
} UIKeyboardType;


среда, 22 апреля 2015 г.

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/

понедельник, 20 апреля 2015 г.

JQuery. Получить элемент li листа ul


<div id="test">
<ul>
<li>Im index 0</li>
<li>Im index 1</li>
<li>Im index 2</li>
<li>Im index 3</li>
</ul>
</div>

Получить доступ к третьему элементу (индексация начинается с 0)
$('#test ul > li').eq(2).hide();

Можно еще так
$('#test ul > li:eq(2)').hide();

Можно получить доступ к li элементу с помощью nth-child. В таком случае нумерация начинается с 1.
$('#test ul > li:nth-child(3)').hide();

Источники
http://stackoverflow.com/questions/4591754/jquery-test-ul-li-index2-hide-possible

http://stackoverflow.com/questions/3323186/get-id-of-first-li-of-ul-with-jquery


воскресенье, 18 января 2015 г.

CSS. 2 column div layout: right column with fixed width, left fluid

Необходимо создать layout из двух div элементов, стоящих друг за другом  - как два столбца одной таблицы. Причем необходимо чтобы один столбец был фиксированной ширины, а другой изменялся в зависимости от размеров окна и занимал все оставшееся место.


Создадим разметку в HTML

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

У нас есть родительский элемент - div с классом container и два дочерних div элемента с классами right и left.

Это просто два div элемента, где второй лежит под первым, теперь чтобы добиться заданных условий необходимо описать классы CSS для div-элементов.

Сделаем правый div с фиксированной шириной, а левый с изменяемой.
Также важно заметить что хоть правый div в конечном итоге будет располагаться вторым, в исходном HTML коде он должен находиться первым.

Для того чтобы выровнять div элемент по правому краю и зафиксировать его ширину сделаем следующее - зададим ему ширину свойством width и выровняем по правому краю свойством float. 

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

Для наглядности зададим цвет фона для этого div элемента.

Теперь сделаем левый div изменяемым и независимым от правого. Для того, чтобы при изменении размеров экрана этот div не обтекал соседний а оставался в своих границах добавим свойства width: auto и overflow: hidden.  

.left {
    background: #e8f6fe;
    width: auto;
    overflow: hidden;
}​​

Также добавим свойства overflow: hidden и height (может быть auto) к div элементу, который является контейнером.

.container {
   height: auto;
   overflow: hidden;
}


Заключение


Если правый div имеет свойства float и width, и если левый div не имеет width и float, то левый будет гибким


пятница, 10 октября 2014 г.

CSS hand cursor on hover

Для того чтобы при наведении на элемент курсор мышки превращался в указатель необходимо добавить для этого элемента следующий стиль.

li { cursor: pointer; }

Чтобы это гарантированно работало во всех браузерах можно написать так.

li { cursor: pointer; cursor: hand; }

CSS text-decoration Property

Свойство стиля text-decoration позволяет добавить к тексту выделения. Следующее выделение используется наиболее часто.

  1. text-decoration: overline; Линия над  текстом
  2. text-decoration: line-through; Текст перечеркивается
  3. text-decoration: underline; Текст подчеркивается

HTML + CSS

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-decoration: overline;
}
 
h2 {
    text-decoration: line-through;
}
 
h3 {
    text-decoration: underline;
}
</style>
</head>
<body>
 
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
 
</body>
</html>

Результат



пятница, 11 июля 2014 г.

CSS. How to center div inside div

Для div элемента, который будет выравниваться по центру другого div элемента, необходимо прописать следующий стиль

margin: 0 auto;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <div style="width: 100%;">
     <div style="margin: 0 auto;">
      Test
     </div>
    </div>
</body>
</html>

понедельник, 30 июня 2014 г.

jQuery. How to lock screen while loading

Для того, чтобы в jQuery заблокировать экран, например, пока выполняется какая-то логика или загружаются данные с сервера, можно использовать специальный плагин

jQuery Block UI

Заблокировать страницу
$.blockUI();

Разблокировать страницу
$.unblockUI();

Помимо это есть варианты блокировки с опциями (затенение экрана и добавление текста)

Если этот плагин используется в связке с библиотекой require.js, тогда его подключать нужно так

requirejs.config({
    "baseUrl": "js/lib",
    paths: {
        'jquery': ['jquery-1.9.1.min'],
        'jquery-mobile': ['jquery.mobile-1.3.2.min'],
        'iscroll': ['iscroll'],
        'iscroll-lite': ['iscroll-lite'],
        'jquery-form': ["jquery.form"],
        'jquery-validity': ["jquery.validity.min"],
        'jquery-blockui':["jquery.blockUI"],
 
 ...
 
        'facebook-helper': ['../helper/facebook-helper'],
        "components": ["../components"]
    },
    shim: {
        'jquery-mobile': ['jquery'],
        'jquery-form': ["jquery"],
        'jquery-validity': ["jquery"],
        'jquery-blockui':["jquery"]
    }
 
});

Теперь пример, тут вызывается серверный POST-метод и пока мы ждем ответа от сервера, мы блокируем экран, а когда получаем ответ разблокируем его.
define(["jquery", "jquery-blockui"], function ($, settings) {
    var apiClient = {
 
        callPost: function (methodName, requestData, callback) {
            require(['utils'], function (utils) {
                console.info("Call server method: name='" + 
                methodName + "' requestData='" + 
                requestData + "' apiUrl='" + settings.apiUrl + "'");
                $.blockUI({ css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                } });
                $.ajax({url: settings.apiUrl + methodName, type: "post", 
                  data: requestData, success: function (data) {
 
                        if (data.serviceData && data.serviceData.error) {
                            $(document).ajaxStop($.unblockUI);
                            console.warn(data.serviceData.message);
                            utils.popup(data.serviceData.message)
                            // some logic invoke
                        } else {
                            callback(data);
                            utils.hideLoading();
                            $(document).ajaxStop($.unblockUI);
                        }
                    }, error: function (jqXHR, textStatus, errorThrown) {
                        $(document).ajaxStop($.unblockUI);
                        utils.popup("Oops...an error occurred. 
                          Please try again in a few seconds.");
                        console.info("Error:" + textStatus);
                        console.info("Error:" + errorThrown);
                    },
                        contentType: "application/json"
                    }
                )
            });
        }
 
...
 
});

Блокируем экран с затемнением
$.blockUI({ 
  css: {
    border: 'none',
    padding: '15px',
    backgroundColor: '#000',
    '-webkit-border-radius': '10px',
    '-moz-border-radius': '10px',
    opacity: .5,
    color: '#fff'
  } 
});

Разблокируем экран
$(document).ajaxStop($.unblockUI);

jQuery. How to handle page refresh

Для того, чтобы в jQuery обработать событие обновления страницы необходимо сделать следующее.

$(window).bind('beforeunload',function(){
 
  //Your logic here
 
  return 'Are you sure you want to leave?';
 
});

Работающий пример

четверг, 6 февраля 2014 г.

Ускоряем Phonegap

Разрабатываю приложение на стеке технологий PhoneGap и jQueryMobile. Приложение, которое получилось в итоге оказалось не таким быстрым как нативные приложения. Начал искать способы повышения производительности работы приложения. Нашел много интересной информации для себя. Что можно сделать для того, чтобы приложение, написанное при помощи phonegap и jQueryMobile стало работать быстрее.



Что делать для повышения скорости работы приложения


1. Библиотека fastclick. Ускоряем нажатие кнопок

fastclick - библиотека, которая ускоряет нажатие на кнопки в мобильном браузере. Эта библиотека устраняет задержку в 300 мс между физическим нажатием на экран телефона и вызовом события click в мобильных браузерах. Причина такой задержки в мобильных браузерах следующая.

Мобильные браузеры будут ждать около 300 мс с момента, когда вы нажмете кнопку, чтобы инициировать событие click. Причина этого в том, что браузер ждет, чтобы определить, на самом ли деле вы выполняете двойное нажатие.   

2. Отключаем часть CSS

Причиной медленной работы приложения также могут быть тени и круглые углы элементов. Которые мы и отключим.
* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}
Поместите этот код в конец CSS файла.

3. Отключаем градиент

За место CSS градиента лучше использовать заранее сделанные картинки с градиентным фоном

4. Отключаем эффекты jQueryMobile

В методе mobileinit прописать следующий код
$(document).on("mobileinit", function () {
 
  ...
 
  $.mobile.autoInitializePage = false;
  $.mobile.defaultPageTransition = 'none';
  $.mobile.touchOverflowEnabled = false;
  $.mobile.defaultDialogTransition = 'none'; 
 
  ...
 
});

5. Не используйте много изображений в разных файлах

Не используйте много изображений/значков на одной странице. Скомпонуйте все изображения в одно изображение и используйте CSS спрайт. Как сделать спрайт я написал тут.

Источники

http://stackoverflow.com/questions/19849637/how-to-use-fastclick-js-with-phonegap-and-jqm
http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
http://publish.illinois.edu/weiyang-david/2013/06/05/phonegap-app-problemssuggestions/
https://github.com/ftlabs/fastclick
http://www.codefessions.com/2012/09/creating-native-user-experience-with.html
http://www.codefessions.com/2012/10/improving-performance-of-html5-based.html
http://codedrop.com.au/blog/phonegap-performance-tips
http://therockncoder.blogspot.ru/2012/06/three-quick-performance-tips-for.html
http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/
http://www.adobe.com/devnet/phonegap/articles/apple-application-rejections-and-phonegap-advice.html
http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/
http://www.tricedesigns.com/
http://stackoverflow.com/questions/12081226/phonegap-jquery-mobile-improvements/12081339#12081339
http://stackoverflow.com/questions/12081226/phonegap-jquery-mobile-improvements/12081339#12081339
http://stackoverflow.com/questions/8208679/android-performance-jquery-phonegap-issue
http://stackoverflow.com/questions/13904315/android-webview-late-rendering/14010732#14010732
https://groups.google.com/forum/#!topic/phonegap/bv3lLlsgr74
http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/