Cmi: jQuery

顯示具有 jQuery 標籤的文章。顯示所有文章

2018年8月28日星期二

[ jQuery ] tooltipster

http://iamceege.github.io/tooltipster/#demos

http://iamceege.github.io/tooltipster/#options

2017年10月30日星期一

[ JQuery ] Jquery bxSlider參數說明


$(document).ready(function(){
  $('ul').bxSlider({
    alignment: 'horizontal',        // 'horizontal', 'vertical' - 幻燈片方向
    controls: true,                 // 設置是否上一個/下一個按鈕是否顯示
    speed: 500,                     // 速度，單位為毫秒
    pager: true,                    // 是否顯示頁碼
    pager_short: false,             // 是否顯示短頁碼 (1/4)
    pager_short_separator: ' / ',   // 用於區分短頁碼的文本
    margin: 0,                      // 間隔
    next_text: 'next',              // 下一個文本
    next_image: '',                 // 下一個圖片
    prev_text: 'prev',              // 上一個圖片
    prev_image: '',                 // 上一个图片
    auto: false,                    // 是否自動切換
    pause: 3500,                    // 停留時間 (auto mode only) 
    auto_direction: 'next',         // 向那個方向移動 (auto mode only)
    auto_hover: true,               // 設置鼠標懸停的時候是否暫停
    auto_controls: false,           // 設置是否顯示 'start'/'stop' 按鈕 (auto mode only)
    ticker: false,                  // determines if slideshow will behave as a constant ticker
    ticker_controls: false,         // determines if 'start'/'stop' ticker controls are displayed (ticker mode only)
    ticker_direction: 'next',       // order in which slides will transition (ticker mode only)
    ticker_hover: true,             // determines if slideshow will pause while mouse is hovering over slideshow
    stop_text: 'stop',              // 'stop' 按鈕文本
    start_text: 'start',            // 'start' 按鈕文本
    wrapper_class: 'bxslider_wrap', // 外面 wapper 的 DIV 的 class 名字
    InfiniteLoop: true              //最後一張點擊"下一步"，反覆輪回第一張(true);最後一張停住，不要反覆輪回第一張(false)
  });
});

2016年10月30日星期日

jQuery Mobile 是創建移動web 應用程序的框架。
jQuery Mobile 適用於所有流行的智能手機和平板電腦。
jQuery Mobile 使用HTML5 和CSS3 通過盡可能少的腳本對頁面進行佈局。

jQuery Mobile 實例
通過實例來學習！在W3School，您可以找到大量jQuery Mobile 實例，並親自進行測試。
jQuery Mobile 實例

jQuery Mobile 參考手冊
在W3School，您將找到包含所有jQuery Mobile 屬性的完整參考手冊。
jQuery Mobile 數據參考手冊

出處：http://www.w3school.com.cn/jquerymobile/

2016年10月24日星期一

[ jQuery ] slick響應式輪播

充分響應。其容器計量秤。
每斷點單獨的設置
使用CSS3時可用。
桌面拖動鼠標
無限循環
用箭頭鍵導航完全訪問
添加，刪除，過濾器和unfilter幻燈片
自動播放，點，箭頭，回調，等...

單個項目Single Item、
多個項目 Multiple Items、
響應顯示 Responsive Display、
可變寬度 Variable Width、
自適應高度 Adaptive Height、
數據屬性設置 Data Attribute Settings、
中心模式 Center Mode、
延遲加載 Lazy Loading、
自動播放 Autoplay、
褪色 Fade、
添加和刪除 Add & Remove、
過濾 Filtering、
大圖小圖同步輪撥 Slider Syncing

2016年9月20日星期二

[ jQ ] jQuery Easing 1.3

jQuery Easing 擴充了 jQuery 中的動畫效果
http://gsgd.co.uk/sandbox/jquery/easing/
Example
點擊後 easeOutBounce 動態移動方法。
jQuery 的 easing 例子
jQuery 的 easing 可以讓動畫看起來好了很多。
查看各種寬鬆政策設置將如何看待不同的影響

easeIn會影響你的開頭動畫，和easeOut會影響你的動畫的結束。

jquery.easing.1.3.js

2016年6月29日星期三

[ jQuery ] lazy 延遲載入套件

lazy 延遲載入套件

2016年5月15日星期日

[ jQuery ] 常用的彈跳視窗

colorbox
http://www.jacklmoore.com/colorbox/

fancybox
http://fancybox.net/

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

2016年4月28日星期四

[ jQuery ] lazy 圖片延遲載入

http://jquery.eisbehr.de/lazy/

HTML
<img class="lazy" data-src="images/1.jpg" />
<img class="lazy" data-src="images/2.jpg" />
<img class="lazy" data-src="images/3.jpg" />
<img class="lazy" data-src="images/4.jpg" />
<img class="lazy" data-src="images/5.jpg" />
<img class="lazy" data-src="images/6.jpg" />
<img class="lazy" data-src="images/7.jpg" />
<img class="lazy" data-src="images/8.jpg" />
<img class="lazy" data-src="images/9.jpg" />
<img class="lazy" data-src="images/0.jpg" />

JavaScript
$(function() {
$('.lazy').lazy();
});

2016年4月20日星期三

回到頂部

2016年4月10日星期日

彈跳視窗

lightbox
http://lokeshdhakar.com/projects/lightbox2/

Colorbox
http://www.jacklmoore.com/colorbox/

fancybox
http://fancybox.net/

2016年3月29日星期二

jQuery日期選擇器

http://felicegattuso.com/projects/datedropper/
Datedropper是一個jQuery日期選擇器插件。

2016年3月27日星期日

滾動後logo和header變小後至頂

1) http://demo.grnet.com.tw/dinggo-tea/homepage/old/01/index.html
2) http://demo.grnet.com.tw/TAS/homepage/
3) http://demo.grnet.com.tw/sifar/homepage/page.html
4) http://demo.grnet.com.tw/artificial/demo/

2016年2月16日星期二

[ jQuery ] Nivo Slider 過場廣告輪播

$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});

以下是效果參數
effect: ' ',
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

nivoSlider settings

Custom Transitions per Slide
每張幻燈片的自定義轉場
"data-transition"
例如:
<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />
<img src="images/slide2.jpg" alt="" data-transition="fade" />
<img src="images/slide3.jpg" alt="" data-transition="slideInRight" />

2015年10月15日星期四

jQuery 教程

jQuery UI
http://jqueryui.com/

菜鳥教程 - 學的不僅是技術，更是夢想！
http://www.runoob.com/

jQuery UI的API文檔|菜鳥教程
http://www.runoob.com/jqueryui/jqueryui-api.html

2015年9月29日星期二

OWL Carousel 支援手勢功能

OWL Carousel
觸摸啟用jQuery插件，可以讓你創建漂亮的響應式輪撥。

產品特點：

響應
觸摸事件
鼠標滑動事件
完全可定制
選擇項目數要顯示
多個滑塊
CSS3 3D轉換
Custimizable控制
JSON
自定義事件
有用的回調

Tested on IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, iPhone, iPad, Chrome on Google Nexus

更多DEMO

如何使用

自定義參數

2015年9月18日星期五

gmap3

gmap3
http://gmap3.net/en/pages/19-demo/

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=ja"></script>

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=tw"></script>

language code	language name	v2	v3
ar	ARABIC	Yes	Yes
eu	BASQUE	No	Yes
bg	BULGARIAN	Yes	Yes
bn	BENGALI	Yes	Yes
ca	CATALAN	Yes	Yes
cs	CZECH	Yes	Yes
da	DANISH	Yes	Yes
de	GERMAN	Yes	Yes
el	GREEK	Yes	Yes
en	ENGLISH	Yes	Yes
en-AU	ENGLISH (AUSTRALIAN)	No	Yes
en-GB	ENGLISH (GREAT BRITAIN)	No	Yes
es	SPANISH	Yes	Yes
eu	BASQUE	Yes	Yes
fa	FARSI	No	Yes
fi	FINNISH	Yes	Yes
fil	FILIPINO	Yes	Yes
fr	FRENCH	Yes	Yes
gl	GALICIAN	Yes	Yes
gu	GUJARATI	Yes	Yes
hi	HINDI	Yes	Yes
hr	CROATIAN	Yes	Yes
hu	HUNGARIAN	Yes	Yes
id	INDONESIAN	Yes	Yes
it	ITALIAN	Yes	Yes
iw	HEBREW	Yes	Yes
ja	JAPANESE	Yes	Yes
kn	KANNADA	Yes	Yes
ko	KOREAN	Yes	Yes
lt	LITHUANIAN	Yes	Yes
lv	LATVIAN	Yes	Yes
ml	MALAYALAM	Yes	Yes
mr	MARATHI	Yes	Yes
nl	DUTCH	Yes	Yes
nn	NORWEGIAN NYNORSK	Yes	No
no	NORWEGIAN	Yes	Yes
or	ORIYA	Yes	No
pl	POLISH	Yes	Yes
pt	PORTUGUESE	Yes	Yes
pt-BR	PORTUGUESE (BRAZIL)	Yes	Yes
pt-PT	PORTUGUESE (PORTUGAL)	Yes	Yes
rm	ROMANSCH	Yes	No
ro	ROMANIAN	Yes	Yes
ru	RUSSIAN	Yes	Yes
sk	SLOVAK	Yes	Yes
sl	SLOVENIAN	Yes	Yes
sr	SERBIAN	Yes	Yes
sv	SWEDISH	Yes	Yes
tl	TAGALOG	No	Yes
ta	TAMIL	Yes	Yes
te	TELUGU	Yes	Yes
th	THAI	Yes	Yes
tr	TURKISH	Yes	Yes
uk	UKRAINIAN	Yes	Yes
vi	VIETNAMESE	Yes	Yes
zh-CN	CHINESE (SIMPLIFIED)	Yes	Yes
zh-TW	CHINESE (TRADITIONAL)	Yes	Yes

訂閱：文章 (Atom)

2018年8月28日 星期二

2017年10月30日 星期一

2016年10月30日 星期日

2016年10月24日 星期一

2016年9月20日 星期二

2016年6月29日 星期三

2016年5月15日 星期日

2016年4月28日 星期四

2016年4月20日 星期三

2016年4月10日 星期日

2016年3月29日 星期二

2016年3月27日 星期日

2016年2月16日 星期二

2015年10月15日 星期四

2015年9月29日 星期二

2015年9月18日 星期五