ট্যাবগুলির মধ্যে নেভিগেট করতে ব্রাউজার পিছনে / পরের বোতাম


14

আমি ব্যবহারকারীদের কাছ থেকে প্রচুর অভিযোগ পেয়েছি যে তারা যখন আমার jQuery- ভিত্তিক ট্যাবগুলি ব্যবহার করছে তখন তারা বিরক্তিকর বলে মনে হয় যে তারা যখন তাদের ব্রাউজারে ফিরে আসে তখন তারা পূর্ববর্তী ট্যাবে না গিয়ে পূর্ববর্তী পৃষ্ঠায় যায় না । আমি নিম্নলিখিত পূর্ববর্তী / পরবর্তী বোতামগুলি যোগ করেছি তবে যথেষ্ট নয়। আমি কীভাবে আমার বোতামগুলি পুনরায় কনফিগার করতে পারি যাতে ব্যবহারকারীরা ব্রাউজারের পিছনে তীরটি ক্লিক করার সময় পূর্ববর্তী পৃষ্ঠার চেয়ে আগের ট্যাবে যেতে পারে। আপনি এটি এখানে পরীক্ষা করতে পারেন ।

$('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>');
$('.tablink-prev').click(function () {
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    if (index == 0) {
        index = 1;
    }
    $('.quicktabs-tabs li').eq(index - 1).addClass('active');
    $('.quicktabs-tabs li').eq(index - 1).find('a').click();
    return false;
});
$('.tablink-next').click(function () {
    var length = $('.quicktabs-tabs').first().children().size();;
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    //                if (parseInt(index) == parseInt(length) - 1 ) {
    //                    index = index - 1;
    //                }
    if (parseInt(index) == parseInt(length) - 1) {
        window.location.href = '/home'; //redirect to home
        //index = index - 1;
    }
    $('.quicktabs-tabs li').eq(index + 1).addClass('active');
    $('.quicktabs-tabs li').eq(index + 1).find('a').click();
    return false;
});

যোগ # tab1 এবং # tab2 URL টি পিছনে যখন প্রাসঙ্গিক
জেরার্ড

হাই @ জেরার্ড, অনুসরণ না করে আপনি একটি উদাহরণ দেখাতে পারেন।
Efe

আপনার সচেতন হওয়া উচিত যে কোনও ব্রাউজারকে পিছনে বা ফিরতে নেভিগেট করতে বাধা দেওয়া ভবিষ্যতে অবহেলিত হতে পারে যে কারণে যদি দূষিত স্ক্রিপ্টগুলি থাকে তবে তারা আপনার ব্রাউজারের নিয়ন্ত্রণ নিতে এবং গ্রহণ করতে পারে, এটিই বৃহত ব্রাউজার বিকাশকারীরা বাধা দেওয়ার চেষ্টা করছেন সর্ব মূল্যে.
BRO_THOM

JqueryUI ট্যাব প্লাগইনটি দেখুন: jqueryui.com/tabs । এছাড়াও তাদের ডকুমেন্টেশন কীবোর্ড নেভিগেশন সম্পর্কেও বিশদ দেয়। api.jqueryui.com/tabs । একবার দেখুন।
প্রসাদ ওয়ারগাদ

আপনি কি এটি সমাধান করেছেন?
আবির হুসেন

উত্তর:


13

আপনি ইতিহাস ব্যবহার করতে পারেন।

একটি নতুন ট্যাব খুললে ইতিহাসের অবস্থানটি পুশ করুন

history.pushState({page: 1}, "title 1", "?page=1")

তথ্যসূত্র: https://developer.mozilla.org/en-US/docs/Web/API/History_API


আমি আপনার কোডটি পরীক্ষা করেছি না তবে আমি মনে করি এটি সঠিকভাবে নেভিগেট করবে এবং এটি সক্রিয় ট্যাব (নির্বাচিত ট্যাব) বজায় রাখতে সক্ষম হবে না?
আবির হুসেন

7

আপনার সম্পূর্ণ কোড ব্যতীত আমি আপনাকে একটি বেসপোক উদাহরণ দিতে পারি না তবে আপনি কেবল ডিভযুক্ত প্রতিটি ট্যাবে অ্যাঙ্কর ট্যাগ যুক্ত করতে পারেন।

এটি প্রতিবার ব্যবহারকারী কোনও ট্যাব লিঙ্ক ক্লিক করলে ইউআরএল আপডেট করবে। এই ইউআরএল পরিবর্তনগুলি ব্রাউজারের ইতিহাসে সংরক্ষণ করা হবে এবং পিছনের দিকে নেভিগেট করার সময় পুনরায় স্মরণ করা হবে।

<div id="Tab1">
  <h2><a href="#Tab1">Tab 1</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab2">
  <h2><a href="#Tab2">Tab 2</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab3">
  <h2><a href="#Tab3">Tab 3</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab4">
  <h2><a href="#Tab4">Tab 4</a></h2>
  <p>This tab content</p>
</div>

আপডেট হওয়া ইউআরএল প্রতিটি বার আপনি যখন কোনও ট্যাবে ক্লিক করবেন তখন এ জাতীয় দেখাচ্ছে:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4


