顧客管理項目まとめ(先端)

30007 ワード
ReadonlyとDispabledの異同ReadonlyとDibledは、フォーム内で使用される2つの属性であり、ユーザーがフォームドメインの内容を変更することができないようにすることができる.しかし、それらの間には小さな違いがあります.
Readonlyはinput(text/password)とtextareaに対してのみ有効であり、disableはすべてのフォーム要素に対して有効であり、select、radio、checkbox、buttonなどを含む.
詳細:http://www.nowamagic.net/html/html_ReadonlyAndDiscabled.php
 
js正則RegExpの例示的な属性lastIndex lastIndex:整数は、次のマッチするアイテムの検索を開始する文字位置を表します.0から計算します.
1 var reg = /cat/g , string = "cat";
2 var btn = document.getElementById("button");
3 btn.onclick = function(){
4 　alert(reg.test(string));
5 }
理由:最初にtrueをクリックして、2回目のクリックはfalseを弾いて、3回目はtrueで、次はfalseです.理由はreg.test(string)が実行するたびに、RegExpの例示的な属性lastIndexが変更されるからです.最初の準備実行時は、lastIndexは0です.初めて実行した後、catにマッチしました.この時、lastIndexは3です.再びマッチングするとラストインデクスから3の場所にマッチングします.その場所は空です.だからマッチングはfalseです.そしてラストインデクスは0になります.ですから、3回目のマッチはtrueです.
解決方法:毎回一回実行するとlastIndex=0になります.あるいは直接字面量で表します./cat/g.test(string)
1 btn.onclick = function(){
2     alert(reg.test(string));
3     reg.lastIndex = 0;   
4 }
 
  • js正則は中国語の漢字文字にマッチしています.
     
  • 不定幅高垂直中心解析
    • 詳細:http://www.cnblogs.com/pingfan1990/p/4551289.html?utm_source=tuicool&utm_medium=referral
     
  • チェックボックスと対応するテキスト配置
    • チェックボックスのmagin-topを微調整したり、左右の外距離を増やすことができます.
    1 .checkbox{
2     vertical-align:middle;
3     margin-top:0;                      
4 }
5 .text{
6      font-family:Tahoma;  
7 }
     
  • Jquery全選択
    • 1 $("[name = allchecked]:checkbox").click(function(){$(":checkbox").attr("checked",this.checked);});
     
  •  js 2進数、8進数、10進数、16進数の間の転換
    • 1 var num = (    ||    ||    ||     );
2 num.parseInt(num,2||8||10||16).toString(2||8||10||16);
    ParseInt()は二つのパラメータを受信して、一つ目は任意の数値numで、二つ目はnum自身が対応する進数で、parseInt()は結果として10進数に変換されます.
    toStering()は前のnumを対応する文字列に変換し、中で一つのパラメータを受け取って、パラメータを変換後の進数に変更すればいいです.パラメータは2、8、10、16です.
     
  • js 16進色値はrgb
    • に変換されます.
     1      function getRGB(color){
 2         var str = color.replace(/#/g,"");
 3         if(str.length==6){
 4             var one6 = parseInt(str[0]+str[1],16);
 5             var two6 = parseInt(str[2]+str[3],16);
 6             var three6 = parseInt(str[4]+str[5],16);
 7             return "rgb("+one6+","+two6+","+three6+")";
 8         }
 9         else if(str.length==3){
10             var one3 = parseInt(str[0]+str[0],16);
11             var two3 = parseInt(str[1]+str[1],16);
12             var three3 = parseInt(str[2]+str[2],16);
13             return "rgb("+one3+","+two3+","+three3+")";
14         }
15         else{
16             return false;
17         }
18     }
     
  • フォーム検証
    • jsコード:
     1                 $("input[data-need='1']").blur(function(){
 2                     var $parent = $(this).parent();
 3                     $parent.find(".formtips").remove();//            ，                
 4                     //      
 5                     if($(this).is(".username")){
 6                             if ($(this).val()==""||$(this).val().length>6) {
 7                                 var eNameMsg = "      6      ";
 8                                 $parent.append(""+eNameMsg+"");
 9                                 //$(this).focus();
10                             }
11                             else{
12                                 if(/(\s|\d)+/g.test($(this).val())){
13                                     var eNameFormatMsg = "            ";
14                                     $parent.append(""+eNameFormatMsg+"");
15                                 }
16                                 else{
17                                     var rMsg = "    ";
18                                     $parent.append(""+rMsg+"");
19                                 }
20                             }
21                     }
22                     //    
23                     if($(this).is(".phone")){
24                             if ($(this).val()==""||!(/^\d{7,12}$/g.test($(this).val()))) {
25                                 var ePhoneMsg = "   7-12      ";
26                                 $parent.append(""+ePhoneMsg+"");
27                                 //$(this).focus();
28                             }
29                             else{
30                                 var rPhoneMsg = "    ";
31                                 $parent.append(""+rPhoneMsg+"");
32                             }
33                     }
34                 });
35                 //       
36                 $(".save").click(function(){
37                     $("input[data-need='1']").trigger('blur');
38                     var errorLenth = $("form .errorMsg").length;
39                     if(errorLenth){
40                         return false;
41                     }
42                     alert("    ,       ");
43                 });
    cssコード:spanのdisplay属性を設定すると、対応情報ボックスの右または下にヒント情報が表示されます.
    1 span{display: inline-block;text-indent: 1em;font-weight: bold;} .errorMsg{color:red;}
2 .rightMsg{color:green;}
     
  • flex互換性の書き方
     1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
 6 <meta content="yes" name="apple-mobile-web-app-capable">
 7 <meta content="black" name="apple-mobile-web-app-status-bar-style">
 8 <meta content="telephone=no" name="format-detection">
 9 <meta content="email=no" name="format-detection">
10 <style type="text/css">
11 /* 
12    flex：        
13    flex-v：       
14    flex-1：          
15    flex-align-center：       
16    flex-pack-center：       
17    flex-pack-justify：       
18       ：ios 4+、android 2.3+、winphone8+
19     */
20 .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
21 .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
22 .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
23 .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
24 .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
25 .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
26 style>
27 head>
28 <body>
29 
30 <div class="flex flex-pack-justify">
31     <div class="flex-1">   div>
32     <div class="flex-1">   div>
33     <div class="flex-1">   div>
34     <div class="flex-1">   div>
35 div>
36 
37 body>
38 html>
     
  • ブラウザがマウスをドラッグしてページ要素が新しいウィンドウで開くことを防ぐためのデフォルト動作
    • .
    <body ondragstart="return false">body>
    具体的には、http://www.runoob.com/jsref/event-ondragstart.html
    Javascriptグローバル変数の使い方