Bạn đang xem : jquery chuyển đổi hiển thị ẩn

Phương thức chuyển đổi

Phương thức bật tắt của jQuery sẽ ẩn phần tử hiển thị được chỉ định và hiển thị các phần tử bị ẩn. Sử dụng phương pháp chuyển đổi nếu bạn cần cho phép người dùng hiển thị hoặc ẩn bất kỳ phần tử nào như div, menu, đoạn văn, v.v. trong các trang web của bạn bằng cách đưa ra tùy chọn có thể chuyển đổi.

Nếu chỉ yêu cầu một mục tiêu duy nhất, chẳng hạn như chỉ cho phép ẩn phần tử hiển thị hoặc hiển thị phần tử ẩn thì bạn nên sử dụng $ .hide $. hiển thị các phương pháp, tương ứng.

Cú pháp của phương thức bật tắt

Đây là cách bạn có thể sử dụng phương pháp chuyển đổi:

$ (selector) .toggle (speed, callback)

Trong đó, một bộ chọn có thể là div, đoạn, lớp, ID, bảng HTMl, danh sách, v.v.

Sau đây là một vài ví dụ về việc sử dụng phương thức chuyển đổi jQuery với các mã mà tôi cũng sẽ sử dụng các tham số khác nhau của phương thức chuyển đổi. Nhấp vào các liên kết nhất định hoặc hình ảnh demo để xem trực tuyến.

Ví dụ cơ bản về cách sử dụng chuyển đổi với div

Trong ví dụ này, tôi sẽ sử dụng phương thức jQuery chuyển đổi để hiển thị hoặc ẩn một phần tử div. Khi bạn nhấp vào nút “Hiển thị / Ẩn” nếu phần tử div hiển thị thì nó sẽ bị ẩn và ngược lại.

jquery toggle

Trong trường hợp nhấp vào nút, tôi đã đặt phương thức chuyển đổi jQuery được đính kèm với phần tử div có id: toggle_tst. Xem mã jQuery:

1

2

3

4

5

6

7

8

& lt; script & gt;

$ < / p>

(

tài liệu

)

.

đã sẵn sàng

(

hàm

(

)

{

$

(

” # show_hide “

)

.

nhấp

(< / p>

function

(

)

{

$

(

“# toggle_tst”

)

.

chuyển đổi

(

)

}

< p class = "crayon-sy">)

;

}

)

;

& lt; / script & gt;

Trong ví dụ này, tôi chỉ sử dụng phương thức chuyển đổi mà không sử dụng bất kỳ tham số hoặc tùy chọn nào như thời lượng, hiệu ứng giảm bớt hoặc hàm gọi lại mà tôi sẽ sử dụng trong các ví dụ sắp tới.

Một ví dụ chuyển đổi dễ dàng và các tùy chọn chức năng gọi lại

Trong ví dụ sau, các tùy chọn khác nhau có sẵn với phương thức jQuery chuyển đổi được sử dụng. Phương thức sử dụng là thời lượng, mức độ dễ dàng và hàm gọi lại trong phương thức bật tắt.

Khi thời lượng được sử dụng trong phương thức chuyển đổi , phương thức này sẽ trở thành phương thức hoạt ảnh. Trong tham số thời lượng, bạn có thể sử dụng các chuỗi, ví dụ: “nhanh” hoặc “chậm” hoặc cung cấp thời gian tính bằng mili giây. Càng nhiều giá trị mili giây thì hoạt ảnh sẽ càng chậm. Trong khi, giá trị được cung cấp là nhanh có nghĩa là 200 mili giây và chậm có nghĩa là 600 MS.

Trong ví dụ sau, tôi sẽ sử dụng thời lượng cũng như hàm gọi lại. Hàm gọi lại sẽ thực thi khi hoạt ảnh được thực hiện. Bạn có thể thực hiện một số hành động ở cuối hoạt ảnh hoặc hiển thị một số thông điệp mô tả cho khách truy cập của bạn.

Ví dụ này cũng sử dụng tùy chọn nới lỏng . Nếu bạn chỉ sử dụng thư viện jQuery, bạn có thể chỉ định tùy chọn swing (là mặc định) hoặc “tuyến tính”. Mặc dù nếu thư viện giao diện người dùng jQuery được sử dụng, các tùy chọn nới lỏng khác cũng có thể được chỉ định. Trong ví dụ này, tôi sẽ sử dụng thư viện jQuery để sử dụng tùy chọn nới lỏng khác.

jquery toggle Regiing

Như bạn có thể thấy, tôi đã tạo một vòng kết nối với một số văn bản (về cơ bản đối với ví dụ về jQuery show / hide div). Khi bạn nhấp vào nút vòng tròn “hiển thị / ẩn”, phương thức jQuery chuyển đổi sẽ được gọi với ba tùy chọn.

Thời lượng được đặt thành 1500 ms, giá trị nới lỏng được sử dụng: easyOutQuint (bạn phải bao gồm thư viện giao diện người dùng jquery để hoạt động) và cuối cùng là một hàm gọi lại. Khi hoạt ảnh hoàn thành, một cảnh báo sẽ được hiển thị được đặt bên trong hàm gọi lại. Đoạn mã sau được sử dụng trong phần jQuery:

