قم بتغيير نص Text Jquery Mobile

Question

أنا أستخدم إصدار JQuery Mobile 1.0 Alpha 1 الجديد لإنشاء تطبيق للجوال وأحتاج إلى أن أكون قادرًا على تبديل نص الزر. يعمل تبديل النص بشكل جيد ، ولكن بمجرد إجراء استبدال النص ، يتم كسر تنسيق CSS.

لقطة شاشة للتنسيق: http://awesomescreenshot.com/03e2r50d2

    <div class="ui-bar">
        <a data-role="button" href="#" onclick="Podcast.play(); return false" id="play">Play</a>
        <a data-role="button" href="#" onclick="Podcast.download(); return false" id="download">Download</a>
        <a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">Mark Old</a>
    </div>

$("#consumed").text("Mark New");

Answer 1

عند إنشاء الزر ، يضيف بعض العناصر الإضافية ، بعضها داخلي <span> العناصر التي تبدو هكذا:

<a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Mark Old</span>
  </span>
</a>

لتغيير النص ، ستحتاج إلى هذا المحدد:

$("#consumed .ui-btn-text").text("Mark New");

Answer 2

<a data-role="button" href="#" id="consumed">Mark Old</a>

اتريد:

$('#consumed').text('Mark New');
$('#consumed').button('refresh');

والسبب هو تمكين التغييرات الخاصة بك من أن تكون متوافقة مع الإصدارات المستقبلية من jQuery Mobile.

Answer 3

قرأت من خلال هذا وخيارات مختلفة عبر الإنترنت وأعتقد أن لدي حل أبسط. من المؤكد أنه يعمل على الروابط التي تتحول إليها إلى زر مع سمة Data-Rile = "Button".

ما عليك سوى وضع نص الزر في فترة منفصلة ، ثم قم بتغيير محتويات المدى في JavaScript.

على سبيل المثال

<a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a>

ثم بسيط

$('#oldBtnText').html("Old");

سوف تفعل المهمة. كما يجب ألا تكون مشكلة إذا غيرت jQuery هيكلها.

Answer 4

كتبت مكونًا إضافيًا بسيطًا للقيام بذلك إما لزر قائم على الارتباط ، أو <input type="button"> زر. لذلك إذا كان لديك

<input type="button" id="start-button" val="Start"/>

أو

<a href="#" data-role="button" id="start-button">Start</a>

في كلتا الحالتين ، يمكنك تغيير النص المعروض به

$("#start-button").changeButtonText("Stop");

هذا هو البرنامج المساعد:

(function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

... لأن رش الكود الخاص بك مع تبعيات حول كيفية جعل هذه الأزرار الجوال JQuery لا فكرة جيدة. قاعدة البرمجة: إذا قمت باستخدام الاختراق ، فقم بعزله على جزء من التعليمات البرمجية الموثقة جيدًا.

Answer 5

هذا يعمل بالنسبة لي:

$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');

الحل من:http://forum.jquery.com/topic/changing-text-works-except-for-buttons

Answer 6

لعلامة مثل

<button id="consumed">Mark Old</button>

$("#consumed").html("Mark New");
$("span > span", $("#consumed").parent()).html("Mark New");

Answer 7

في إصدار JQuery Mobile الجديد ، توجد علامة امتداد داخلية داخل الزر.

لذلك لا يتعين عليك تغيير نص علامة "A" ولكن لتغيير نص المدى الداخلي.

على سبيل المثال

$ ("#المستهلك .ui-btn-text"). النص ("اختبار") ؛

Answer 8

اعتبارًا من JQM 1.3.1 (ربما في وقت سابق؟) يبدو أن Simple .Text () مدعوم.

Answer 9

للراغبين في حل سهل ، قمت بإنشاء مكون إضافي يسمى Audero Text Changer.

Answer 10

لسبب ما ، لا أحصل على "ui-btn-text" المصنفة في المرة الأولى التي أرغب فيها في تغيير نص الزر. لذلك أنا حلول مثل هذا:

var button = $("#consumed");
var innerTextSpan = button.find(".ui-btn-text");

// not initialized - just change label
if (innerTextSpan.size() == 0) {
    button.text(label);

// already initialized - find innerTextSpan and change its label    
} else {
    innerTextSpan.text(label);
}