在線前端代碼展示分享神器-JSFiddle


1. 前言

  在寫博客時,感覺博客園自帶的代碼展示分享能力稍微弱了一點,這個時候突然發現了jsFiddle這樣一個在線前端代碼展示分享神器。

2.  簡介

        

jsFiddle 主要分為3個部分:代碼編輯區、菜單和功能區

2.1    代碼編輯區

2.1.1 Html

在html編輯區輸入的代碼會被會被放在<body>和</body>之間。因此請不要輸入諸如doctype,head之類的標簽,因為這些標簽會在后台自動生成。

2.1.2 css

在css編輯區輸入的代碼會以內部樣式表的形式放置在head部分。

2.1.3 javascript

在javascript編輯區輸入的代碼會被放在head的Script標簽當中。也就是head的 <script type="text/javascript"> 和 </script>.

2.1.4 result

這是一個只讀區域,用於顯示程序運行的結果。只需點擊run就可以查看結果。

草圖(Draft):只有注冊用戶才能使用。當前的運行結果會被保存在一個草圖當中。可以通過 http://jsfiddle.net/draft/訪問。草圖的最重要的作用就是用於檢測瀏覽器的兼容性(必須登陸才能查看)。

2.2 菜單

菜單分成保存前和保存后兩種狀態

 

保存前的菜單

 

保存后的菜單

Save:

將當前編輯的內容保存到服務器上,方便下次調用和分享。如果你只是想測試用的話是不需要保存的。

Update

將當前的狀態保存為一個版本。類似於版本控制,會在URL后面加上一個數字。之前的版本還會存在,方便后期調試。

Fork:

把現在的項目復制到一個新的文件當中。

Base:

出現在沒有進行Update的項目當中,表明這是最初效果,只是一個標識符。

Set as base:

出現在非初始版本的項目中。可點擊,作用是把當前版本變成最初版本,原先的初始版本會被刪除。

Share:

提供了分享的三種形式。

Run:

點擊運行代碼,結果會在result中顯示。

Debug on mobile:

在手機端調試。

Tidyup:

格式化代碼。

JSHint:

調試js代碼。

2.3   功能區

2.3.1  Frameworks & Extensions:

第一個下拉菜單中列出了所有支持的框架,選擇一個框架之后會在<head>中引入此框架。如果選擇No-Library則不會加載任何框架。

第二個下拉菜單選擇加載框架的時間。(下面四種情況為個人理解,不保證正確)

onLoad:

加載完頁面當中的所有元素之后運行。

onDomReady:

加載完頁面所有的節點之后運行。

no wrap – in <head>:

在head中引入框架。(按順序執行)。

  no wrap – in <body>:

在body中引入框架。(按順序執行)。

2.3.2  Fiddle options

Title:

在你的個人中心中顯示的項目名稱。

Description:

在你的個人中心中顯示的項目描述。

Normalized CSS:

如果選擇了這個復選框就會使用網站提供的 normalize.css(用於移除默認樣式)。

Body Tag:

為body添加屬性,比如:<body class="dark_ui">

DTD

選擇標志符的語法規則,默認為html5

Framework <script> attribute:

可以為Script標簽添加屬性。比如<script type="text/javascript"src="/js/lib/someframework.js" {attributes}></script>

2.3.3 External Resources

添加外部資源。

3. 分享代碼

3.1 分享代碼的URL格式:

http://{url of the fiddle}/embedded/[{tabs}/{style}]]/

tabs:的默認展示順序:js,resources,html,css,result

注:resource表示外部資源,如果沒有引用外部資源則這一項不顯示。

Skin:選擇展示時所使用的皮膚。

3.2 獲取代碼

可以通過點擊share按鈕得到分銷的三種方式

 

3.3 案例

現在使用一個在線小案例(http://jsfiddle.net/pgg2ymm/ZdVX8/)進行演示

默認樣式

<iframe  src="http://jsfiddle.net/pgg2ymm/ZdVX8/embedded/" allowfullscreen="allowfullscreen" frameborder="0" style="width:100%;height:300px;"></iframe>

改變展示順序

<iframe  src="http://jsfiddle.net/pgg2ymm/ZdVX8/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0" style="width:100%;height:300px;"></iframe>

 移除部分展示項

<iframe  src="http://jsfiddle.net/pgg2ymm/ZdVX8/embedded/js,result/" allowfullscreen="allowfullscreen" frameborder="0" style="width:100%;height:300px;"></iframe>

 更換皮膚

<iframe  src="http://jsfiddle.net/pgg2ymm/ZdVX8/embedded/js,result/presentation/" allowfullscreen="allowfullscreen" frameborder="0" style="width:100%;height:300px;"></iframe>

4. 結束語

 如果你想了解更多關於JSFidle的知識請參看官方說明文檔http://doc.jsfiddle.net/index.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM