タグ別アーカイブ: html

ページ内URLの自動リンク

今回はクライアントからの相談について事前調査です。
内容としては以下の内容になります。
 「サイトにて利用者が入力した内容についてURL が入力されている場合には自動的にリンクにして欲しい」

おおよそ、正規表現を使用するのかとは思うのですが・・・
とりあえずはやってみましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var regex   = /((https?):\/\/[\x21-\x7e]+)/ig;
                var targetTxt;
                var setTxt;

                $('#btn').click( function() {

                    targetTxt = $('#disp').html();
                    setTxt    = targetTxt.replace( regex, '<a href="$1">$1</a>' );

                    $('#disp').html( setTxt );
                    $('#button_area').hide();

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <div id="disp">
                rss version="2.0"
                xmlns:content="http://purl.org/rss/1.0/modules/content/"
                xmlns:wfw="http://wellformedweb.org/CommentAPI/"
                xmlns:dc="http://purl.org/dc/elements/1.1/"
                xmlns:atom="http://www.w3.org/2005/Atom"
                xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
                xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
                
                title JSource /title 
                atom:link href="http://jsource.nakweb.com/?feed=rss2" rel="self" type="application/rss+xml" /
                link http://jsource.nakweb.com /link
                link https://jsource.nakweb.com /link
                description ~ Javascript 備忘録 ~ /description 
                lastBuildDate Sat, 03 Sep 2016 23:15:47 +0000 /lastBuildDate 
                language ja /language
                sy:updatePeriod hourly /sy:updatePeriod
                sy:updateFrequency 1 /sy:updateFrequency
                generator https://wordpress.org/?v=4.5.4 /generator
            </div>
        </div>

        <div id="button_area">
            <button id="btn">Click</button>
        </div>

    </body>
</html>

sample

sample を表示すると適当な文言と Button が表示されます。
Button を Click すると正規表現に設定した条件の部分に a tag を挿入します。

実際の正規表現については「http」か「https」で始まる内容を対象とします。
また 16新数での「x21(!)」から「x7e(~)」までの文字列が続くものが対象です。
簡単に言うと「半角英数字(スペースや特殊な制御文字は除く)」になるかなと思います。

本当はもっと詳しく設定もできるのでしょうが、そこまで詳しくする必要はないかなぁ
とも思っています。
もっと詳しくする場合には改めて再考します(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

プラグインの作成基礎

今回は Plugin の作成の基礎です。
最初は Blig の題材として、無名関数などの調べて見ようかと思っていたんですが
いろいろ調べていると、jQuery ではプラグイン作成をすることが多いようです。

折角なんで Plugin の基礎部分を確認してみました。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            (function($){

                $.fn.sumpleFunction = function ( option ) {

                    var defInit = {
                        text: 'Default Messeage'
                    };

                    var setMessage = $.extend( defInit, option );
                    $('#disp_div').html( setMessage.text );

                    return(this);

                };

            }(jQuery));

            $(function(){

                $('#click_btn1').click( function () {
                    var setText = $('#set_text').val();
                    $('#click_btn1').sumpleFunction({
                        text: setText
                    });
                });

                $('#click_btn2').click( function () {
                    $('#click_btn2').sumpleFunction({});
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="set_text" value="Input Text">
            <button id="click_btn1">Disp Input Text</button>
            <button id="click_btn2">Disp Default Text</button>
        </div>

        <div id="disp_area">
            <div id="disp_div"></div>
        </div>

    </body>
</html>

sample

sample に Button が 2個あります。
「Disp Input Text」を Click すると Text に入力された文字列が、
「Disp Default Text」を Click するとこちらで設定した内容が、
それぞれ表示される形になります。

今までは同じような処理をする場合、1つのファイルにまとめてはいるものの
Plugin の作成はしていなかったのですが、今後はまとめても良いかも・・・

なお、本来なら Plugin に関しては別ファイルに切り分けるのですが、
今回は1つのファイルにて作業しています。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

セレクトボックスの表示内容

今回も備忘録的な内容です。
よくある処理ではありますが、select の操作した処理を取得する処理です。

普通の場合には「$(‘#main_selectoption:selected’)」と云う形で処理を
とるのですが、今回は他との兼ね合いによって $(this) を基本として
処理をありました、いつも通りの作業を使用としましたが・・・

・・・あれ、「$(this)」で括っているためその続きが書けません。
そのため、いつもの方法意外で対応する必要があるのかと思います。
今回はのための方法です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#main_select').click( function() {

                    $objO = $('#main_select option:selected');
                    $('#o_txt').html( $objO.html() );
                    $('#o_val').html( $objO.val() );

                    $objC = $(this).children(':selected');
                    $('#c_txt').html( $objC.html() );
                    $('#c_val').html( $objC.val() );

                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }
            th, td {
                min-width        : 100px;
            }

        --></style>

    </head>
    <body>

        <div id="button_area">
            <select id="main_select">
                <option value="1">TextA</option>
                <option value="2">TextB</option>
                <option value="3">TextC</option>
                <option value="4">TextD</option>
                <option value="5">TextE</option>
            </select>
        </div>

        <div id="main_area">
            <table id="disp_text">
                <tr>
                    <th rowspan="2">$('#main_select option:selected')</th>
                    <th>text</th><td id="o_txt"></td>
                </tr>
                <tr>
                    <th>value</th><td id="o_val"></td>
                </tr>
                <tr>
                    <th rowspan="2">$('this').children(':selected')</th>
                    <th>text</th><td id="c_txt"></td>
                </tr>
                <tr>
                    <th>value</th><td id="c_val"></td>
                </tr>
            </table>
        </div>

    </body>
</html>

sample

sample で Select を変すると選択した内容の Text と Value が表示されます。
今回は、取得の方法が異なるため2種類の Text と Value を表示しています。

この方法で今回は無事に値が取れましたが忘れるといけないので記録しておきます。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

数値の0埋め

今回は備忘録的な内容です。
よくやる内容ではあるのですが「0埋め」処理です。
「0パディング」とも言いますね。

Javascriptで配列情報を操作する際には数値が理想なのかもしれません。
ただ、情報元のキーを考えると、あえて「0埋め」することがあったりします。
また、日時の表示にはよく使う内容です。
今回はそういう場合の覚書です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#button').click( function() {
                    var setNum = $('#number').val();
                    var setPad = ($('#left_pad').val() * -1);
                    if ( $('#left_pad').val() > setNum.length) {
                        setNum = ( '000000000' + setNum ).slice( setPad );
                    }
                    $('#dispNum').html( setNum );
                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">
            <div id="disp_area">
                <span id="dispNum">0</span>
            </div>
            <div id="input_area">
                <input id="number" type="text" value="0">
                <select id="left_pad">
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <button id="button">click</button>
            </div>
        </div>

    </body>
</html>

sample

sample を click すると数字が表示されています。
button がありますが culick すると数字が「0埋め」されて表示されます。

特に特別難しい訳ではありませんが、忘れやすいので改めて記載しておきます。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

PHP/Ajax での認証機能

今回は簡単な認証機能用のフォーム作成です。
実際の認証処理は PHP で行うのですが、PHP で認証した後に内容を出力し
ajax で内容の入れ替えを行います。
まぁ、主となる部分が PHP で行う形なので、本ブログで扱う内容として
「適切なのかな・・・。」とは思いますが(笑)

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $('#exeCheck').click( function () {
                    $.ajax({
                        type     : 'POST',
                        dataType : 'text',
                        url      : 'sample_110.txt',
                        data     : {
                                     id : $('#checkID').val(),
                                     pw : $('#checkPW').val()
                                   }
                    }).done(function(data) {
                        // ajax ok
                        $("#input_area").hide();
                        $("#disp_area").html(data).show();
                    }).fail(function(data) {
                        // ajax error
                        $("#disp_area").html('once more, please');
                    });
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #div {
                margin           : 20px;
            }
            
            #disp_area{
                display          : none;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="input_area">
                ID : <br />
                <input type="text" id="checkID" name="id"><br />
                PASSWORD : <br />
                <input type="password" id="checkPW" name="password"><br />
                <input type="button" id="exeCheck" name="submit" value="Submit">
            </div>
            <div id="disp_area">
            </div>
        </div>

    </body>
</html>

sample

sample では入力欄が2つあります。
ここで適正なID・PASSを入力してPHP 側での処理を行います。
本sample ではPHPを設定していないので何を入力しても正常となりますが(笑)

今回は WordPress にて特定のページだけ認証をしたいとの要望があったため
試験的に試してみました、この Blog では余り相応しくなかったかもしれませんね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。