jQuery TWzipcode Plugin With Bootstrap 4 Form

TWzipcode 是一個由台灣人開發的多層次選單,可選城市、地區及郵遞區號,非常的好用,快給台灣人鼓勵鼓勵

台灣郵遞區號插件:https://github.com/essoduke/jQuery-TWzipcode

其實很早就再使用這插件了,但之前用的是舊版本,以前使用方式如下方代碼,會自動生成城市及地區的下拉選單及一個郵遞區號的文字輸入框,這樣使用方式與Bootstrap的表單結構不太相容

今天看到 v1.7.14 版本,增加了自訂HTML結構的用法,馬上來試試看,以下是HTML的用法:

果真可以相容於 Bootstrap ,這版本實在太棒了,完全跟 Bootstrap 表單融為一體,感謝作者,以下也分享我的代碼

[……]

閱讀更多

jQuery TinyMCE remove html head body tag in textarea

TinyMCE Editor 是一個很常見的所見及所得文字編輯器,功能很強大,並提供很多插件來擴展編輯器功能,但安裝4.8.2版本時,在textarea中會自動包覆<HTML><head><body>等標籤,即便未輸入內容,然然會存入 <HTML><head><body>等標籤 。

解決方法

非常簡單,在初始 TinyMCE 的時候不要使用 fullpage 這個 plugin 舊可以了。

參考:

jQuery TinyMCE Editor

[……]

閱讀更多

jQuery Plugin 輕量又強大的POPUP插件,文件還蠻完整的

Demo

http://dimsemenov.com/plugins/magnific-popup/

文件

http://dimsemenov.com/plugins/magnific-popup/documentation.html[……]

閱讀更多

jQuery Form data to Object

jQuery Serialize Object

取得所有表單資料,目前試過唯一能轉多維表單物件的,使用簡單,找到感覺得救了
Form data to Object jQuery

Example:

<form id="contact">
<input name="user[email]" value="jsmith@example.com">
<input name="user[pets][]" type="checkbox" value="cat" checked>
<input name="user[pets][]" type="checkbox" value="dog" checked>
<input name="user[pets][]" type="checkbox" value="bird">
<input type="submit">
</form>
$('form#contact').serializeObject();
//=> {user: {email: "jsmith@example.com", pets: ["cat", "dog"]}}
$('form#contact').serializeJSON();
//=> '{"user":{"email":"jsmith@example.com","pets":["cat","dog"]}}
'

[……]

閱讀更多

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]

閱讀更多

CKEditor 4 粗體、斜體、底線、顏色沒有效果的原因及解決方案

在CKEditor 4 編輯器中,設定粗體,回到前端秀出來的文字粗體、斜體、底線都沒有效果,
應該是在做前端網站設計,都習慣用reset.css來重新設置每個標籤的樣式
而在CKEditor 4 我們將某段文字設定為粗體,
切到原始碼來看,CKEditor預設將該用<strong></strong>包裹,用HTML標籤產生粗體效果,

<strong>HELLO WORLD!!</strong>

不過<strong>已經被reset.css重設了,所以在前端<strong>並起不了粗體作用,
在網路上找到一個方法,在CKEditor 4 的config.js設定檔中加上

config.coreStyles_bold = { element: ‘span’, styles: { ‘font-weight’ : ‘bold’ } };

這時候粗體就會用<span>來包裹透過CSS來產生粗體效果,而不是<strong>標籤:

<span style=”font-weight:bold;”>HELLO WORLD!!</strong>

這樣就正常顯示了粗體了,粗體、斜體、底線方法同理:

config.coreStyles_bold = { element: ‘span’, styles: { ‘font-weight’ : ‘bold’ } };
config.coreStyles_italic = { element: ‘span’, styles: { ‘font-style’ : ‘italic’ } };
config.coreStyles_underline = { element: ‘span’, styles: { ‘text-decoration’ : ‘underline’ } }

若有更好的作法再請各位大大提出囉~^^

自己的題目自己解

使用reset.css來重設所以HTML預設樣式
有reset就有unreset就是反重設HTML預設樣式
跟reset.css一樣,網路上有流傳很多版本,
可以參考一下下列網址版本。
https://github.com/binarystash/unreset-css
其優點是他有設定class,也就是說我可以指定容器的去做反重設HTML預設樣式的動作

例:
<div class=”unreset”>
     <strong>HELLO WORLD!!</strong>
</div>

這樣就OK囉~這樣即使是使用<stong>也一樣有效果

針對顏色的部份,如果你有習慣下列這方式設定整個網頁的預設樣式

body *{
color:#000;
text-decoration:none;
font-family:  “微軟正黑體”,Arial, “新細明體”;
}
可能要建議你把color這樣式拿掉,才不會影響CKEditor編輯好的文字秀在前端
顏色不會變的問題

[……]

閱讀更多

jQuery 5個jQuery UI 的 framework

Google直接翻譯的~英文好的就自己去下面網址看囉
原文原作者
http://www.sitepoint.com/top-5-jquery-ui-alternatives/

經常使用的UI控件庫,我們的項目是一個更好的選擇,而不是隨機收集的jQuery插件來自全國各地的網絡。事實上,大多數的jQuery小部件不彼此結合良好。他們可能缺乏的功能,包含bug並且需要大量的時間來正確地放入一個真正的項目。

在另一方面,用戶界面庫提供專業開發的,功能豐富的小工具無縫集成相互搭配,提供一致的,高質量的外觀和感覺。此外,所有的部件都在多個設備和瀏覽器進行測試,以保證最大的兼容性。
今天,最流行 ​​的基於jQuery的插件庫的官方jQuery UI的項目。它是免費使用,並有很好的一套有用的成分。但有一個問題,雖然-它的發展速度太慢,還是有很多“失踪”的小部件,並在現代Web開發所需的功能。你可以看到最值得注意的列舉如下:
  • 數據網格
  • 樹視圖
  • 組合部件
  • 拾色器
  • 窗體小部件
  • 圖表
  • 分路器/佈局/面板
  • 文件上傳
  • RTL支持
  • 驗證
  • 全球化/本地化
看來,jQuery用戶界面遠遠落後於不斷增長的用戶需求。其實,也可以是只適合非常基本的東西。如果我們需要一些更先進,功能豐富了我們的項目,我們必須找到更好的替代品。而這正是我們要做的這篇文章。我們要探討的最流行的和強大的基於jQuery UI庫/框架。但是,在我們繼續之前,讓我們來看看使用這些替代品的優劣。
優點
  • 開源許可證
  • 專業的技術支持(商業執照)
  • 窗口小部件的組合和某種MV *框架(內置或外部)
  • 與技術,如PHP和ASP.NET整合
  • 同樣的外觀在所有部件和組件
  • 主題支持
  • 通用代碼庫
  • 功能豐富的小工具
  • 新功能定期補充
  • 在不同的瀏覽器,平台和設備的兼容性
缺點
  • 許可 – 你需要獲得商業許可,如果您打算使用利潤特定庫
  • 使用這種功能豐富的庫可以壓倒簡單的項目
正如你所看到的,如果你的項目需要複雜的功能,那麼它的更好的使用,而不是試圖統一從這裡和那裡收集不一致的插件,下面的一些小工具庫。
重要提示:在這篇文章中我不會對jQuery的用戶界面。這是一個偉大的圖書館,它肯定有它的球迷和追隨者。請不要誤解我的意思。我只是說,它不是功能不夠豐富更複雜的和雄心勃勃的項目。就這樣。而且,不要太計較在此列表中的順序。有某種層次的複雜性方面的,但是這是我的感覺它必須是。您的建議與我的不同。如果是的話,沒有問題。事實上,任何一個庫,可以在第一取決於你的項目的要求。說“五大”我的意思是所有的人,作為一個整體,你會選擇為您的項目是所有關於你的要求最好的,哪一個。

ZinoUI

ZinoUI是一個緊湊的,基於jQuery,UI庫。它包括大約30 WAI-ARIA的訪問控件和交互。這是一個偉大的一套跨平台的,主題化的組件充分利用最佳實踐和先進的JavaScript工藝。

一些有趣的組件和功能包括:
  • JS圖表控件 – 一個JavaScript圖表和圖形庫,用於創建交互性和可訪問的數據可視化。
  • SVG圖形工具 – 微庫繪製二維矢量圖形。
  • 帆布微型庫 – 與HTML5的Canvas元素工作的實用程序。創建2D圖形,文本和位圖圖像上的動態。
  • 數據源 – 實時數據集,包括XML,JSON和本地JavaScript數組輕鬆的工作。
  • PHP服務器封裝器 – 如果你更喜歡使用PHP,而不是JavaScript的,那麼這些傭工會派上用場。它們允許你使用ZinoUI部件在任何PHP框架,應用程序或文件。
  • 數據表,樹視圖,幻燈片放映,上傳的功能,等等。
ZinoUI採用各種W3C的建議,例如WAI-ARIA,SVG和HTML5的畫布。它支持所有主流瀏覽器,並利用HTML5的特性與優雅的回退,如果不支持他們。ZinoUI網站提供完整的API文檔,以及實例的每個組件。
一些這個庫的弱點包括缺少支持的RTL,驗證和全球化的特點。也缺乏對主題的支持 – 只有四個提供主題和無主題的建設者。

jQuery EasyUI

jQuery的EasyUI提供易於使用的組件為建設現代化,互動,跨瀏覽器的JavaScript應用程序。這是一個完整的系列功能豐富的小工具和互動,建立在流行的jQuery核心和HTML5之上的。用戶可以使用它們放在一起,或只是使用他們想要的組件。

下面是一些組件和功能:
  • 面板,佈局,窗口 – 窗口小部件的UI設計
  • DataGrid中,PropertyGrid中
  • 樹的TreeGrid
  • ComboGrid,ComboTree – 先進的組合部件
  • 形成,特蒐 – 小部件與工作方式
  • 梅薩 – 通知窗口部件
  • ValidateBox – 小部件驗證功能
  • RTL的支持(通過擴展名)
  • 本地化
jQuery的EasyUI也有很好的一套準​​備使用的主題和主題建設者。
至於缺點,我們可以提到失踪的圖表和上傳功能
jQuery的EasyUI的網站,你可以找到很多教程和演示以及完整的API文檔。也有一些不錯的擴展,你會發現非常有用,例如可編輯的DataGrid,可編輯的TreeView,RTL的支持,以及更多。

jQWidgets

jQWidgets是建立專業的網絡應用程序和移動應用程序基於jQuery的全面框架。它完全建立在開放標準和技術像jQuery,HTML5,CSS,JavaScript和SVG。jQWidgets包括基於jQWidgets框架從頭開始建立30多個WAI-ARIA的訪問UI組件。這不是jQuery的UI工具包的修改版本,沒有任何依賴它。
組件和功能:
  • jqxScrollView – 窗口小部件內容滑動。
  • jqxDocking – 小工具,它允許你管理多個窗口。
  • jqxTreeMap – 一個獨特的小工具來顯示分層數據在一組嵌套的矩形。
  • jqxListMenu – 窗口小部件進行嵌套列表。
  • jqxColorPicker
  • jqxScrollBar – 滾動條控件,它可以把任何枯燥/醜陋的滾動條變成美麗的地方之一。
  • jqxValidator – 驗證工具。
  • jqxDataAdapter – 一個jQuery插件簡化了數據綁定,數據格式和數據操作。
  • jqxResponse – 一個插件,它提供了有關操作系統,瀏覽器,瀏覽端口,設備類型和喜歡觸摸的支持,大小,SVG,Canvas和VML支持設備的常見功能的信息。
  • 更多…
亮點:
  • RTL支持
  • 搜索引擎友好
  • 易PHP與ASP.NET的集成
  • 國際
  • MVVM支持(KnockoutJS整合)
  • Web標準兼容
  • 優化的性能。jQWidgets具有體積小,高度模塊化和可擴展的。各個部件和主題可以按需加載,優化下載時間和節省內存。
  • jQWidgets正在演變迅速。新的部件和功能會定期添加
  • 平台,瀏覽器和設備的自主性和兼容性。沒有必要把錢花在不同的設備和瀏覽器的測試時間。該jQWidgets框架自動檢測設備的類型,功能和瀏覽器版本,並調整為最佳的渲染和最佳的用戶體驗的內部行為。
jQWidgets帶有多個內置的準備使用和跨瀏覽器兼容的主題。主題Builder是一個功能強大的在線工具,可以幫助你快速創建主題,為您的應用程序的基礎上jQWidgets的用戶界面。此外,您可以從現有的​​主題導入的顏色,調整它們的結果保存為一個新的主題。
提供了多個代碼示例,以加速你的學習。所有試玩遊戲提供完整的源代碼,並在多個不同的主題呈現。也有完整的文檔,並為每個小部件的API參考。

Kendo UI

Kendo UI是一個現代化的,功能豐富的架構,web和移動應用程序的開發。它包括三個強大小部件和相互作用的電話機,其中,可以單獨使用或組合成一個單一的包。

Kendo UI Web用戶界面

這組包含了你需要建立現代網站的一切。這是一個從高端的部件和功能強大的框架相結合。
有些組件和功能:
  • ListView中 – 為您列出了不同的看法。
  • 多選
  • 日曆 – 內嵌日曆小工具。
  • 編輯器 – 上即時編輯HTML。
  • 調度 – 時間和任務安排部件。
  • 數據源
  • 模板
  • MVVM支持 – 劍道的UI提供了一個高性能的模型 – 視圖 – 視圖模型(MVVM)的框架,它允許你管理複雜的HTML和JavaScript的UI。它不是必需的,你可以隨時使用你喜愛的圖書館 – 就像BackboneJS – 與劍道的UI,但劍道的UI MVVM提供了一個高性能,支持綁定選項,出來的現成權利。
  • 效果 – 一組基本的效果。
  • RTL支持
  • 驗證
  • 全球化

Kendo UI 的用戶界面手機

劍道的UI Mobile是用於構建原生狀的移動應用程序和網站的一種先​​進的移動框架。它的包裝,方便使用的基於jQuery的小部件,並內置豐富的組件和類動力學滾動,自動佈局系統功能。它支持的iOS,安卓,Blackbery和WP8。

Kendo UI 的UI DataViz公司

與劍道的UI DataViz公司可以創建在任何時候交互式數據可視化。它使用SVG,並為您帶來漂亮的UI控件,包括jQuery的圖表,儀表,條碼和QR碼的整個集合。劍道的UI DataViz公司採用全自動的硬件加速所有的動畫和渲染,最大限度地提高性能和降低對CPU資源的影響。
劍道的UI提供了廣泛的服務器端傭工。ASP.NET,PHP和JSP開發人員可以無需惹的JavaScript打造現代化的HTML5應用程序。他們在自己喜歡的服務器端語言簡單的代碼,並且劍道的UI渲染JavaScript的需要,以增強其部件和框架功能。
劍道的UI不僅提供很多,準備使用的主題,而且先進的主題建設者為每個單獨的一套。
劍道的UI具有全面的文檔,包括API參考,入門節,我該如何?配方,教程和演示。您還可以使用的UI劍道道場 – 旨在幫助你起床,並通過引導教程與劍道的UI運行迅速和生活,可執行樣一個互動的環境。

Wijmo

Wijmo是基於jQuery UI和jQuery Mobile的高度發達的小部件工具包。Wijmo部件被用於客戶端Web開發進行了優化,並利用jQuery的權力優越的性能和易用性。所有Wijmo部件都配備了超過30的主題和支持的ThemeRoller。

某些功能和組件:
  • 與KnockoutJS,AngularJS,Breeze.js整合
  • RTL支持
  • 圖表和儀表
  • 編輯
  • DatePager
  • EventsCalendar
  • 圖庫
  • 燈箱
  • 織帶
  • SuperPanel
  • 視頻插件
  • 精靈
  • 動畫
  • 本土化與全球化
Wijmo提供了一組小部件,用於手機和網絡。它利用在所謂的自適應Widget框架。這意味著,所有使用的部件會自動適應的jQuery UI或jQuery Mobile的環境。只需換出的jQuery用戶界面的jQuery Mobile,您可以輕鬆地將您的小部件是可移動的,而無需更改一行代碼!
Wijmo對每個部件進行全面的用戶指南和API參考。也有許多演示和例子。
風格你自己的形式從地上爬起來使用HTML5和CSS3 -可學習的CSS的形成過程是在這裡,它是免費註冊一個試

[……]

閱讀更多

jQuery img load not working 解決圖片load事件失效問題

jQuery img load not working
解決圖片load事件失效問題

$(‘img’).load(function() {
alert(‘img_loaded’);
}).each(function() {
  if(this.complete) $(this).load();
});[……]

閱讀更多

jQuery javascript關閉 fancybox視窗

由fancybox視窗中關閉:

<a href="javascript:parent.$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	parent.$.fancybox.close();
})
</script>

由主頁上關閉fancybox視窗:

<a href="$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	$.fancybox.close();
})
</script>

 [……]

閱讀更多

jQuery settimeout 用 .delay()後執行指定function jquery after delay call function

jQuery .delay()後執行指定function  jquery after delay call function

function test(){
           alert(‘hello’);
}
$(‘body’).delay(2000).queue(test);[……]

閱讀更多