Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > อยากทราบวิธีทำให้ tabs ของ jquery เวลาที่เราทำการ refresh หน้าเว็บให้อยู่ tab เดิม



 

อยากทราบวิธีทำให้ tabs ของ jquery เวลาที่เราทำการ refresh หน้าเว็บให้อยู่ tab เดิม

 



Topic : 080433



โพสกระทู้ ( 48 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook 



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Content via Ajax</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs({
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Preloaded</a></li>
		<li><a href="ajax/content1.html">Tab 1</a></li>
		<li><a href="ajax/content2.html">Tab 2</a></li>
		<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
		<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.  While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->

</body>
</html>



ตัวอย่างเช่นเราทำงานอยู่ที่ tab 3 แต่พอทำการ refresh หน้าเว็บแล้วจะกลับไปอยู่ tab 1 เลยอยากทราบวิธีทำให้อยู่ tab เดิมที่เราทำงานอยู่ครับ



Tag : PHP, jQuery






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-06-30 22:06:29 By : benservice View : 4967 Reply : 11
 

 

No. 1



โพสกระทู้ ( 1,521 )
บทความ ( 2 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

เพิ่ม selected เข้าไป ลองเอาไปประยุกต์ดูครับ
Code (PHP)
(function() {
		$( "#tabs" ).tabs({
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			},
			selected: 3
		});
	});






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-30 23:35:06 By : Krungsri
 


 

No. 2



โพสกระทู้ ( 48 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ยังไม่ค่อยเข้าใจเท่าไหร่ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-01 02:52:38 By : benservice
 

 

No. 3



โพสกระทู้ ( 5,149 )
บทความ ( 26 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


http://stackoverflow.com/questions/3730111/trouble-with-jquery-ui-tabs-cookie-option
http://www.craiglotter.co.za/2010/11/25/jquery-ui-remember-your-open-tab/

ใช้ function cookie ของมันก็น่าจะได้นะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-01 06:43:03 By : deawx
 


 

No. 4



โพสกระทู้ ( 51 )
บทความ ( 0 )



สถานะออฟไลน์


ปัญหาเดียวกันเลยค่ะ ไม่ทราบว่าอันนี้เจ้าของกระทู้ทำได้มั๊ยค๊ะ ลองไปตามที่คุณ deawx ยังไม่ได้ค่ะ ขอคำแนะนำด้วยค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-06 10:51:57 By : keewa
 


 

No. 5



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


กระทู้นี้ตั้งแต่ปลายเดือนหก คำถามนี้ผมตอบให้คุณ keewa นะครับ

ถ้าจะให้ tab ค้างอยู่ที่หน้าสุดท้ายหลังจากเราปิดหน้า browser ไป ก็ต้องใช้ jQuery Cookie เข้าช่วย
อธิบายตรงนี้เข้าใจได้ยาก ผมทำตัวอย่างโค้ดไว้ให้ ลองไปดาวโหลดดูได้ที่

http://www.mineinc.net/qa/file/2012/12/06/file1.html


ปล. ตัว Option ของ jQuery Tabs มีหลายอย่าง ผมคิดว่าน่าจะมากที่สุดในบรรดา UI แท้ๆของ jQuery
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-06 16:55:28 By : dreamlover
 


 

No. 6



โพสกระทู้ ( 51 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณคุณ jack มากค่ะ ผลลัพภ์ที่ได้จากโค๊ดของคุณ jack นั้นก็ดีค่ะ แต่ไม่ใช่อย่างที่ต้องการค่ะ คือหนูผิดเองค่ะ อาจจะสื่อสารไม่ตรงกัน คืออย่างงี้ค่ะ สมมติว่ามี tab ประมาณซัก 4 tab แต่ละ tab ก็จะแสดงข้อมูลโดยดึงมาจากไฟล์อื่นใช่มั๊ยค๊ะ แต่ทีนี้ในบาง tab จะมีดร็อปดาวน์ให้เลือกแสดงผลข้อมุลออกมา แล้วจะมีปุ่ม ok พอกดปุ่มแล้วแทนที่มันจะแสดงใน tab ของมัน แต่มันดันหลุดออกมาเป็น window อีกหน้าเลยอ่ะค่ะ คือหลุดออกมาเลย นี่แหละค่ะคือปัญหาว่าจะทำยังงัยให้มันแสดงผลลัพธ์อยู่ภายใน tab ของมัน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-07 10:10:52 By : keewa
 


 

No. 7



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


ต้องเอาโค้ดที่มีปัญหาอยู่มาโพสให้ผมดูครับ ข้อมูลเท่านี้ผมไม่สามารถตอบอะไรให้ได้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-07 11:30:17 By : dreamlover
 


 

No. 8



โพสกระทู้ ( 51 )
บทความ ( 0 )



สถานะออฟไลน์


เป็น jquery tab แบบเจ้าของกระทู้เลยค่ะ

Code (PHP)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ระบบฐานข้อมูล</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


<link rel="stylesheet" href="jtab/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="jtab/jquery-1.8.3.js"></script>
    <script src="jtab/jquery.cookie.js"></script>
    <script src="jtab/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="jtab/demos.css" />
    <script>
    $(function() {
        $( "#tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                ui.jqXHR.error(function() {
                    ui.panel.html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                });
            }
        });
        
                             
    }
    );
    </script>


</head>

<body>

<div id="tabs">
    <ul>
        <li><a href="detail1.php">ข้อมูลเบื้องต้น</a></li>        
        <li><a href="detail2.php">สรุปงาน</a></li>
        <li><a href="detail3.php">ผลรวม</a></li>
    </ul>
</div>
 

</body>
</html>

ส่วนในไฟล์ detail1.php อาจจะมีเป็น ฟอร์มค้นหาข้อมูลให้กดปุ่ม OK แต่พอกดแล้วมันไม่อยุ่ในแท็บเดิมของมันค่ะ มันหลุดออกมาอีก window นึงเลย หรือแค่อาจจะเป็นลิงคฺ์ให้เปิดอีกเพจนึง
Code (PHP)
<a href="http://www.kapook.com">TEST</a>


็ก็หลุดแท็บเหมือนกันค่ะ


ประวัติการแก้ไข
2012-12-07 13:53:17
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-07 13:52:31 By : keewa
 


 

No. 9



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


โค้ดอย่างที่เป็นอยู่ จะำทำให้อย่างที่คุณต้องการไม่ได้
หน้าของไฟล์ detail.php ที่อยู่ใน tab เป็นเหมือนภาพที่โหลดเข้ามา ตัวไฟล์จริงๆไม่ได้อยู่ที่นี่
เมื่อคุณ submit ฟอร์ม ยังไงก็ต้องกระโดดเปลี่ยนไปที่ไฟล์ detail1.php เพื่อรัน query


ปล. คุณสามารถทำอย่างที่ต้องการโดยใช้่ฟังก์ชั่น $.ajax(); ของ jQuery
วิธีอาจซับซ้อนหน่อย เพราะคุณต้องเปลี่ยนโครงสร้างของไฟล์ detail.php ใหม่
ถ้าคุณยังไม่ถนัดเรื่องนี้ ผมขอแนะนำให้เปลี่ยนจาก tab ไปใช้อย่างอื่นแทน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-07 14:15:01 By : dreamlover
 


 

No. 10



โพสกระทู้ ( 51 )
บทความ ( 0 )



สถานะออฟไลน์


ค่ะ จะได้เลิกหาวิธี แล้วไปหาทำวิธีอื่นแทน หรือถ้าใครมีวิธีใหนที่ทำได้จะแนะนำ ก็แนะนำหน่อยค่ะ ขอบคุณค่ะ


ประวัติการแก้ไข
2012-12-07 14:30:28
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-07 14:27:59 By : keewa
 


 

No. 11



โพสกระทู้ ( 22 )
บทความ ( 0 )



สถานะออฟไลน์


Code (JavaScript)
$(function() {
    $('a[data-toggle="tab"]').on('click', function(e) {
        window.localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = window.localStorage.getItem('activeTab');
    if (activeTab) {
        $('#myTab a[href="' + activeTab + '"]').tab('show');
        window.localStorage.removeItem("activeTab");
    }
});

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-10-23 12:16:32 By : oyzceep
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : อยากทราบวิธีทำให้ tabs ของ jquery เวลาที่เราทำการ refresh หน้าเว็บให้อยู่ tab เดิม
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่