Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML SQL Javascript

    Загружено:

    pattysuarez
    12 просмотров4 страницы
    datos

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    TXT, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    datos

    Авторское право:

    © All Rights Reserved
    Скачайте в формате TXT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    12 просмотров4 страницы

    HTML SQL Javascript

    Загружено:

    pattysuarez
    datos

    Авторское право:

    © All Rights Reserved
    Скачайте в формате TXT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 4

    <!

    DOCTYPE HTML>
    <html>
    <!-@author Ben Poole, http://benpoole.com
    Example HTML5 code for playing with the local WebKit (Opera too?
    ) SQL database.
    @see http://benpoole.com/weblog/201106222227
    -->
    <head>
    <meta charset="UTF-8" />
    <title>Winkles Of The World Unite!</title>

    <style type="text/css">
    body {font-family: Helvetica, sans-serif; font-size: 100%; lineheight: 1.4em}
    input, button {width: 25em; font-size: 100%; padding: .25em}
    </style>

    <script type="text/javascript" src="jquery.js"></script>


    <script type="text/javascript">
    // Generic error callback for db transactions
    var errCallback = function(){
    alert("Oh noes! There haz bin a datamabase error!");
    }

    // Open / initialise the db - this will fail in browsers like Fi


    refox & IE
    var db = openDatabase("winkles", "1.0", "Winkles Of The World",
    32678);

    // Create winkles table if required


    db.transaction(function(transaction){

    transaction.executeSql("CREATE TABLE IF NOT EXISTS winkl


    es (" +
    "id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,"
    +
    "winklename TEXT NOT NULL, location TEXT NOT NUL
    L);");
    });

    // This is the SAVE function


    var saveWinkle = function(winklename, location, successCallback)
    {
    db.transaction(function(transaction){
    transaction.executeSql(("INSERT INTO winkles (wi
    nklename, location) VALUES (?, ?);"),
    [winklename, location], function(transaction, re
    sults){successCallback(results);}, errCallback);
    });
    };

    // This is a LOAD function, which pulls all winkles for a given


    location
    var loadWinkles = function(location, successCallback){
    db.transaction(function(transaction){
    transaction.executeSql(("SELECT * FROM winkles W
    HERE location=?"), [location],
    function(transaction, results){successCa
    llback(results);}, errCallback);
    });
    };

    // Document ready event. Time for some subversive injection, hur


    r hurr
    $(function(){
    var form = $("form");

    // Callback when loading data (@see showWinkles())


    var updatePage = function(results){
    var list = $("#winkle-list");
    list.empty();
    console.dir(results);
    if (results.rows.length==0){
    alert("Alas, there be no winkles here.")
    ;
    } else {
    $.each(results.rows, function(rowIndex){
    var row = results.rows.item(rowI
    ndex);
    list.append( "<li>" + row.winkle
    name + ", " + row.location + "</li>");
    });
    }
    };

    // Override the default form submit in favour of our cod


    e
    form.submit(function(event){
    event.preventDefault();
    saveWinkle($('#winklename').val(), $('#location'
    ).val(), function(){
    alert($('#winklename').val() + "'s data
    has been saved!");
    })
    });

    // Bind winkle listing to a button in the page


    $('#show-me').click(function(){loadWinkles($('#where').v
    al(), updatePage);});
    });
    </script>

    </head>

    <body>
    <h1>Winkles Of The World Unite</h1>
    <p>This wee bit of example code accompanies the blog post, <cite><a href
    ="http://benpoole.com/weblog/201106222227">Off-line web apps: local Web SQL &amp
    ; Javascript</a></cite> over at <a href="http://benpoole.com">benpoole.com</a>.<
    /p>

    <form>
    <h2>Winkle name &amp; location:</h2>
    <p><input type="text" id="winklename" name="winklename" class="n
    ame" placeholder="Winkle name here" /></p>
    <p><input type="text" id="location" name="location" class="locat
    ion" placeholder="Winkle location here" /></p>
    <p><input type="submit" value="Save this winkle" /></p>
    </form>

    <p>Type in a location below &amp; then click the button to see what we&#
    8217;ve got:</p>
    <p><input id="where" name="where" placeholder="Location to check for win
    kles" /></p>
    <p><input type="button" id="show-me" value="Show me the winkles!" /></p>

    <h2>Winkle list</h2>
    <ul id="winkle-list"><!-- set by updatePage() --></ul>
    </body>
    </html>

    Вам также может понравиться