Có cách nào để tạo phần tử HTML của riêng bạn không?

Question

Có cách nào để tạo phần tử HTML của riêng bạn không? Tôi muốn tạo một hộp kiểm được thiết kế đặc biệt.

Tôi tưởng tượng một điều như vậy sẽ được thực hiện bằng JavaScript. Một cái gì đó giống như document.createHTMLElement nhưng khả năng thiết kế phần tử của riêng bạn (và thẻ).

Answer 1

Có, bạn có thể tạo thẻ của riêng mình. Bạn phải tạo một Schema và nhập nó vào trang của bạn, và viết một lớp JavaScript để chuyển đổi các thẻ mới của bạn thành các thẻ HTML hiện có.

Ví dụ là fbml (Facebook Markup Language), bao gồm lược đồ và lớp JavaScript mà Facebook đã viết. Xem phần này: Open Graph protocol.

Sử dụng nó, bạn có thể làm cho một nút giống như thực sự dễ dàng:

<fb:like href="http://developers.facebook.com/" width="450" height="80"/> 

Answer 2

Không, không có.

Các yếu tố HTML được giới hạn cho những gì trình duyệt sẽ xử lý. Đó là để nói, nếu bạn tạo một plugin firefox tùy chỉnh, và sau đó đã có nó xử lý thẻ đặc biệt của bạn, sau đó bạn "có thể" làm điều đó, cho các giải thích khác nhau của "làm việc đó". Bạn có thể tìm thấy danh sách tất cả các yếu tố cho một phiên bản HTML cụ thể tại đây: http://www.w3.org/TR/html4/index/elements.html

Có thể, tuy nhiên, bạn thực sự không muốn. Nếu bạn muốn "kết hợp" một số phần tử hiện có theo cách như vậy khi chúng hoạt động cùng nhau, thì bạn có thể làm điều đó rất JavaScript. Ví dụ: nếu bạn muốn hộp kiểm, khi được nhấp, hiển thị danh sách thả xuống ở đâu đó, được điền bằng nhiều thứ khác nhau, bạn có thể làm điều đó.

Có lẽ bạn có thể muốn xây dựng trên những gì bạn thực sự muốn đạt được và chúng tôi có thể trợ giúp thêm.

Answer 3

Cách dễ nhất có thể là viết một plugin nói trong Jquery (hoặc Dojo, MooTools, chọn một). Trong trường hợp jQuery bạn có thể tìm thấy một số plugin ở đây http://plugins.jquery.com/ và sử dụng chúng làm mẫu.

Answer 4

Không, không có. Hơn nữa nó không được phép trong HTML5.

Hãy xem Ample SDK Thư viện GUI JavaScript cho phép bất kỳ phần tử tùy chỉnh hoặc không gian tên sự kiện nào phía máy khách (cách này XUL ví dụ được triển khai ở đó) mà không can thiệp vào các quy tắc của HTML5.

Hãy xem vào ví dụ như thế nào yếu tố quy mô XUL thực hiện: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js và stylesheet mặc định của nó: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css

Answer 5

Đó là một câu hỏi hợp lệ, nhưng tôi nghĩ rằng tên của trò chơi từ phía UI là tiến đánh dấu. Xây dựng các thẻ tuân thủ w3 hợp lệ và sau đó tạo kiểu cho phù hợp với javascript (trong trường hợp của tôi là Jquery hoặc Dojo) và CSS. Một khối CSS được viết tốt có thể được sử dụng lại nhiều lần (trường hợp yêu thích của tôi là giao diện người dùng Jquery với themeroller) và tạo kiểu gần như bất kỳ phần tử nào trên trang chỉ với một hoặc hai từ để khai báo lớp.

Dưới đây là một số Jquery/Javascript giải pháp/CSS tốt là tương đối đơn giản:

http://www.filamentgroup.com/examples/customInput/ http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/

Dưới đây là spec cho sắp tới (và hứa hẹn) jQueryUI cập nhật cho các yếu tố hình thức: http://wiki.jqueryui.com/Checkbox

Nếu bạn cần xác thực tính năng nhập, đây là cách dễ dàng để xác thực nội dòng bằng một lớp hoặc thẻ id duy nhất: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Ok, vì vậy giải pháp của tôi không phải là giải pháp 10 dòng, một dòng. Tuy nhiên, Jquery Mã sang một bên, mỗi thẻ cá nhân sẽ không được nhiều hơn:

<input type="checkbox" id="theid"> 

Vì vậy, trong khi sẽ có một đoạn vừa mã jquery, các yếu tố cá nhân sẽ rất nhỏ, đó là quan trọng nếu bạn lặp lại nó 250 lần (theo chương trình) như dự án cuối cùng của tôi yêu cầu. Thật dễ dàng để mã hóa, làm giảm tốt, xác nhận tốt, và bởi vì đánh dấu tiến bộ sẽ được vào cuối của người dùng, hầu như không có chi phí trên máy chủ kết thúc.

Dự án hiện tại của tôi nằm trong Symfony - không phải lựa chọn của tôi - sử dụng các thẻ phía máy chủ phức tạp, cồng kềnh để hiển thị các phần tử biểu mẫu, xác thực, làm javascript, phong cách, v.v. Điều này có vẻ như bạn đang yêu cầu đầu tiên .... và để tôi nói với bạn, đó là CLUNKY. Một thẻ để gọi một liên kết có thể là 10 dòng mã! Sau khi bị buộc phải làm điều đó, tôi không phải là một fan hâm mộ.

Answer 6

Bạn cần phải viết doctype riêng hoặc/và sử dụng không gian tên riêng để thực hiện việc này.

http://msdn.microsoft.com/en-us/magazine/cc301515.aspx

Answer 7

Hm. Ý nghĩ đầu tiên là bạn có thể tạo phần tử của riêng bạn và thực hiện một phép biến đổi với XSLT thành HTML hợp lệ.

Answer 8

Với sự xuất hiện của tiêu chuẩn W3 Web Components mới nổi, cụ thể là Custom Elements spec, bây giờ bạn có thể tạo các phần tử HTML tùy chỉnh của riêng mình và đăng ký chúng với trình phân tích cú pháp theo phương pháp DOM document.register().

X-Tag là một thư viện đường hữu ích, được phát triển bởi Mozilla, mà làm cho nó dễ dàng hơn để làm việc với Web Components, có một cái nhìn: X-Tags.org