1

2

3

4

5

6

7

8

9

10

& lt; script & gt;

$ < / p>

(

tài liệu

)

.

đã sẵn sàng

(

hàm

(

)

{

$

(

” # show_hide “

)

.

nhấp

(< / p>

function

(

)

{

$

(

“# toggle_tst”

)

.

chuyển đổi

(

1500

,

“easyOutQuint”

, < / p>

function

(

)

{

alert

(

“Hàm gọi lại khi .toggle hoàn thành!”

)

;

}

)

;

}

)

;

}

)

;

& lt; / script & gt ;

Bạn có thể xem mã đầy đủ trong trang demo.

Ví dụ chuyển đổi jQuery với tùy chọn specialEasing

Trong ví dụ này, tùy chọn Đặc biệt được sử dụng. Đối với điều đó, tôi đã bao gồm thư viện jQuery UI cho phép sử dụng các giá trị khác nhau để nới lỏng, được sử dụng cho các thuộc tính chiều cao và chiều rộng. Xem ví dụ bằng cách nhấp vào liên kết bên dưới hoặc hình ảnh:

jquery chuyển đổi đặc biệt

Bạn có thể thấy trong mã (phần tập lệnh) giá trị được sử dụng cho chiều rộng là easyOutElastic và cho chiều cao là easyInBounce .

1

2

3

4

5

6

7

8

9

10

11

$

(

< p class = "crayon-h">

“# toggle_tst”

)

.

chuyển đổi

(

{

thời lượng

:

3000

,

specialEasing

:

{

width

:

“easyOutElastic”

,

height

:

“easyInBounce”

,

}

,

hoàn thành

:

chức năng

(

)

{

// alert (“Hoạt ảnh hoàn chỉnh!”);

}

}

)

;

< p class = "c rayon-line "id =" crayon-62b36d3f88fae910964398-11 ">

}

)

;

Bạn có thể xem danh sách các giá trị nới lỏng khả dụng trong trang web chính thức: http://jqueryui.com/easing/

Ví dụ về menu hiển thị / ẩn

Trong ví dụ này, tôi đã tạo một menu dọc với các mục menu chung. Các mục menu được tạo bên trong phần tử div mẹ bằng cách sử dụng thẻ danh sách không có thứ tự, ul. CSS và HTML của menu cũng được cung cấp.

Ngoài ra, tôi đã sử dụng một liên kết thay vì một nút trong ví dụ này để hiển thị / ẩn hoặc chuyển đổi phần tử div. Nhấp vào liên kết bên dưới để xem bản demo trực tiếp và mã:

jquery menu chuyển đổi

Khi nhấp vào liên kết hiển thị / ẩn Menu, div chứa menu dọc sẽ biến mất với thời lượng ba giây. Vì tôi không chỉ định giá trị nới lỏng, nó sẽ sử dụng mặc định, tức là swing .

Không giống như ví dụ trên, nơi tôi sử dụng các giá trị nới lỏng không phải là swing và tuyến tính, bạn không cần phải bao gồm thư viện giao diện người dùng jQuery cho hiệu ứng swing và tuyến tính. Hãy nhớ rằng, khi bạn chỉ định tham số thời lượng, phương thức chuyển đổi jQuery sẽ trở thành một phương thức hoạt ảnh.

Ví dụ hiển thị / ẩn hình ảnh

Trong ví dụ sau, thẻ hình ảnh được tạo với ID của nó. Khi bạn nhấp vào liên kết hiển thị / ẩn, hình ảnh sẽ bị biến mất nếu hiển thị và hiển thị nếu bị ẩn.

jquery chuyển đổi hình ảnh

Bạn có thể thấy hình ảnh động giống như một phần tử khác mà tôi đã sử dụng trong các ví dụ trên. Bạn chỉ cần gọi nó bằng ID hoặc tên lớp, v.v. và sử dụng phương thức jQuery chuyển đổi. Nếu bạn không sử dụng thông số thời lượng, hình ảnh sẽ xuất hiện và biến mất trong nháy mắt. Tôi đã sử dụng giá trị 3000 mili giây là ba giây.

Một ví dụ về bảng CSS để ẩn và hiển thị bằng phương pháp bật tắt < / strong>

Trong ví dụ này, một bảng HTML được tạo với một vài thuộc tính CSS. Khi bạn bấm vào nút Hiển thị / Ẩn bảng, bảng sẽ ẩn nếu hiển thị. Nếu bảng không hiển thị, khi nhấp vào nút, bảng sẽ hiển thị. Xem ví dụ bằng cách nhấp vào liên kết bên dưới:

bảng chuyển đổi jquery

Bạn có thể thấy bảng ẩn hoặc xuất hiện trong khoảng thời gian hai giây.


Xem thêm những thông tin liên quan đến chủ đề jquery chuyển đổi hiển thị ẩn

jquery tooltip widget

