2013年11月26日 星期二

讓人癢眼的 jQuery Image Gallery: zAccordion



癢眼又癢手的Gallery !
  • Old School Diner

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.

  • A Day at the Pool

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.

  • Fill it Up!

    Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.

  • Going for a Drive

    Phasellus sed lectus nisl.


zAccordion可以自動展開、指定延長時間。圖像滑動美感，也可以透過click來選擇圖像。半露的圖像，指涉者一種具有高度「參與性」誘惑力的互動文本呈現。

1.請於<head>xxx</head>之間或<body>之後置入下列jQuery程式：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.zaccordion/js/jquery.zaccordion.js"></script>
2.請於<body>之後置入下列jQuery驅動語法：
<script>
$(document).ready(function() {
$("#splash").zAccordion({
timeout: 6500,
speed: 600,
slideClass: 'slide',
animationStart: function () {
$('#splash').find('li.slide-previous div').fadeOut();
},
animationComplete: function () {
$('#splash').find('li.slide-open div').fadeIn();
},
buildComplete: function () {
$('#splash').find('li.slide-closed div').css('display', 'none');
$('#splash').find('li.slide-open div').fadeIn();
},
startingSlide: 0,
slideWidth: 600,
width: 720,
height: 400,
auto: true
});
});
</script>
3.請於<body>之後置入下列 CSS：
<style>
#splash div {-moz-border-radius:5px;-webkit-border-radius:5px;background-color:rgba(0,0,0,0.4);border-radius:5px;bottom:0;margin:10px;padding:5px;position:absolute;z-index:10;}
#splash h2 {font-size:1.4em;margin-bottom:5px; font-family: 微軟正黑體;}
#splash strong {color:white;font-size:1.21em;text-shadow:none; font-family: 微軟正黑體;}
#splash p {color:white;font-size:1.03;line-height:1.2em;margin:0!important;text-shadow:none; font-family: 微軟正黑體;}
</style>
4.於想要呈現的編輯區置入下列 HTML：
<ul id="splash">
<li> <img
src="第一張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
<li> <img
src="第二張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
<li> <img
src="第三張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">標說內文。</p>
</div>
</li>
<li> <img
src="第四張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
</ul>


語法出處：zAccordion
1 則留言:

2013年11月15日 星期五

把紛雜的訊息收納起來：Accordion


jQuery UI 程式寫作練習
讓讀者快速掌握內容大綱

Accordion
把訊息打包乾淨的好方法。

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.




請把下列jQuery程式碼置入到<head>xxx</head>之間或<body>之後：

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
請把下列驅動碼寫入到<head>xxx</head>之間或<body>之後：
<script>
  $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content"
    });
  });
  </script>

請把下列 HTML 語法寫入到欲出現之編輯區域：
請複製CSS並置於<head>xxx</head>之間或<body>之後：

<style>
.accclass122801 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 1.6;
}
</style>



請將html置於欲編輯之處：

<div id="accordion">
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 1</h3>
<div>
<div class="accclass122801">內文一<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 2</h3>
<div>
<div class="accclass122801">內文二<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 3</h3>
<div>
<div class="accclass122801">內文三<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 4</h3>
<div>
<div class="accclass122801"> 內文四。<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 5</h3>
<div>
<div class="accclass122801"> 內文五。<br>
</div>
</div>
</div>

原始語法出處：jQuery Accordion

影音教學：





2017年版：進階使用



驅動程式更動範例


<script>
$(function() {
$( ".accordion0828" ).accordion({
heightStyle: "content",
active: 2,
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" },
classes: {
"ui-accordion": "highlight uiacchange",
"ui-accordion-header": "ui-corner-top",
"ui-accordion-header-collapsed": "ui-corner-all",
"ui-accordion-content": "ui-corner-bottom",
"ui-accordion-content-active": "uacachange"
}

});
});
</script>


<style>

.uiacchange {
width: 70%;
}

.uacachange:hover {
background-color: rgba(255, 237, 151, 0.4);
}

</style>


範例呈現

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.




更動 accordion 中互動變化的 icon

$( ".selector" ).accordion({
  icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
});


紅字部分是所選擇icon的名稱。
更多icon選擇的選項，如下圖，請到此參看。Click!!




格區域的高度選項

$( ".selector" ).accordion({
  heightStyle: "content"
});

說明：

"auto": All panels will be set to the height of the tallest panel.
"fill": Expand to the available height based on the accordion's parent height.
"content": Each panel will be only as tall as its content.



使某一個格區域預先設定 開啟

$( ".selector" ).accordion({
  active: 2
});

說明：

0是第一個。


使 Accordion 布局變化的 class 使用，以下 default 值：

$( ".selector" ).accordion({
  classes: {
    "ui-accordion": "highlight",
    "ui-accordion-header": "ui-corner-top",
    "ui-accordion-header-collapsed": "ui-corner-all",
    "ui-accordion-content": "ui-corner-bottom"
  }
});


說明：

ui-accordion: The outer container of the accordion.
ui-accordion-header: The headers of the accordion. The active header will additionally have a ui-accordion-header-active class, the inactive headers will have a ui-accordion-header-collapsed class.
ui-accordion-content: The content panels of the accordion. The active content panel will additionally have a ui-accordion-content-active class.









沒有留言:

2013年11月13日 星期三

浮動的導覽列： 〈回到頁首〉

　回到頁首　
隨時
隨地
按一下
就回到頁首
請看右下方浮動區塊








1.請在<head>xxx</head>之間或<body>之後置入下列 jQuery 程式碼（課堂建議<head>xxx</head>之間）：
 <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
