Symfoware

Symfowareについての考察blog

JavaScript 連想配列の先頭に要素を追加する(jQuery UIダイアログのボタンを先頭に追加)

ことの発端は、jQuery UIのモーダルダイアログ。
処理によって、ダイアログに表示するボタンを変更したい。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. </head>
  7. <body>
  8.     <h3>Dialog</h3>
  9.     <button id="pattern1">はい</button>
  10.     <button id="pattern2">いいえ、はい</button>
  11.     <div id="dialog-form" title="ダイアログサンプル" style="display:none">
  12.         <p>最初にボタンを追加したい!</p>
  13.     </div>
  14.     
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  17. <script>
  18. $(function() {
  19.     
  20.     $('#pattern1').on('click', function() {
  21.         const dialog = $( "#dialog-form" ).dialog({
  22.             buttons: {
  23.                 'はい': () => {
  24.                     dialog.dialog('close');
  25.                 }
  26.             }
  27.         });
  28.     });
  29.     $('#pattern2').on('click', function() {
  30.         const dialog = $( "#dialog-form" ).dialog({
  31.             buttons: {
  32.                 'いいえ': () => {
  33.                     dialog.dialog('close');
  34.                 },
  35.                 'はい': () => {
  36.                     dialog.dialog('close');
  37.                 }
  38.             }
  39.         });
  40.     });
  41.     
  42. })
  43. </script>
  44. </body>



「はい」をクリックしたとき。

910_01.png

「いいえ、はい」をクリックしたとき。

910_02.png


こんな感じで、ダイアログ表示部分を共通化したとします。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. </head>
  7. <body>
  8.     <h3>Dialog</h3>
  9.     <button id="pattern1">はい</button>
  10.     <button id="pattern2">いいえ、はい</button>
  11.     <div id="dialog-form" title="ダイアログサンプル" style="display:none">
  12.         <p>最初にボタンを追加したい!</p>
  13.     </div>
  14.     
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  17. <script>
  18. $(function() {
  19.     
  20.     $('#pattern1').on('click', function() {
  21.         show_dialog('pattern1');
  22.     });
  23.     $('#pattern2').on('click', function() {
  24.         show_dialog('pattern2');
  25.     });
  26.     const show_dialog = (mode) => {
  27.         let buttons;
  28.         switch(mode) {
  29.             case 'pattern1':
  30.                 buttons = {
  31.                     'はい': () => {
  32.                         dialog.dialog('close');
  33.                     }
  34.                 };
  35.             break;
  36.             case 'pattern2':
  37.                 buttons = {
  38.                     'いいえ': () => {
  39.                         dialog.dialog('close');
  40.                     },
  41.                     'はい': () => {
  42.                         dialog.dialog('close');
  43.                     }
  44.                 };
  45.             break;
  46.         }
  47.         const dialog = $( "#dialog-form" ).dialog({
  48.             buttons: buttons
  49.         });
  50.     };
  51.     
  52. })
  53. </script>
  54. </body>




addFirstというか、連想配列の先頭に要素を追加できれば便利なのに。
※このプログラムは動きません。


  1.     const show_dialog = (mode) => {
  2.         let buttons = {
  3.             'はい': () => {
  4.                 dialog.dialog('close');
  5.             }
  6.         };
  7.         switch(mode) {
  8.             case 'pattern1':
  9.                 // nothing
  10.             break;
  11.             case 'pattern2':
  12.                 buttons.addFirst({
  13.                     'いいえ': () => {
  14.                         dialog.dialog('close');
  15.                     }
  16.                 });
  17.             break;
  18.         }
  19.         const dialog = $( "#dialog-form" ).dialog({
  20.             buttons: buttons
  21.         });
  22.     };






Object.assign()



こちらが参考になりました。
連想配列などのオブジェクトの値をマージするにはObject.assign()を利用する


Object.assign([最初に追加したい配列], [既存の配列])



以下のように修正しました。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. </head>
  7. <body>
  8.     <h3>Dialog</h3>
  9.     <button id="pattern1">はい</button>
  10.     <button id="pattern2">いいえ、はい</button>
  11.     <div id="dialog-form" title="ダイアログサンプル" style="display:none">
  12.         <p>最初にボタンを追加したい!</p>
  13.     </div>
  14.     
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  17. <script>
  18. $(function() {
  19.     
  20.     $('#pattern1').on('click', function() {
  21.         show_dialog('pattern1');
  22.     });
  23.     $('#pattern2').on('click', function() {
  24.         show_dialog('pattern2');
  25.     });
  26.     const show_dialog = (mode) => {
  27.         let buttons = {
  28.             'はい': () => {
  29.                 dialog.dialog('close');
  30.             }
  31.         };
  32.         switch(mode) {
  33.             case 'pattern1':
  34.                 // nothing
  35.             break;
  36.             case 'pattern2':
  37.                 const firstButton = {
  38.                     'いいえ': () => {
  39.                         dialog.dialog('close');
  40.                     }
  41.                 };
  42.                 buttons = Object.assign(firstButton, buttons);
  43.             break;
  44.         }
  45.         const dialog = $( "#dialog-form" ).dialog({
  46.             buttons: buttons
  47.         });
  48.     };
  49.     
  50. })
  51. </script>
  52. </body>



これで望みどおり、「いいえ」ボタンが先頭に追加できました。




$.extend



Object.assign()、一部のブラウザでは対応されていないようです。
Object.assign()

jQueryの$.extendでも同様の効果が得られるようなので試してみます。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. </head>
  7. <body>
  8.     <h3>Dialog</h3>
  9.     <button id="pattern1">はい</button>
  10.     <button id="pattern2">いいえ、はい</button>
  11.     <div id="dialog-form" title="ダイアログサンプル" style="display:none">
  12.         <p>最初にボタンを追加したい!</p>
  13.     </div>
  14.     
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  17. <script>
  18. $(function() {
  19.     
  20.     $('#pattern1').on('click', function() {
  21.         show_dialog('pattern1');
  22.     });
  23.     $('#pattern2').on('click', function() {
  24.         show_dialog('pattern2');
  25.     });
  26.     const show_dialog = (mode) => {
  27.         let buttons = {
  28.             'はい': () => {
  29.                 dialog.dialog('close');
  30.             }
  31.         };
  32.         switch(mode) {
  33.             case 'pattern1':
  34.                 // nothing
  35.             break;
  36.             case 'pattern2':
  37.                 const firstButton = {
  38.                     'いいえ': () => {
  39.                         dialog.dialog('close');
  40.                     }
  41.                 };
  42.                 //buttons = Object.assign(firstButton, buttons);
  43.                 buttons = $.extend(firstButton, buttons);
  44.             break;
  45.         }
  46.         const dialog = $( "#dialog-form" ).dialog({
  47.             buttons: buttons
  48.         });
  49.     };
  50.     
  51. })
  52. </script>
  53. </body>



こちらでも、同様の効果が得られました。


関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/07/11(水) 22:41:40|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Ubuntu 18.04にArduino IDEをインストールして、プログラムをArduinoに書き込む | ホーム | winetricksによるWineの文字化け(アルファベットが豆腐)を解消>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
https://symfoware.blog.fc2.com/tb.php/2229-aed45249
この記事にトラックバックする(FC2ブログユーザー)