كيفية إضافة زر الصفحة الرئيسية باستخدام jQuery-Mobile؟

StackOverflow https://stackoverflow.com/questions/4147376

سؤال

بشكل افتراضي ، يضيف jQuery-Mobile زرًا للخلف في كل صفحة بعد الصفحة الرئيسية. أتمنى أن أعرف كيف يمكنني إضافة زر الصفحة الرئيسية أيضًا؟
هنا مثال: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html

ملاحظة: هذا الرابط مفيد فقط لـ Firefox/Chrome

شكرًا.

هل كانت مفيدة؟

المحلول

دون تعديل رمز المصدر jquery-mobile.js ، فإن الطريقة الوحيدة التي يمكنني التفكير بها في القيام بذلك ، هي إضافة روابط التنقل الخاصة بك إلى الرأس. بمجرد إضافة الرابط الخاص بك ، سيختفي زر "Back" التلقائي ، لذلك سنقوم بإنشاء رابطين ، أحدهما للظهر ، وواحد للمنزل.

ستلاحظ الصفحة 2 و 3 على حد سواء أزرار الظهر وزر الصفحة الرئيسية ويمكنك إما العودة أو القفز مباشرة إلى المنزل. هذا يتطلب منك تعديل قسم "الرأس" لكل صفحة ، ولكن ليس كبيرًا في الصفقة لأنها دائمًا نفس (النسخ واللصق) لا يوجد أي تعديل لكل مثيل.

سيكون رابط "الصفحة الرئيسية" في الجزء العلوي الأيمن (وفقًا للسلوك الافتراضي للرابط الثاني لوضعه في أعلى يمين).

هذا هو المثال:

<!DOCTYPE html>
<html>
        <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>


<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.</p>
                <p>View internal page called <a href="#secondpage">second page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                <p><a href="#thirdpage">Go to third page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="thirdpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.  (this is thirdpage)</p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

</body>
</html>

إذا كنت ترغب في القيام بذلك تلقائيًا ، فيمكنك أيضًا اختراق JS ...

مباشرة بعد هذا القطعة من الكود (حول السطر 1084 من jQuery.mobile-1.0a2.js غير المصغرة

$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
                                                .click(function() {
                                                        history.back();
                                                        return false;
                                                })
                                                .prependTo( $this );

إضافة سطر مثل هذا ، حيث #FirstPage هو معرف صفحتك الرئيسية ، لم أتمكن فقط # لن يعمل ... لكن هذه الطريقة تعمل

$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );

نصائح أخرى

هناك حل أبسط: فقط أضف رابطًا إلى رأسك Div class="ui-btn-right". هذا أمر ضروري بحيث يمكن إضافة زر استرداد جوال jQuery تلقائيًا إلى اليسار. هناك أيضًا عدد قليل من سمات البيانات الأخرى التي يمكنك استخدامها حتى تتمكن من استخدام أيقونة السمة المدمجة وما إلى ذلك ، كما هو موضح:

<div data-role="page">
    <div data-role="header">
        <h1>Title</h1>
        <a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext" 
           data-direction="reverse">Home</a> 
    </div>
    <div data-role="content">
        ...

(من الواضح تغيير عنوان URL HERF إلى شيء معقول لبيئتك ، لا تستخدم فقط "/" لأنه يحد من مكان نشر تطبيقك.)

عند استخدام JQM لأول مرة لتطوير تطبيق ما ، أردت أزرار المنزل والظهر على رأس العليا لأن شجرة التنقل عميقة. يعمل استخدام فئات الزر الأساسية مثل "UI-BTN-Right" أو "UI-BTN-LEFT" بشكل رائع-إذا كنت تريد فقط زرًا واحدًا على كل جانب.

ولكن إذا كنت مثلي وتريد زريين على اليسار ، فيمكنك استخدام القليل من CSS المخصصة وتحديد المواقع للحصول عليها حيث تريد. قمت أيضًا بلف الأزرار في فئة رأس مخصصة ، وكذلك استخدام CSS للتحكم في العنوان في الرأس. ستحتاج إلى المكان في كل زر على مؤشر z مختلف ، وإلا فإن كل زر سوف يتعارض مع الآخر.

هذا هو الرأس:

    <div id="home-btn" class="header-btn-left-pos1">
        <a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
    </div><!-- /home-btn -->

    <div id="back-btn" class="header-btn-left-pos2">
        <a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
    </div><!-- /back-btn -->

    <div class="header-title" align="center">
        <h4>Business Locations</h4>
    </div><!-- /header-title -->

</div><!-- /custom header -->

هذا هو CSS:

.custom-header
{
    height:18px;
}
.header-title
{
    position:relative;
    top:-10px;
}
.header-btn-left-pos1
{
    position:absolute;
    left:25px;
    top:5px;
    z-index:1;
}
.header-btn-left-pos2
{
    position:absolute;
    left:105px;
    top:5px;
    z-index:2;
}

آمل أن يمنحك هذا المزيد من الخيارات.

<div data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
        </div>
    </div>

يمكنك استخدام rel=external فيك href بطاقة شعار. هذا سوف يفتح الصفحة الرئيسية بدون زر ظهر.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top