Rumah hujung hadapan web tutorial js Fixie.js 自动填充内容的插件_javascript技巧

Fixie.js 自动填充内容的插件_javascript技巧

May 16, 2016 pm 05:52 PM

Fixie.js是一个自动填充HTML文档内容的开源工具
官方网址地址:http://fixiejs.com/
Fixie.js 下载地址 fixie_jb51.rar

为什么使用Fixie?
当我们设计网站的时候,由于无法确定最终填充的内容,经常需要添加一写lorem ipsum(关于Lorem ipsum)到页面里面来预览一下页面的展现效果。
问题来了,添加过多的无聊的内容,使得我们的HTML文档变得臃肿,并且陷入复制-粘贴,手工编辑的毅种循环中。
Fixie.js就是针对这个问题而诞生的,通过解析语义化的HTML5标签,Fixie可以自动填充匹配标签元素类型的内容,使得我们的HTML文档简洁,测试高效。

使用说明:
第一步:添加fixie.js 到文档中
在body结束标签之前添加



第二步:这里有两种方法:

1,任何需要填充内容的位置,设置`class="fixie"`就行了,
比如,如果先填充p标签的内容,直接设置`

`就行了,over,就这么简单。
2,通过`fixie.init`填充内容
通过CSS选择器选择待填充的元素,在console(控制台啊,亲)或者script标签里面执行

fixie.init([".array", "#of > .selectors", ".that", ".should", "#be > .populated", ".with", ".lorem"])
或者
fixie.init(".string, #of > .comma, .separated, .selectors, .that, .should, #be > .populated, .with, .lorem")
命令,就可以自动填充了
另外,执行

fixie.init(':empty')
可以填充文档里所有的空元素;

支持的元素
Fixie是通过标签类型来决定填充的内容的,这里有几类是需要了解的。
- `

` - 添加几个单词的文本,`h2 - h6`亦然。
- `

` - 填充一段文字
- `
` - 填充几段文本(几个段落)
- `
` - 同上
- `Fixie.js 自动填充内容的插件_javascript技巧` - 填充一张注明了尺寸的图片
- `` - 填充一个随机的链接(做广告嫌疑?)

提示
修改默认的图片填充
执行`fixie.setImagePlaceholder(source)`.
比如,如果你想从Flickr下载图片来填充,可以执行

fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();
给容器添加
容器内部所有的非空后代元素(注意后代与子代的区别)都会受到影响
看下面的说明
复制代码 代码如下:


Hello




Fixie会保留P标签里面的"Hello"文本,但是会填充a标签里面的内容

### Fixie for Rails
[fixie-rails](https://github.com/csexton/fixie-rails)

突出填充内容
可以添加

.fixie{ border:4px solid red; }
到CSS里面,以便区分填充内容与真实内容。

## 授权
废话,不翻译了。

示例说明:
复制代码 代码如下:




Fixie.js Sample







Check us out at ,
and don't forget to view source.




Fixie.js 自动填充内容的插件_javascript技巧









      <script> <BR>// Changes default image source to Flickr <BR>fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/fixie').init(); <BR></script>



      显示效果



      作者:西山

      Kenyataan Laman Web ini
      Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

      Alat AI Hot

      Undresser.AI Undress

      Undresser.AI Undress

      Apl berkuasa AI untuk mencipta foto bogel yang realistik

      AI Clothes Remover

      AI Clothes Remover

      Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

      Undress AI Tool

      Undress AI Tool

      Gambar buka pakaian secara percuma

      Clothoff.io

      Clothoff.io

      Penyingkiran pakaian AI

      AI Hentai Generator

      AI Hentai Generator

      Menjana ai hentai secara percuma.

      Alat panas

      Notepad++7.3.1

      Notepad++7.3.1

      Editor kod yang mudah digunakan dan percuma

      SublimeText3 versi Cina

      SublimeText3 versi Cina

      Versi Cina, sangat mudah digunakan

      Hantar Studio 13.0.1

      Hantar Studio 13.0.1

      Persekitaran pembangunan bersepadu PHP yang berkuasa

      Dreamweaver CS6

      Dreamweaver CS6

      Alat pembangunan web visual

      SublimeText3 versi Mac

      SublimeText3 versi Mac

      Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

      Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

      Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

      8 plugin susun atur halaman jquery yang menakjubkan 8 plugin susun atur halaman jquery yang menakjubkan Mar 06, 2025 am 12:48 AM

      Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual

      Bina Aplikasi Web Ajax anda sendiri Bina Aplikasi Web Ajax anda sendiri Mar 09, 2025 am 12:11 AM

      Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

      10 JQuery Fun and Games Plugin 10 JQuery Fun and Games Plugin Mar 08, 2025 am 12:42 AM

      10 Plugin Permainan JQuery yang menyeronokkan untuk menjadikan laman web anda lebih menarik dan meningkatkan keletihan pengguna! Walaupun Flash masih merupakan perisian terbaik untuk membangunkan permainan web kasual, jQuery juga boleh menghasilkan kesan yang mengejutkan, dan walaupun tidak setanding dengan permainan flash aksi tulen, dalam beberapa kes, anda juga boleh bersenang -senang di penyemak imbas anda. permainan jquery tic toe "Hello World" pengaturcaraan permainan kini mempunyai versi jQuery. Kod sumber JQuery Game Composition Crazy Word Ini adalah permainan mengisi kosong, dan ia dapat menghasilkan beberapa hasil yang pelik kerana tidak mengetahui konteks perkataan. Kod sumber JQuery Mine Sweeping Game

      Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Mar 18, 2025 pm 03:12 PM

      Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

      Kandungan kotak beban secara dinamik menggunakan ajax Kandungan kotak beban secara dinamik menggunakan ajax Mar 06, 2025 am 01:07 AM

      Tutorial ini menunjukkan membuat kotak halaman dinamik yang dimuatkan melalui AJAX, membolehkan Refresh Instant tanpa tambah nilai halaman penuh. Ia memanfaatkan JQuery dan JavaScript. Fikirkannya sebagai loader kotak kandungan gaya Facebook tersuai. Konsep Utama: Ajax dan JQuery

      JQuery Parallax Tutorial - Latar Belakang Header Animasi JQuery Parallax Tutorial - Latar Belakang Header Animasi Mar 08, 2025 am 12:39 AM

      Tutorial ini menunjukkan cara membuat kesan latar belakang paralaks yang menawan menggunakan jQuery. Kami akan membina sepanduk header dengan imej berlapis yang mewujudkan kedalaman visual yang menakjubkan. Plugin yang dikemas kini berfungsi dengan JQuery 1.6.4 dan kemudian. Muat turun

      Cara Menulis Perpustakaan Sesi Kurang Kuki Untuk JavaScript Cara Menulis Perpustakaan Sesi Kurang Kuki Untuk JavaScript Mar 06, 2025 am 01:18 AM

      Perpustakaan JavaScript ini memanfaatkan Window.Name Property untuk menguruskan data sesi tanpa bergantung pada kuki. Ia menawarkan penyelesaian yang mantap untuk menyimpan dan mengambil pembolehubah sesi di seluruh pelayar. Perpustakaan menyediakan tiga kaedah teras: sesi

      See all articles