Theo mặc định, jquery-mobile thêm nút quay lại trên mỗi trang sau trang chính. Tôi muốn biết làm thế nào tôi có thể thêm nút Home cũng?
Dưới đây là một ví dụ: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.htmlCách thêm nút trang chủ bằng cách sử dụng jquery-mobile?
Lưu ý: Liên kết này chỉ tốt cho firefox/chrome
Cảm ơn.
Nếu không sửa đổi mã nguồn jquery-mobile.js, cách duy nhất tôi có thể nghĩ là thực hiện, là thêm liên kết điều hướng của riêng bạn vào tiêu đề. Khi bạn thêm liên kết của riêng mình, nút 'Quay lại' tự động sẽ biến mất, vì vậy chúng tôi sẽ tạo 2 liên kết, một liên kết để quay lại và một liên kết cho gia đình.
Bạn sẽ thấy trang 2 và 3 đều có nút quay lại và nút trang chủ và bạn có thể quay lại hoặc chuyển trực tiếp về nhà. Điều này đòi hỏi bạn phải sửa đổi phần 'tiêu đề' cho mỗi trang, nhưng nó không phải là một thỏa thuận lớn vì nó luôn giống nhau (sao chép và dán) không cần sửa đổi cho mỗi trường hợp.
Liên kết 'nhà riêng' sẽ ở trên cùng bên phải (theo hành vi mặc định của liên kết thứ hai để đặt nó ở trên cùng bên phải).
Dưới đây là ví dụ:
<!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>
Nếu bạn muốn làm cho nó làm điều đó tự động, bạn cũng có thể chỉ hack js ...
Ngay sau khi đoạn mã này (quanh dòng 1084 của jquery.mobile-1.0a2.js không được rút gọn)
$("<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>")
.click(function() {
history.back();
return false;
})
.prependTo($this);
Thêm một dòng như thế này, trong đó #firstp tuổi là id của trang chủ của bạn, tôi không thể tìm thấy một cách để tham khảo trang chủ mà không gọi nó bằng tên, cảm thấy tự do để cải thiện .. Tôi không muốn làm/hoặc chỉ # sẽ không hoạt động .. nhưng phương pháp này hoạt động
$("<a href='#firstpage' class='ui tn-right'>Home</a>").appendTo($this);
Cảm ơn đống, đây là những gì tôi đang tìm kiếm. –
Có một giải pháp đơn giản hơn: chỉ cần thêm liên kết vào div tiêu đề của bạn với class="ui-btn-right". Điều này là cần thiết để nút quay lại jQuery Mobile có thể được tự động thêm vào bên trái. Ngoài ra còn có một vài đĩa dữ liệu khác * thuộc tính mà bạn có thể sử dụng để bạn có thể sử dụng biểu tượng chủ đề tích hợp vv, như:
<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">
...
(Rõ ràng thay đổi URL nhà href một cái gì đó hợp lý cho môi trường của bạn, don 't chỉ cần sử dụng '/' vì nó giới hạn nơi ứng dụng của bạn có thể được triển khai.)
nếu bạn đặt 'href' thành cùng url với url trang chủ, nó hoạt động hoàn hảo –
<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>
bạn có thể sử dụng rel=external trong bạn href thẻ. Thao tác này sẽ mở trang chủ mà không cần nút quay lại.
Khi lần đầu tiên sử dụng jqm để phát triển một ứng dụng, tôi muốn cả nút home và back trên tiêu đề trên cùng vì cây điều hướng nằm sâu. Sử dụng các lớp nút lõi như "ui-btn-right" hoặc "ui-btn-left" hoạt động tuyệt vời-- NẾU bạn chỉ muốn một nút ở mỗi bên.
Nhưng nếu bạn giống tôi và muốn có hai nút ở bên trái, bạn có thể sử dụng một chút CSS tùy chỉnh và định vị để có được nó ở nơi bạn muốn. Tôi cũng gói các nút trong một lớp tiêu đề tùy chỉnh, cũng như sử dụng CSS để kiểm soát tiêu đề trong tiêu đề. Bạn sẽ cần đặt mỗi nút trên một chỉ mục z khác nhau, nếu không, mỗi nút sẽ xung đột với nhau.
Đây là tiêu đề:
<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 -->
Đây là 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;
}
Hy vọng điều này mang đến cho bạn nhiều lựa chọn hơn.
liên kết của bạn trỏ tới 1.0alpha1. Để bạn biết - bản phát hành mới nhất là alpha3 và nếu bạn sử dụng bất kỳ tham chiếu hoặc hướng dẫn nào - các phiên bản alpha1 không tương thích. – naugtur