2

একদিকে আপনার পরবর্তী ট্যাব ফাংশনটি জাভাস্ক্রিপ্টে লিখিত আছে এবং অন্যদিকে ব্রাউজারের পিছনের বোতামটি ব্রাউজারের ইতিহাস ব্যবহার করে যাতে এটি আপনার ফাংশনগুলির সাথে অপ্রাসঙ্গিক এবং আপনাকে পূর্ববর্তী ট্যাবটিতে পাওয়া যায় না।

সুতরাং এটি ঘটানোর জন্য আপনার কাছে দুটি উপায় রয়েছে:

1 ম: ব্রাউজারকে রিফ্রেশ করে পৃথক পৃষ্ঠায় প্রতিটি পদক্ষেপ লোড করার চেষ্টা করুন, যাতে পৃষ্ঠাটি ব্রাউজারের ইতিহাসে সংরক্ষণ করে এবং পিছনের বোতামটি টিপে আপনি আগের ধাপটি দেখতে পারেন

২ য়: আপনার পরবর্তী পদক্ষেপের বোতামের মতো আগের পদক্ষেপটি দেখতে আপনার "পূর্ববর্তী" বোতামটি থাকা উচিত


2
প্রকৃতপক্ষে একটি উপায় রয়েছে এবং এটি হ'ল ব্রাউজারগুলিতে কেন হিস্টি এপিআই, এটি বিকাশকারীদের আপনার অ্যাপ্লিকেশনটিতে ব্রাউজিংয়ের ইতিহাস আপডেট করার মঞ্জুরি দেয় এবং এটি সাধারণত এসপিএ বিকাশকারী.মুজিলা.আর
ইউএস /

2

আমি নীচে ব্রাউজার ট্যাব নেভিগেশন সহ বুটসরপ ট্যাব ব্যবহার করেছি এর সম্পূর্ণ উদাহরণ

<div class="tabs-Nav border-top-0">
    <ul class="nav" role="tablist">
        <li>
            <a
            id="friends"
            data-pagination-id="friends"
            class="active"
            data-toggle="tab"
            href="#friendsTab"
            role="tab"
            aria-controls="friends"
            aria-selected="true">
                Friends
            </a>
        </li>
        <li>
            <a id="followers" data-pagination-id="followers" class="" data-toggle="tab" href="#followersTab" role="tab" aria-controls="followers" aria-selected="false">
                Followers
            </a>
        </li>
        <li>
            <a id="followings" data-pagination-id="followings" class="" data-toggle="tab" href="#followingTab" role="tab" aria-controls="followings" aria-selected="false">
                Following
            </a>
        </li>
        <li>
            <a id="invites" data-pagination-id="invites" class="" data-toggle="tab" href="#invitesTab" role="tab" aria-controls="invites" aria-selected="false">
                Invites
            </a>
        </li>
    </ul>
</div>


/**
* add // id="friends" data-pagination-id="friends"
* in your html tabs the demo html is also added.
**/
$(document).ready(function () {
    const param = 'tabID';
    $("[data-pagination-id]").click(function () {

        const pageParam = $(this).attr('data-pagination-param') || param;

        //add tabId to the params
        addParam(pageParam, $(this).attr('data-pagination-id'), true);
    });

    const preTab = getParamVal(param);

    if (param) {
        $('[data-pagination-id="'+ preTab +'"]').click();
    }
});


 /**
 * add params to the url if preParams is false then all previous
 * params will be removed.
 **/
