2011-09-30 2 views
0

jQuery Mobile автоматически округляет все углы входных элементов, добавляя класс ui-corner-all. Я заметил, что если я изменил этот класс вручную до ui-corner-left в инспекторе Chrome, то я правильно получаю только закругленные углы слева (сверху и снизу). Это может быть, конечно, легко сделать с помощью одной строки JQuery, такие какjQuery Mobile: явно переопределяет округление всех углов

$('#myid').removeClass('ui-corner-all').addClass('ui-corner-left'); 

Мой вопрос, есть ли способ я могу поручить JQuery Mobile, чтобы применить этот класс сразу, без того, чтобы выполнить этот дополнительный бит код после того, как JQM выполнил эту работу?

+2

Вы можете изменить исходный JQM код, чтобы заменить один класс с другим, или вы могли бы изменить JQM CSS, чтобы сделать UI-краеугольный все работать так, ты хочешь это. Но я думаю, что ваше текущее решение должно быть прекрасным. Почему беспокоиться об одной строке кода? Вы видели, сколько JQM уже делает, когда загружается страница? Этот маленький код не должен вызывать таких проблем. –

+0

Да, вы правы - JQM уже работает так много кода, что одна строка на самом деле не будет иметь никакого значения с точки зрения производительности. Моя настоящая мотивация заключается в том, чтобы держать элементы UI централизованными и «декларативными». Но с этим решением мой пользовательский интерфейс заканчивается разрывом не только между CSS и самой разметкой, но и между некоторыми нечетными битами JS-кода. –

ответ

0

В принципе можно применить, но ваша задача - бежать без дополнительного выполнения кода, позволяет видеть, что у нас есть шанс получить его, даже я смотрю тот же вопрос, но следующее - мое решение.

$('div').live('pageshow',function(event){ 
    $('#myid').removeClass('ui-corner-all').addClass('ui-corner-left'); 
}); 
+1

Все, что вы сделали, это скопировать и вставить тот же код, который я написал выше; обертывание его в обработчике 'pagehow' не имеет отношения к моему вопросу. –

0

Вы можете переопределить значение по умолчанию, указав в вашем файле index.html класс jquery mobile, который вы хотите. Хорошим примером может быть, вместо:

<ul id='myid' data-inset='true' data-theme='a' data-role='listview' class='ui-listview ui-listview-inset ui-shadow'> 

, который будет автоматически вставлять этот

class ui-corner-all 

вы бы затем добавить свой собственный класс:

<ul id='myid' data-inset='true' data-theme='a' data-role='listview' class='ui-listview ui-corner-left ui-listview-inset ui-shadow'> 

В Firefox, пользовательский интерфейс угла -все класс не добавляется автоматически для меня, возможно, вы используете более старую версию jQuery mobile и должны обновляться. Если вы хотите сделать это динамически в яваскрипта файле:

$("#my_page_id").live("pagecreate",function(){ 
    var ul = $("<ul id='myid' data-inset='true' data-theme='a' data-role='listview' class='ui-listview ui-listview-inset ui-corner-left ui-shadow'>"); 
    ul.append($('<li class="ui-li ui-li-static ui-body-a ui-corner-left">').append("Code Slayer!!!")); 
    $('mydiv_in_mypage').html(ul); 

});

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

$.mobile.showPageLoadingMsg('a','Page Loading', true); 

, а затем скрыть сообщение, когда будет полностью отображаться ваша страница.

0

эй Просто вы можете сделать, как этот

<a href="#panel" data-corners="false"></a> 
Смежные вопросы