alt

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-06-30
  • Đánh giá: 4 ⭐ ( 1572 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
    https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/06/jquery-tooltip-widget.html

    Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

    In this video we will discuss jQuery tooltip widget with examples.

    To get a tooltip without using jQuery all you do is set the title attribute. At this point when we hover over the element the content that is specified as the value for the title attribute will be displayed as the tooltip.

    jQuery Tooltip widget replaces native tooltip and allows lot of customization
    1. Display other content than just the title, like inline footnotes or extra content retrieved via Ajax.
    2. Customize the positioning, e.g., to center the tooltip above elements.
    3. Add extra styling to customize the appearance, for warning or error fields.

    In the following example label element display the native tooltip where as the textbox displays jQuery tooltip

    HTML
    <label id=”lblName” for=”txtName” title=”Full Name”>Name</label>
    <input id=”txtName” type=”text” title=”Your full name as it appears in paasport” />

    jQuery
    $(‘txtName’).tooltip();

    In the following example we are calling tooltip() function on the document object, so this will display jQuery tooltip for all the elements that have title attribute
    $(document).tooltip();

    You can also use the content option, to specify the content for tooltip. When both title attribute and content options are specified, the content specified by the content option will override the content specified by the title attribute.

    HTML
    <input id=”txtName” type=”text” title=”Your full name as it appears in paasport” />

    jQuery
    $(‘txtName’).tooltip({
    content : ‘<u>content option</u> tooltip overriding title attribute tooltip’
    });

    content option supports multiple types. string or a function.

    HTML
    <input id=”txtName” type=”text” title=”Your full name as it appears in paasport” />

    jQuery
    $(document).ready(function () {
    $(‘txtName’).tooltip({
    content: toolTipFunction
    });

    function toolTipFunction() {
    return ‘Tooltip from a function’;
    }
    });

    Set track option to true to make the tooltip follow the mouse

    HTML
    <input id=”txtName” type=”text” title=”Your full name as it appears in paasport” />

    jQuery
    $(‘txtName’).tooltip({
    track: true
    });

    show and hide options can be used to animate the showing and hiding of the tooltip. Both of these options support multiple types. For the detailed description please check the following jquery documentation page
    http://api.jqueryui.com/tooltip

    In the following example we are using a JavaScript object, to specify the animation duration, effect and delay while the tooltip is being shown and hidden

    HTML
    <input id=”txtName” type=”text” title=”Your full name as it appears in paasport” />

    jQuery
    $(‘txtName’).tooltip({
    show : {delay:10, duration:500, effect: ‘slideDown’},
    hide: { delay: 10, duration: 500, effect: ‘slideUp’ }
    });

JAVASCRIPT: chuyển đổi hiển thị

  • Tác giả: vi.sunflowercreations.org
  • Đánh giá: 3 ⭐ ( 5784 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hy vọng rằng đây là một câu hỏi dễ dàng. Tôi có một div mà tôi muốn chuyển đổi ẩn / hiển thị bằng một nút

Hiệu ứng trong jQuery

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 2149 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiệu ứng trong jQuery – Học jQuery cơ bản và nâng cao theo các bước đơn giản về jQuery Selector, Bộ chọn, thuộc tính, Attribute, CSS, Thao tác DOM, Truy cập DOM, AJAX trong jQuery, hiệu ứng, sự kiện trong jQuery, Drag và Drop, Effect, Event Handler, UI, Plug-ins và các tiện ích khác trong jQuery.

Chuyển đổi hiện / ẩn khi nhấp với jQuery

  • Tác giả: vi.gtainspections.com
  • Đánh giá: 5 ⭐ ( 1362 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có một phần tử div, vì vậy khi tôi nhấp vào nó, một div khác bị ẩn theo mặc định sẽ trượt và hiển thị, đây là mã cho chính hoạt ảnh: $ (‘# myelement’). Click (function () {$ ( ‘#ano …

Làm cách nào tôi có thể thay đổi hiển thị CSS hoặc chặn thuộc tính bằng jQuery?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1814 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cách chính xác để làm điều này là sử dụng showvà hide: $(‘#id’).hide(); $(‘#id’).show(); Một cách…

Chuyển đổi hiện / ẩn khi nhấp với jQuery

  • Tác giả: vi.bannikherafarm.com
  • Đánh giá: 3 ⭐ ( 3703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có một phần tử div, vì vậy khi tôi nhấp vào nó, một div khác bị ẩn theo mặc định sẽ trượt và hiển thị, đây là mã cho chính hoạt ảnh: $ (‘# myelement’). Click (function () {$ ( ‘#ano …

Sử dụng JQuery để chuyển đổi chế độ hiển thị div

  • Tác giả: vi.athabasca-foto.com
  • Đánh giá: 4 ⭐ ( 1530 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang viết một số mã jquery để chuyển đổi chế độ hiển thị Div. Tôi đã làm theo phương pháp được đăng ở đây: http://jsfiddle.net/Ga7Jv/. Khi người dùng nhấp vào một hình ảnh (bên cạnh thẻ H2), tôi muốn nó chuyển …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thay đổi độ mờ của hình nền trong CSS - đặt độ mờ của hình nền css

By ads_php