addParam = (pageParam, paramValue, preParams) => {
    //get current url without params
    var mainUrl = window.location.href.split('?')[0];

    //get params without url
    var paramString = location.search.substring(1);

    if (preParams && paramString) { //when params found

        //change param string to json object
        var paramsObj = JSON.parse('{"' + decodeURI(paramString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
    } else {
        //when current params are empty then create an empty object.
        var paramsObj = {};
    }

    //only for ads tabs
    if (pageParam) {
        //add tabId to the params
        paramsObj[pageParam] = paramValue;

        //push params without refreshing the page.
        history.pushState(false, false, mainUrl + '?' + $.param(paramsObj).replace(new RegExp('%2B', 'gi'), '+'));
    }
};

 /**
 * Get value of a params from url if not exists then return null
 **/
getParamVal = (pageParam) => {
    const mainUrl = window.location.href.split('?')[0];
    const paramString = location.search.substring(1);
    const paramsObj = JSON.parse('{"' + decodeURI(paramString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');

    return paramsObj[pageParam];
};

আপনি আমার কোডের লাইভ কাজের উদাহরণ পরীক্ষা করতে পারেন

1> https://www.notesgen.com এ যান (ডেস্কটপ ব্যবহার করুন)

2> ছাত্র হিসাবে আপনার অ্যাকাউন্ট তৈরি করুন

3> আমার অ্যাকাউন্টে / আমার ডাউনলোডগুলিতে যান

4> আমার সংযোগগুলিতে ক্লিক করুন


1

হ্যাশ পরিবর্তন করানো রাষ্ট্রের অনুরূপ history.pushStateযা popstateইভেন্টকে ট্রিগার করে । ব্রাউজারে পিছনে এবং পিছনে আঘাত করা পপ এবং এই রাজ্যগুলিকে ধাক্কা দেবে যাতে আপনার অন্য কোনও কাস্টম হ্যান্ডলারের প্রয়োজন হবে না।

পিএস: আপনি :targetনিজের activeক্লাস থেকে সিএসএস স্টাইল যুক্ত করতে পারেন । window.addEventListener('popstate'এখানে শুধু লগ ইভেন্ট দেখানোর জন্য কিন্তু event.stateসবসময় এই ক্ষেত্রে নাল হতে হবে।

রান কোড স্নিপেট ট্যাব নেভিগেট করার চেষ্টা করুন তারপরে ব্রাউজারটি পিছনে এবং ফরোয়ার্ড বোতামগুলি ব্যবহার করুন।

<style type="text/css">
    div { display: none }
   :target { display: block }
</style>


  <h2><a href="#Tab1">Tab 1</a> | <a href="#Tab2">Tab 2</a> | <a href="#Tab3">Tab 3</a> | <a href="#Tab4">Tab 4</a></h2>


<div id="Tab1">
  <p>This tab 1 content</p>
</div>

<div id="Tab2">
  <p>This tab 2 content</p>
</div>

<div id="Tab3">
  <p>This tab 3 content</p>
</div>

<div id="Tab4">
  <p>This tab 4 content</p>
</div>

<script>
  (() => {
history.pushState(null, '', '#Tab1');
window.addEventListener('popstate', event => {
 console.log(window.location.hash);
});
})()
</script>


0

আপনার প্রয়োজনীয় প্রথম জিনিসটি, ক্লিক ইভেন্টে $ ইভেন্ট.প্রিভেন্টডিফুয়ালটি () দ্বারা ইতিহাসে ইউআরএল জমা দেওয়ার জন্য লিঙ্কটি প্রতিরোধ করুন এবং ইতিহাস.পুষ্পস্টেটের সাথে ইতিহাসকে কাস্টমাইজ করুন (ডেটা, শিরোনাম, url)

জেএসে আমাদের একটি ইভেন্ট রয়েছে যা ব্যবহারকারীর মাধ্যমে পিছনে এবং এগিয়ে যাওয়া ইভেন্টটি নিয়ন্ত্রণ করতে আমাদের সহায়তা করে। এই ইভেন্টের নাম "পপস্টেট"। আপনি এটি উইন্ডো.এডডেন্টেন্টলিস্টনার ('পপস্টেট', কলব্যাক) দ্বারা ব্যবহার করতে পারেন । কলব্যাক ফাংশনে আপনি ট্যাবটি সক্রিয় ও নিষ্ক্রিয় করতে পারেন (ক্লাস যুক্ত এবং সরান) এবং ইউআরএলটি বের করতে পারেন।

আমি এটি একটি নমুনা কোড দিয়ে দেখায়। আরও ভাল করে বোঝার জন্য, এটি একটি সার্ভার বা স্থানীয় সার্ভারে চেষ্টা করে দেখুন কারণ এখানে url পরিবর্তন করা সীমিত:

$('nav ul a').on('click', function($e) {
        function appendContent(hash) {
            $('#content').text(`Content of  item ${hash} `);
        }
        $e.preventDefault(); // when click the link stay in page
        let _this = this; // get the link tag
        let hash = _this.hash.replace(/\#/, '');
        
        appendContent(hash);
        $('li').removeAttr('class');
        $('a').removeAttr('class');
        $(`a[href*=${hash}]`).addClass('text-white').addClass('border-0').parent().addClass('bg-primary').addClass('last-style');
     
           history.pushState('', _this.text, hash); // add the link in history
  
        window.addEventListener('popstate', function ($e) {
             let hashAgain = location.hash.replace(/\#/, ''); // you extract the hash
            appendContent(hashAgain); // set the content of the back or forward link
          $('li').removeAttr('class');
        $('a').removeAttr('class');
        $(`a[href*=${hash}]`).addClass('text-white').addClass('border-0').parent().addClass('bg-primary').addClass('last-style'); // update the status of tab 
          
            
        });
    });
ul li {
  display: inline-block;
  margin: 1em; 
}

li a,
.last-style {
  border: 1px solid;
  padding: 0.5em 1em;
}
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" >
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Learning Java Script In Deep</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
		<script type="text/javascript" src="js/angular/angular.min.js"></script>
	</head>
	<body>
	
		<header class="text-center text-black-50">
			<h1>Learning JS in Deep</h1>
			<nav id="">
				<ul id="">
					<li><a href="#home" class="home">Home</a></li>
					<li><a href="#item1">Item 1</a></li>
					<li><a href="#item2">Item 2</a></li>
					<li><a href="#item3">Item 3</a></li>
					<li><a href="#item4">Item 4</a></li>
				</ul>
			</nav>
		</header>

        <div class="container m-auto text-center" id="content">
            <p>Load <em class="text-danger">Content</em> in Here</p>
        </div>

        <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        
		
	</body>	
</html>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.