HTML5 & jQuery Mobile 快速開發Cross App 網站 : 2012

CSS 自製浮水印遮蔽效果

此範例是以純文字當作浮水印，也可將文字置換成圖片加上CSS即可達到相同效果

範例如下

主要CSS語法為
-moz-opacity: 0.2; color: red; opacity: 0.2; position: absolute;

我是浮水印張三

我是浮水印王武

我是浮水印騎馬大叔

jQuery + JSON + GoogleMap API 查經緯度


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
  <script>
   jQuery.support.cors = true;  //jquery json cross domain
   function jsonGoogle() {
    if ($("#address").val()!='') {
     $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+encodeURIComponent($("#address").val())+'&sensor=false', function(data) {
      if (data.results.length > 0) 
       $("#god").val(data.results[0].geometry.location.lat+","+data.results[0].geometry.location.lng)
      else 
       $("#god").val("no address");       
     }).error(function(e) { 
      
     
     })


    }
   }
  </script>
    </head>
    <body>
        <form>
   搜尋地點：<input type="text" value="" id="address"/><br />
   結果：<input type="text" value="" id="god"/><br /><input type="button" value="search" id="searchBtn" onclick="jsonGoogle();"/>
  </form>
    </body>
</html>

jQuery常用語法 form & id


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
$(document).ready(function(){

}); //跟body onload相同
$obj.empty() ; // 清空
$obj.children(); // 取得子物件
$obj.clone(); // 複製物件

$obj.blur(function(event){
    if(confirm("是否確定離開此頁面")) {

    }
}); //blur

$obj.append(); // 附加
$obj.val(); //取值
$('#book').toggle('slow', function() {
    // Animation complete.
  });
$obj.find('td:eq(0)');
$obj.find('td .title');
$obj.focus();

$('input:text');取得全部text
$obj.attr('tagName');
$obj.attr('id');
$('input[type=checkbox]:checked'); //取得全部勾選的checkbox
$.each(obj,function(){
  alert($(this).attr("outerHTML"));
});
  </script>
</head>
<body>
  <button>Toggle</button>

<p>slow visible</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});    
</script>
<div id="div1">
</div>
<table>
  <tr><td class="title">td:eq(0)</td></tr>
  
</table>

</body>
</html>

jQuery

jQuery Mobile 跨平台網站 -header, footer, navbar,button

jQuery Mobile是一個能讓你快速開發出跨手機平台的網站好工具

示範如何利用jQuery Mobile官網上的工具快速撰寫出html 進而套用在專案上

使用說明

下列範例使用到項目如下
Page Header, Native bar , Page Footer , Button , HyperLink

幾個重點提示

需先宣告網頁為HTML5格式<!DOCTYPE html> <html>
引用jQueryMobile 官方的 js css
每頁body中開始及結尾需使用jquery mobile規定語法 <div data-role="page" id="page1"></div>
每個item 有相對應的data-role
若要變更theme jquery mobile 提供了六種預設的樣式分別為"","a","b","c","d","e"

Page Header

<div data-theme="b" data-role="header">

<h3>

Header

</h3>

</div>

Page Footer

<div data-theme="a" data-role="footer">
<h3>
Header
</h3>
</div>

Navbar
指定data-iconpos變更button icon的位置
指定data-icon設定button的小圖示標準圖示可參考Button Icon

<div data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="#page1" data-theme="" data-icon="arrow-r">
Button
</a>
</li>
<li>
<a href="#page1" data-theme="" data-icon="plus">
Button
</a>
</li>
</ul>
</div>

Button

指定data-iconpos變更button icon的位置
指定data-icon設定button的小圖示標準圖示可參考Button Icon指定data- transition 變更button換頁效果
各種效果請參考transition

<div data-role="content" style="padding: 15px">
<a data-role="button" data-inline="true" data-transition="slideup" data-theme="a"
href="#page2" data-icon="check" data-iconpos="right">
Button
</a>
</div>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Header
                </h3>
            </div>
            <div data-role="content" style="padding: 15px">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#page1" data-theme="" data-icon="">
                                Item1
                            </a>
                        </li>
                        <li>
                            <a href="#page1" data-theme="" data-icon="arrow-l">
                                Item2
                            </a>
                        </li>
                    </ul>
                </div>
                
                <a data-role="button" data-transition="fade" href="#page1">
                    按鈕
                </a>
                <div>
                    <a href="http://jquerymobile.com" data-transition="fade">
                        jQuery Mobile
                    </a>
                </div>
            </div>
            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>
                    Footer
                </h3>
            </div>
        </div>
        <script>
            //App custom javascript
        </script>
    </body>
</html>

HTML5 WebStorage autocomplete 自動完成使用範例


<!DOCTYPE HTML>

<html>

<head>
<title>HTML5 WebStorage Jquery autocomplete 開發心得 範例</title>
<link rel="stylesheet" href="http://jqueryui.com/demos/autocomplete//css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script src="json.js" type="text/javascript"></script>
<script>
$(function() {
var tags = [
"1234",
"1101",
"2330",
"2317",
"4960",
"4906",
"1102"
];

var tagsStr = JSON.stringify (tags); //將array轉換成json字串
//由於webstorage 只允許儲存一般字串及json字串
setWebStoragedata("tagsStr",tagsStr); //將json字串存入webStorage

$( "#search" ).autocomplete({
source: getWebStoragedata("tagsStr")
});
});

function getWebStoragedata(key) {
var jsonStr = localStorage.getItem(key);//取出webstorage內容
var jsonObj = jQuery.parseJSON(jsonStr) //轉型成jsonObject
return jsonObj;
}

function setWebStoragedata(key,val) {
if (localStorage) {
localStorage.setItem(key,val);
}
}
</script>
</head>

<body>
股號查詢：<input type="text" id="search" />
</body>

</html>

參考網址

jquery.com

jqueryui

2012年9月14日 星期五

CSS 自製浮水印遮蔽效果

jQuery + JSON + GoogleMap API 查經緯度

jQuery常用語法 form & id

jQuery Mobile 跨平台網站 -header, footer, navbar,button

HTML5 WebStorage autocomplete 自動完成 使用範例

2012年9月14日星期五

HTML5 WebStorage autocomplete 自動完成使用範例