Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: jQuery Mobile 的 CSS 設定說明與重點記錄：以可開闔(collapsible-set)首頁設計為例

討論區清單 文章列表
Changed By: HP
Change Date: March 22, 2012 10:17PM

jQuery Mobile 的 CSS 設定設定說明與重點ble-set)首頁設計為例apsible-set)首頁設計為例
Changed By: HP
Change Date: March 22, 2012 05:30PM

jQuery Mobile 的 CSS 設定設定說明與重點apsible-set)首頁設計為例
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>設計目標樣版與設計練習範例：

<img src="http://mepopedia.com/forum/file.php?983,file=1032,filename=Mobile_Design_-_DUNGS.gif">　<img src="http://mepopedia.com/forum/file.php?983,file=1033,filename=Mobile_Design_-_tamweb.gif" align=right>

1. 設定 CSS Class：.ui-bar-a

.ui-bar-a {
border: none;
border-bottom: 1px solid #003C64;
background: #0070B8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0071B8),color-stop(1, #004370));
background-image: -webkit-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -moz-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -ms-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -o-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: linear-gradient(top, #0071B8 0%, #004370 100%);
}

<img src="http://mepopedia.com/~jinjin/tamweb/design1.gif">

<h2>設定「按鈕 / BUTTON」</h2>
<h3>預設狀態與按下滑鼠時</h3>
CSS Class: .ui-btn-up

「ui-btn-up」　設定的是當滑鼠按下後「放開」的當下和之後的狀態。所以一般就是作為頁面初始「一般狀態」的設定。
「u-btn-down」設定的是當滑鼠「按下」的當下的狀態。一般在視覺上會將顏色設定地重一些，或者設定地和「ui-btn-up」一樣。（例如此例中就設定為相同）

上方漸層起始顏色：#0071B8
下方漸層終止顏色：#004370

無漸層時背景顏色：#0070B8
<pre>
.ui-btn-up-c, .ui-btn-down-c {
border: none;
border-bottom: 1px solid #003C64;
background: #0070B8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0071B8),color-stop(1, #004370));
background-image: -webkit-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -moz-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -ms-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -o-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: linear-gradient(top, #0071B8 0%, #004370 100%);
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design2.gif">

<h3>當滑鼠移至上方時</h3>
CSS Class: .ui-btn-hover

<pre>
.ui-btn-hover-a {
border: none;
border-bottom: 1px solid #728fa2;
background: #d9e9f3;
color: #005389;
text-shadow: 0 -1px 1px #FFFFFF;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(217,233,243)),color-stop(1, rgb(153,193,217)));
background-image: -webkit-linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
background-image: -moz-linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
background-image: -ms-linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
background-image: -o-linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
background-image: linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design3.gif">功能列(collapsible-set)的文字如下的調整：
<pre>.ui-collapsible-heading a .ui-btn-inner {
padding-left: 56px; /* 原本為 40px */
}

</pre>
<h2>加入自動置中圖片</h2>
<h3>HTML</h3>
<xmp><div data-role="content">
<div class="center-image">
<img src="圖片網址" width="600" height="140" alt="背景圖片">
</div>
......
</div></xmp>

<img src="http://mepopedia.com/~jinjin/tamweb/design4.gif">

<h3>CSS 設定</h3>
第一步：讓將圖片置中的 DIV 設定寬度只有 1px。同時，再讓 DIV 自己置中(margin: 0 auto;)，並且裡面的圖片(或其他內容)可以自由延伸(overflow: visible)。
<pre>
.center-image {
width: 1px;
overflow: visible;
margin: 0 auto;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design5.gif">

第二步：設定完後，再將寬度為 600px 的圖片 (.center-image img)，以「一半的寬度」(300px)，向左邊移回來 (margin-left: -300px)。
<pre>.center-image img {
margin-left: -300px;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design6.gif"><pre>自己置中(margin: 0 auto;)，並且.ui-collapsible-set {
margin: 0; /*原本是 margin: 0.5em 0;*/
}
</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design6.gif">

<h2>加入自動置中圖片</h2>
<h3>HTML</h3>
<xmp><div data-role="content">
<div5class="center-image">
<img src="圖片網址" width="600" height="140" alt="背景圖片">
</div>
......
</div></xmp>

<img src="http://mepopedia.com/~jinjin/t<img src="http://mepopedia.com/~jinjin/tamweb/design6.gif">amweb/design7.gif">

<h3>CSS 設定</h3>
第一步：讓將圖片置中的 DIV 設定寬度只有 1px。同時，再讓 DIV 自己置中（margin: 0 auto）;，並且裡面的圖片(或其他內容)可以自由延伸(overflow: visible)。
<pre>
.center-image {
width: 1px;
overflow: visible;
margin: 0 auto;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design8.gif">

第二步：設定完後，再將寬度為 600px 的圖片 (.center-image img)，以「一半的寬度」(300px)，向左邊移回來 (margin-left: -300px)。
<pre>.center-image img {
margin-left: -300px;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design9.gif">

<h3>解決圖片下方間隙</h3>
最後，我們可以發現圖片下方與可開闔功能列 (collapsible set) 之間有一條小間隙。這就是著名的「<a href=http://mepopedia.com/forum/read.php?844,20008>圖片下方間隙問題</a>」。解決的方法有好幾個，我們這邊採用改變圖片呈現屬性，也就是將圖片設為「display: block;」的方法。
<pre>.center-image img {
margin-left: -300px;
display: block;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design10.gif">

如此，圖片的設定就大功告成了。
Changed By: HP
Change Date: March 22, 2012 04:09PM

jQuery Mobile 的 CSS 設定設定說明與重點apsible-set)首頁設計為例
<br/><br/><br/>設計目標樣版與設計練習範例：

<img src="http://mepopedia.com/forum/file.php?983,file=1032,filename=Mobile_Design_-_DUNGS.gif">　<img src="http://mepopedia.com/forum/file.php?983,file=1033,filename=Mobile_Design_-_tamweb.gif" align=right>

1. 設定 CSS Class：.ui-bar-a

.ui-bar-a {
border: none;
border-bottom: 1px solid #003C64;
background: #0070B8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0071B8),color-stop(1, #004370));
background-image: -webkit-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -moz-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -ms-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -o-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: linear-gradient(top, #0071B8 0%, #004370 100%);
}

<img src="http://mepopedia.com/~jinjin/tamweb/design1.gif">

2. 設定「按鈕 鈕 設定「按鈕 / h2>
<h3>預設狀態與按下滑鼠時</h3>
鼠時</h3>
CSS Class: .ui-btn-up

「ui-btn-up」　設定的是當滑鼠按下後「放開」的當下和之後的狀態。所以一般就是作為頁面初始「一般狀態」的設定。
「u-btn-down」設定的是當滑鼠「按下」的當下的狀態。一般在視覺上會將顏色設定地重一些，或者設定地和「ui-btn-up」一樣。（例如此例中就設定為相同）

上方漸層起始顏色：#0071B8
下方漸層終止顏色：#004370

無漸層時背景顏色：#0070B8
<pre>
.ui-btn-up-c, .ui-btn-down-c {
border: none;
border-bottom: 1px solid #003C64;
background: #0070B8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0071B8),color-stop(1, #004370));
background-image: -webkit-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -moz-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -ms-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -o-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: linear-gradient(top, #0071B8 0%, #004370}
}</pre>
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/desig

<h3>當滑鼠移至上方時</h3>
CSS Class: .ui-btn-hover

<pre>
.ui-btn-hover-a {
border: none;
border-bottom: 1px solid #728fa2;
background: #d9e9f3;
color: #005389;
text-shadow: 0 -1px 1px #FFFFFF;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(217,233,243)),color-stop(1, rgb(153,193,217)));
background-image: -webkit-linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
background-image: -moz-linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
background-image: -ms-linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
background-image: -o-linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
background-image: linear-gradient(top, rgb(217,233,243) 0%, rgb(153,193,217) 100%);
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design3.gif">n3.gif"><pre>自己置中(margin: 0 auto;)，並且.ui-collapsible-set {
margin: 0; /*原本是 margin: 0.5em 0;*/
}
</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design6.gif">

<h2>加入自動置中圖片</h2>
<h3>HTML</h3>
<xmp><div data-role="content">
<div5class="center-image">
<img src="圖片網址" width="600" height="140" alt="背景圖片">
</div>
......
</div></xmp>

<img src="http://mepopedia.com/~jinjin/t<img src="http://mepopedia.com/~jinjin/tamweb/design6.gif">amweb/design7.gif">

<h3>CSS 設定</h3>
第一步：讓將圖片置中的 DIV 設定寬度只有 1px。同時，再讓 DIV 自己置中（margin: 0 auto）;，並且裡面的圖片(或其他內容)可以自由延伸(overflow: visible)。
<pre>
.center-image {
width: 1px;
overflow: visible;
margin: 0 auto;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design8.gif">

第二步：設定完後，再將寬度為 600px 的圖片 (.center-image img)，以「一半的寬度」(300px)，向左邊移回來 (margin-left: -300px)。
<pre>.center-image img {
margin-left: -300px;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design9.gif">

<h3>解決圖片下方間隙</h3>
最後，我們可以發現圖片下方與可開闔功能列 (collapsible set) 之間有一條小間隙。這就是著名的「<a href=http://mepopedia.com/forum/read.php?844,20008>圖片下方間隙問題</a>」。解決的方法有好幾個，我們這邊採用改變圖片呈現屬性，也就是將圖片設為「display: block;」的方法。
<pre>.center-image img {
margin-left: -300px;
display: block;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design10.gif">

如此，圖片的設定就大功告成了。
Changed By: HP
Change Date: March 19, 2012 05:47PM

jQuery Mobile 的 CSS 設定使用說明與定說明與重點apsible-set)首頁設計為例
設計目標樣版與設計練習範例：

　

1. 設定 CSS Class：.ui-bar-a

.ui-bar-a {
border: none;
border-bottom: 1px solid #003C64;
background: #0070B8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0071B8),color-stop(1, #004370));
background-image: -webkit-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -moz-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -ms-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -o-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: linear-gradient(top, #0071B8 0%, #004370 100%);
}



2. 設定「按鈕 設定「按鈕 / 鼠時
CSS Class: .ui-btn-up

「ui-btn-up」　設定的是當滑鼠按下後「放開」的當下和之後的狀態。所以一般就是作為頁面初始「一般狀態」的設定。
「u-btn-down」設定的是當滑鼠「按下」的當下的狀態。一般在視覺上會將顏色設定地重一些，或者設定地和「ui-btn-up」一樣。（例如此例中就設定為相同）

上方漸層起始顏色：#0071B8
下方漸層終止顏色：#004370

無漸層時背景顏色：#0070B8


.ui-btn-up-c, .ui-btn-down-c {

	border: none;

	border-bottom: 1px solid #003C64;

	background: #0070B8;

	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0071B8),color-stop(1, #004370));

	background-image: -webkit-linear-gradient(top, #0071B8 0%, #004370 100%);

	background-image: -moz-linear-gradient(top, #0071B8 0%, #004370 100%);

	background-image: -ms-linear-gradient(top, #0071B8 0%, #004370 100%);

	background-image: -o-linear-gradient(top, #0071B8 0%, #004370 100%);

	background-image: linear-gradient(top, #0071B8 0%, #004370}

}


自己置中(margin: 0 auto;)，並且.ui-collapsible-set {

    margin: 0; /*原本是 margin: 0.5em 0;*/

}




加入自動置中圖片


HTML


<div data-role="content"><br /> <div5class="center-image"><br /> <img src="圖片網址" width="600" height="140" alt="背景圖片"><br /> </div><br /> ......<br /> </div>

amweb/design7.gif">

CSS 設定


第一步：讓將圖片置中的 DIV 設定寬度只有 1px。同時，再讓 DIV 自己置中（margin: 0 auto）;，並且裡面的圖片(或其他內容)可以自由延伸(overflow: visible)。


.center-image {

	width: 1px;

	overflow: visible;

	margin: 0 auto;    

}




第二步：設定完後，再將寬度為 600px 的圖片 (.center-image img)，以「一半的寬度」(300px)，向左邊移回來 (margin-left: -300px)。
.center-image img {

	margin-left: -300px;

}




解決圖片下方間隙


最後，我們可以發現圖片下方與可開闔功能列 (collapsible set) 之間有一條小間隙。這就是著名的「圖片下方間隙問題」。解決的方法有好幾個，我們這邊採用改變圖片呈現屬性，也就是將圖片設為「display: block;」的方法。
.center-image img {

	margin-left: -300px;

	display: block;

}




如此，圖片的設定就大功告成了。
Changed By: HP
Change Date: March 19, 2012 05:28PM

jQuery Mobile 的 CSS 設定使用定說明與重點apsible-set)首頁設計為例
設計目標樣版：

<img src="">設計目標樣版與設計練習範例：

<img src="http://mepopedia.com/forum/file.php?983,file=1032,filename=Mobile_Design_-_DUNGS.gif">　<img src="http://mepopedia.com/forum/file.php?983,file=1033,filename=Mobile_Design_-_tamweb.gif" align=right>

1. 設定 CSS Class：.ui-bar-a

.ui-bar-a {
border: none;
border-bottom: 1px solid #003C64;
background: #0070B8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0071B8),color-stop(1, #004370));
background-image: -webkit-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -moz-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -ms-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -o-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: linear-gradient(top, #0071B8 0%, #004370 100%);
}

<img src="http://mepopedia.com/~jinjin/tamweb/design1.gif">

2. 設定「按鈕 / BUTTON」CSS Class: .ui-btn-up

「ui-btn-up」　設定的是當滑鼠按下後「放開」的當下和之後的狀態。所以一般就是作為頁面初始「一般狀態」的設定。
「u-btn-down」設定的是當滑鼠「按下」的當下的狀態。一般在視覺上會將顏色設定地重一些，或者設定地和「ui-btn-up」一樣。（例如此例中就設定為相同）

.ui-btn-up-c, .ui-btn-down-c {
border: none;
border-bottom: 1px solid #003C64;
background: #0070B8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0071B8),color-stop(1, #004370));
background-image: -webkit-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -moz-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -ms-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: -o-linear-gradient(top, #0071B8 0%, #004370 100%);
background-image: linear-gradient(top, #0071B8 0%, #004370 100%);
}

<img src="http://mepopedia.com/~jinjin/tamweb/design2.gif">
background-image: linear-gradient(top, #0071B8 0%, #004370}
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design3.gif"><pre>自己置中(margin: 0 auto;)，並且.ui-collapsible-set {
margin: 0; /*原本是 margin: 0.5em 0;*/
}
</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design6.gif">

<h2>加入自動置中圖片</h2>
<h3>HTML</h3>
<xmp><div data-role="content">
<div5class="center-image">
<img src="圖片網址" width="600" height="140" alt="背景圖片">
</div>
......
</div></xmp>

<img src="http://mepopedia.com/~jinjin/t<img src="http://mepopedia.com/~jinjin/tamweb/design6.gif">amweb/design7.gif">

<h3>CSS 設定</h3>
第一步：讓將圖片置中的 DIV 設定寬度只有 1px。同時，再讓 DIV 自己置中（margin: 0 auto）;，並且裡面的圖片(或其他內容)可以自由延伸(overflow: visible)。
<pre>
.center-image {
width: 1px;
overflow: visible;
margin: 0 auto;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design8.gif">

第二步：設定完後，再將寬度為 600px 的圖片 (.center-image img)，以「一半的寬度」(300px)，向左邊移回來 (margin-left: -300px)。
<pre>.center-image img {
margin-left: -300px;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design9.gif">

<h3>解決圖片下方間隙</h3>
最後，我們可以發現圖片下方與可開闔功能列 (collapsible set) 之間有一條小間隙。這就是著名的「<a href=http://mepopedia.com/forum/read.php?844,20008>圖片下方間隙問題</a>」。解決的方法有好幾個，我們這邊採用改變圖片呈現屬性，也就是將圖片設為「display: block;」的方法。
<pre>.center-image img {
margin-left: -300px;
display: block;
}</pre>

<img src="http://mepopedia.com/~jinjin/tamweb/design10.gif">

如此，圖片的設定就大功告成了。

Original Message

作者: HP
Date: March 19, 2012 04:09PM

jQuery Mobile 的 CSS 設定使用定說明與重點apsible-set)首頁設計為例
設計目標樣版：


background-image: linear-gradient(top, #0071B8 0%, #004370}
}

自己置中(margin: 0 auto;)，並且.ui-collapsible-set {

    margin: 0; /*原本是 margin: 0.5em 0;*/

}




加入自動置中圖片


HTML


<div data-role="content"><br /> <div5class="center-image"><br /> <img src="圖片網址" width="600" height="140" alt="背景圖片"><br /> </div><br /> ......<br /> </div>

amweb/design7.gif">

CSS 設定


第一步：讓將圖片置中的 DIV 設定寬度只有 1px。同時，再讓 DIV 自己置中（margin: 0 auto）;，並且裡面的圖片(或其他內容)可以自由延伸(overflow: visible)。


.center-image {

	width: 1px;

	overflow: visible;

	margin: 0 auto;    

}




第二步：設定完後，再將寬度為 600px 的圖片 (.center-image img)，以「一半的寬度」(300px)，向左邊移回來 (margin-left: -300px)。
.center-image img {

	margin-left: -300px;

}




解決圖片下方間隙


最後，我們可以發現圖片下方與可開闔功能列 (collapsible set) 之間有一條小間隙。這就是著名的「圖片下方間隙問題」。解決的方法有好幾個，我們這邊採用改變圖片呈現屬性，也就是將圖片設為「display: block;」的方法。
.center-image img {

	margin-left: -300px;

	display: block;

}




如此，圖片的設定就大功告成了。