說明：
1.如有其他互動機制使用到這條程式，就可以不要再用了。也就是說，這條程式出現一次即可。
2.如果是用KompoZer來編輯，請放到<body>之後，以減少出錯機會。



2.請於<head>xxx</head>之間或<body>之後置入下列二區塊程式碼（課堂建議<head>xxx</head>之間）：
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
 
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>


<style>
.back-to-top {
    position: fixed;
    bottom: 5em;
    right: 15px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 1.39em;
    font-family: 微軟正黑體;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 0.5em;
    display: none;
}

.back-to-top:hover {   
    background-color: rgba(135, 135, 135, 0.50);
}
</style>

說明：
你也可以決定，往上滑之後，是不是一定要到頂。如果你把（紅字）0，改成400，那就會在從最頂部算下來400px處，停住。不會到頂。



3.請於<body>之後置入下列html文字碼：
<a href="#" class="back-to-top">　回到頁首　</a>

說明：
一、「回到首頁」，你可以改成任何你想要的文字。
二、「回到首頁」，如果寫成<img src="xxx" style="width: 160px;">，則可以變成圖像。圖像寬度要記得設。




＃原始語法出處：Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll

沒有留言:

2013年11月8日 星期五

讓更多細節跑出來的互動寫作：jQuery


使用 這種互動的寫作時機…video
互動 寫作｜按一下文字跑出更多內容來


讓
更多豐富細節秀出來 more…〔←按我〕




1.請將 jQuery 的嵌入語法套用置放於<head>xxx</head>之間（課堂建議）或<body>之後。
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>



2.在需要詳細內容出現的地方置入 Div ，內容可以是文字、影像等等各種數位媒材。再設上 style="display: none;" 讓 Div 先隱藏起來。並給上一個識別代碼 id="xxx" 。
<div id="20131108" style="display: none;">
這是各種圖文的內容，只要是數位媒材都可以。<br>
</div>



3.為那個要按下去的「地方」，設置可以互動的程式碼，上面的範例為文字 more 。
<a href="javascript: $('#20131108').slideToggle(400);">more…</a>
說明：
紅色字 #20131108 正是步驟 2 的 Div 所設的 id="20131108" 。slideToggle(400)，這400是拉下的速度，可以自行更改。






更多變化的形態 jQuery UI

隱藏之物件「跑出來」的形式，或著說形態，可以有再多的可能性。就方向而言，可以是從上、下、左、右等不同方向擇其一「跑出來」，在此，創作者是有其創作 上的空間之餘地。

呈現範例：


請 按右側選項：從 左秀出。從 右秀出，從 上秀出。從 下秀出。


圖文框（id="interpo20171203"）：




請先寫入jQuery UI程式碼於<head>xxx</head>之間：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


按下去地方的「互動程式 碼」：

onclick="  $('#interpo20171203').toggle('slide', {direction: 'left', easing: 'linear'}, 800);  "

說明：
秀出物件的方向共有四種選項：左、右、上、下  //  "left", "right", "up", "down"


HTML語法：

<div id="slit20171206">請
按右側選項：<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'left', easing: 'linear'}, 800);">從
左秀出</big>。<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'right', easing: 'linear'}, 800);">從
右秀出</big>，<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'up', easing: 'linear'}, 800);">從
上秀出</big>。<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'down', easing: 'linear'}, 800);">從
下秀出</big>。</div>
<br>
<div id="interpo20171203" style="display: none;"><br>
<span
style="text-decoration: underline; font-style: italic; color: rgb(0, 102, 0);">晴
天的顏色</span><br>
<br>
<img style="width: 560px; height: 420px;" alt=""
src="圖像網址"><br>
</div>

說明：
display: none;  這是要讓圖文DIV先行消失的css語法。


影音教學：





3 則留言:

2013年11月3日 星期日

用 CSS 搞定圖像的表現慾！


用 CSS 搞定圖像的表現慾！

圖像呈現好不好看，事關重大。用 CSS 來設定圖像的各種版面參數，真的非常簡單！
<img style="xxx" src="xxx" />
置左、置中、置右，還有框線、背景色、圓角．陰影。


互動範例

置左：style="display: block; margin-left: 0px;" 。這是網頁預設值，基本上是可以不寫的。但如果想要圖像的左邊有空白距離，則可以為 0px 填入數字。例如 6px ，則圖像左邊會有 6px 的空白距離。
置中：style="display: block; margin: 0px auto;" 。圖像會居中。如果為 0px 填入數字，例如 6px ，則圖像的上面和下面會有 6px 的空白距離。
置右：style="display: block; margin-left: auto; margin-right: 0px;" 。圖像會居右。如果為 0px 填入數字，例如 6px ，則圖像的右邊會有 6px 的空白距離。
框線：style="border: 1px solid gray;" 。圖像會有框線。1px，寬度；solid，實心線；gray，灰色。
背景色：style="padding: 7px; background-color: silver;" 。圖像與框線之間會有背景色。7px，背影色寬度；silver，灰色。

圓角、陰影框的語法，請看教學說明。這是比較新的語法，KompoZer並不支援，要用編輯器自己下語法。
超快速上手法：使kompozer




那種眼神並不可怕，
難的是你不能對之直視。
生命總有幽暗處，
承認此點，才能活得
開朗，
才會想去超越。



<style>

/* 圖像變化語法 */
.picch0129 {
-webkit-transform: rotate(3deg);
border-radius: 25px;
border: 2px solid white;
padding: 5px;
background-color: smokewhite;
-webkit-box-shadow: 2px 3px 2px 1px silver;
}


/* 基本黑體內文 */
.ironcontent0120 {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
}

/* 基本細明體文 */
.stdcontent0120 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.4;
text-align: left;
letter-spacing: 0.1em;
}

</style>


沒有留言: