ホームページ ウェブフロントエンド H5 チュートリアル 指定した複数人の情報を取得するHTML5アドレス帳を詳しく解説

指定した複数人の情報を取得するHTML5アドレス帳を詳しく解説

May 21, 2017 pm 07:09 PM
html html5

この記事では、指定した複数の人の情報を取得するための HTML5+ アドレス帳の詳細な説明を主に紹介します。これは非常に実用的で、困っている友人が参照することができます。

この記事では、指定した複数の人の情報を取得するための HTML5 アドレス帳を紹介します。詳細は次のとおりです。

1. 複数の人の情報をアドレス帳にインポートする前に、次のことが必要です。複数の人の情報を取得するという問題を解決します。 plus.contacts.getAddressBookとaddress.findのアプリケーションを通じてアドレス帳内のすべての連絡先のIDとdisplayNameを取得し、作成したアドレス帳取得ページを通じて表示しました。

1. この問題を解決するには、まず自分で js アドレス帳を作成する必要があります。これにより、すべての連絡先のイニシャルを分離し、その隣にある必要なイニシャルにジャンプできるようになります。

2. すべての連絡先情報を取得する問題を解決します


plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) { //获取通讯录信息
                // 可通过addressbook进行通讯录操作
                addressbook.find(null, function(contacts) {
                    var username = new Array();
                    var LinkList = new LinkedList();
                    if(contacts.length > 0) { //获取当前通讯录里面所有人
                        for(var i = 0; i < contacts.length; i  ) {
                            username[i] = contacts[i].displayName   "-"   contacts[i].id; //连接id和username,为后面筛选最准备
                        }
                        //这下面的代码是把所有联系人的信息分类,这就涉及到了自己写的JS页面代码
                        LinkList = sortPY(username); //把联系人数组分类
                        //LinkList.show();
                        createLiCheckBox(LinkList); //分类信息显示至页面,我使用checkBox进行多个联系人选择
                    }

                }, function(e) {
                    alert("Find contact error: "   e.message);
                });

            }, function(e) {

    });

2. アドレス帳から複数の選択した個人情報をインポートする: この問題を解決するには、アドレス帳ページを作成するときに連絡先 ID を入力する必要があります。ページ (display を使用して非表示) では、選択した checkBox を取得するときに ID を直接取得し、これらの ID を配列に入れることができます。次に、plus.contacts.getAddressBook および address.find のアプリケーションを通じて、これらの ID の連絡先情報をフィルターで除外します。

1. checkBox を使用して連絡先 ID を取得する問題を解決するために、ここでは JQuery を使用しました。


//筛选已经被选中的checkbox
    $("input:checked").each(function() {
            var index = $(this).parent().prev().children(&#39;label&#39;).text(); //获取id
            var name = $(this).parent().prev().children(&#39;p&#39;).text(); //获取姓名
            username.push(name);
            usernameIndex.push(index);
    });

2. これらのインデックスを検索に入れて情報をフィルタリングし、特定の ID で連絡先情報を取り出す問題を解決します


plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) { //获取通讯录信息
            for(var j = 0; j < username.length; j  ) {//循环所选取的联系人,记得循环一定要放在这里,一开始我放在        plus.contacts.getAddressBook外面是错误
                        addressbook.find(null, function(contacts) {
                            console.log("进入查询");
                            for(var i = 0; i < contacts.length; i  ) {//无论是否为多个信息,一定要循环数组
                                console.log("进入循环");
                                //var id = contacts[i].id;
                                var displayname = contacts[i].displayName;
                                var phone = "";
                                var emails = "";
                                var dates = "";
                                var remark = "";
                                if(contacts[i].phoneNumbers.length > 0) {//这里需要判断是否为空,为空的数组没有index=0;
                                    phone = contacts[i].phoneNumbers[0].value;
                                } else {
                                    phone = contacts[i].phoneNumbers;
                                }

                                if(contacts[i].emails.length > 0) {//这里需要判断是否为空,为空的数组没有index=0;
                                    emails = contacts[i].emails[0].value;
                                } else {
                                    emails = contacts[i].emails;
                                }

                                var dateNum = new Date(contacts[i].birthday);//这里的birthday是number类型!!!官方手册坑爹?
                                dates = dateNum.getFullYear()   "."   (dateNum.getMonth()   1)   "."   dateNum.getDate();
                                remark = contacts[i].note;

                                var getContact = {//把所有信息放到一个json里面
                                    contactName: displayname,
                                    sex: "",
                                    department: "",
                                    positions: "",
                                    tel: "",
                                    phone: phone,
                                    eMail: emails,
                                    birthday: dates,
                                    hobby: "",
                                    remark: remark
                                };

                                //这下面是我的业务代码了,这里大家可以写自己的信息
                                //createContactTable(db);
                                //InsertContact(db, getContact); //多个信息插入有线程安全的问题出现!!!!!!!
                            }
                            //console.log(username.length);                         
                        }, function(e) {
                            console.log("查询错误");
                        }, {  
                                                         //这里面的筛选非常重要!!!这样才能选出匹配的信息
                            filter: [{
                                logic: "or",
                                field: "id",
                                value: usernameIndex[j]
                            }],
                            multi: false
                        });
                    }
                }, function(e) {
                    console.log("打开通讯录错误");
                });

以上が指定した複数人の情報を取得するHTML5アドレス帳を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML5データ属性とは何ですか? HTML5データ属性とは何ですか? Aug 06, 2025 pm 05:39 PM

html5dataattributesarecustom、validhtmlattributesusedTostoreExtrainformationinelements forjavasdatorcss.1.theyReadefinedassdata-*属性、Likedata-user-id = "123" .2.theyallowembembembedprivate

HTML5での基本的な図面にCanvas APIを使用する方法は? HTML5での基本的な図面にCanvas APIを使用する方法は? Aug 07, 2025 am 07:15 AM

基本的な図面にHTML5CANVAS APIを使用するには、最初にHTMLにキャンバス要素を作成し、幅と高さ属性を設定し、次にJavaScriptを使用して2Dレンダリングコンテキストを取得します。 1. fillrect、strokerect、およびclearRectを使用して描画してクリアします。 2。BeginPath、Moveto、Lineto、Closepathを通じてパスを作成し、ラインまたはカスタムシェイプを描画します。 3.アークを使用してサークルまたはアークを描画します。 4. filltextとstroketextを使用して、フィルまたはストロークテキストを追加します。 5.塗りつぶし、ストロークスタイル、リンをセットします

HTML5の読み取り属性は何ですか? HTML5の読み取り属性は何ですか? Aug 08, 2025 am 11:55 AM

thereadonlyattributionhtml5makesforminputsnon-edable whilestallowingsubmissionanduser interaction; 1. itappliestoanttribute;

HTML IDとクラスの違いは何ですか HTML IDとクラスの違いは何ですか Aug 07, 2025 am 12:03 AM

IDは一意でなければなりません。各ページの1つのIDは1つの要素にのみ使用でき、クラスは複数の要素で再利用でき、1つの要素に複数のクラスを持つことができます。 2。IDを使用したシナリオには、次のものが含まれます。単一の特定の要素の配置、ページ内のリンクアンカー、JavaScriptはIDを介して要素を操作し、フォーム要素に関連付けられたラベルを操作します。クラスを使用したシナリオには、次のものが含まれます。同じスタイルまたは動作を複数の要素に適用し、再利用可能なUIコンポーネントを構築し、JavaScriptで複数の要素を選択します。 3。CSSでは、ターゲティングは#IDセレクターと.classセレクターによってそれぞれ行われます。GetElementByID()はID、getElemeに使用されます

HTMLのWebサイトタイトルタイトルにアイコンを追加する方法 HTMLのWebサイトタイトルタイトルにアイコンを追加する方法 Aug 07, 2025 pm 11:30 PM

Webサイトタイトルバーにアイコンを追加するには、HTMLの一部でFaviconファイルをリンクする必要があります。特定の手順は次のとおりです。1。16x16または32x32ピクセルアイコンファイルを準備します。 Favicon.icoを使用して名前を付けてWebサイトのルートディレクトリに配置するか、PNGやSVGなどの最新の形式を使用することをお勧めします。 2。PNGやSVG形式などのHTMLにリンクタグを追加すると、それに応じて型属性を調整します。 3.オプションで、Appletouchiconなどのモバイルデバイスに高解像度アイコンを追加し、サイズ属性を介してさまざまなサイズを指定します。 4.ベストプラクティスに従って、ルートディレクトリにアイコンを配置して自動検出を確認し、更新後にブラウザキャッシュをクリアし、ファイルパスの正しさを確認します。

HTML5フォームでカラーピッカーを作成する方法は? HTML5フォームでカラーピッカーを作成する方法は? Aug 08, 2025 am 03:48 AM

type = "color"を使用して、HTML5カラーセレクターを作成します。1。カラー入力を追加します。 2。値属性を使用してデフォルトの色値を設定できます(#ffffffなどの7文字の16進形式である必要があります)。 3.すべての最新のブラウザはそれをサポートし、古いブラウザはテキスト入力に戻ります。 4. JavaScriptを使用して、色の変更をリアルタイムでプレビューできます。 5。アクセシビリティを改善するためにラベルタグを追加する必要があり、JavaScriptライブラリを使用して、必要に応じてダウングレードサポートを提供できます。この方法は、シンプルで効果的で、広くサポートされています。

HTML5に基本的な連絡フォームを実装する方法は? HTML5に基本的な連絡フォームを実装する方法は? Aug 08, 2025 am 04:57 AM

要素を使用して、アクション、メソッドなどのプロパティを設定して、データの提出アドレスとメソッドを指定します。 2。Type= "Email"などのHTML5入力タイプを追加して、セマンティクスと基本的な検証を実現するために必要な属性を追加します。 3.属性のラベルを介して入力ボックスIDに関連し、アクセシビリティを改善し、タグと入力ボックスの各セットをPまたはDIVでラップして構造を最適化します。 4。フォームの提出にはバックエンド処理が必要であり、テスト中にFormspreeなどのサードパーティサービスを交換できます。 5.オプションでは、JavaScriptを介してクライアントの検証を強化しますが、ネイティブのHTML5検証は基本的なニーズを満たし、最後にサーバー側のデータを検証およびクリーニングしてセキュリティを確保します。

HTML5で応答性のあるビデオをどのように作成しますか? HTML5で応答性のあるビデオをどのように作成しますか? Aug 06, 2025 pm 05:28 PM

応答性の高いHTML5ビデオを作成するには、最初にCSSを使用してアスペクト比を制御し、次にコンテナと絶対的な位置を介して適応を実現する必要があります。 1.タグを使用してコントロールを追加し、preload = "metadata"およびその他の属性を追加します。 2。ビデオをビデオで包み込みます。 3. CSSを使用して、容器のパディングボトムを56.25%に設定して、16:9のアスペクト比を維持します。 4.位置を設定:絶対、上:0、左:0、幅:100%、高さ:100%、オブジェクトフィット:ビデオのカバー。 5。

See all articles