ตัวอย่างการใช่งาน bootstrap tags input เบื้องต้น

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
M004
PHP VIP Members
PHP VIP Members
Posts: 1323
Joined: 01/01/1970 7:00 am

ตัวอย่างการใช่งาน bootstrap tags input เบื้องต้น

Post by M004 » 15/01/2014 2:26 pm

ตัวอย่างการใช่งาน bootstrap tags input เบื้องต้น
ขั้นแรก Downloadไฟล์สำหรับการใช้งาน
bootstrap-tagsinput-master-examples.rar
(2.18 MiB) Downloaded 190 times
ไฟล์ ที่เกี่ยวข้องในการใช้งาน เบื้องต้น
- bootstrap-2.3.2/css/bootstrap.min.css
- bootstrap-2.3.2/css/docs.css
- bootstrap-tagsinput.css
- bower_components/jquery/jquery.min.js
- bootstrap-2.3.2/js/bootstrap.min.js
- bootstrap-tagsinput.js
- bootstrap-tagsinput-angular.js
- assets/app_bs2.js
- assets/cities.json
- index.html

ภาพตัวอย่างการใช้งาน
tag.png
tag.png (19.65 KiB) Viewed 1164 times
ตัวอย่าง Code หน้า Index.html

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Tags Input</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <link rel="stylesheet" href="bootstrap-2.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="bootstrap-2.3.2/css/docs.css">
        <link rel="stylesheet" href="bootstrap-tagsinput.css">
        <style>
            .accordion { margin-top:-19px; }
        </style>

    </head>
    <body>
        <div class="example example_objects_as_tags">
            <div class="bs-docs-example">
                <input type="text" />
            </div>
            <div class="accordion">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" href="#accordion_example_objects_as_tags">
                            Show code
                        </a>
                    </div>
                    <div id="accordion_example_objects_as_tags" class="accordion-body collapse">
                        <div class="accordion-inner">

                        </div>
                    </div>
                </div>
            </div>
        </div>

    <script src="bower_components/jquery/jquery.min.js"></script>
    <script src="bootstrap-2.3.2/js/bootstrap.min.js"></script>
    <script src="bootstrap-tagsinput.js"></script>
    <script src="bootstrap-tagsinput-angular.js"></script>
    <script src="assets/app_bs2.js"></script>
</body>
</html>
ตัวอย่าง Code หน้า assets/app_bs2.js

Code: Select all

$('.example_objects_as_tags > > input').tagsinput({
  itemValue: 'value',
  itemText: 'text',
  typeahead: {
    source: function(query) {
      return $.getJSON('assets/cities.json');
    }
  }
});
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    });
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 4 , "text": "Washington"  , "continent": "America"   });
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 7 , "text": "Sydney"      , "continent": "Australia" });
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 10, "text": "Beijing"     , "continent": "Asia"      });
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 13, "text": "Cairo"       , "continent": "Africa"    });
ตัวอย่าง Code หน้า assets/cities.json

Code: Select all

[ { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    },
  { "value": 2 , "text": "London"      , "continent": "Europe"    },
  { "value": 3 , "text": "Paris"       , "continent": "Europe"    },
  { "value": 4 , "text": "Washington"  , "continent": "America"   },
  { "value": 5 , "text": "Mexico City" , "continent": "America"   },
  { "value": 6 , "text": "Buenos Aires", "continent": "America"   },
  { "value": 7 , "text": "Sydney"      , "continent": "Australia" },
  { "value": 8 , "text": "Wellington"  , "continent": "Australia" },
  { "value": 9 , "text": "Canberra"    , "continent": "Australia" },
  { "value": 10, "text": "Beijing"     , "continent": "Asia"      },
  { "value": 11, "text": "New Delhi"   , "continent": "Asia"      },
  { "value": 12, "text": "Kathmandu"   , "continent": "Asia"      },
  { "value": 13, "text": "Cairo"       , "continent": "Africa"    },
  { "value": 14, "text": "Cape Town"   , "continent": "Africa"    },
    { "value": 99, "text": "NPK"   , "continent": "Africa"    },
  { "value": 15, "text": "Kinshasa"    , "continent": "Africa"    }
]
อ้างอิงจาก
http://timschlechter.github.io/bootstra ... /examples/

Return to “Booststap Knowledge”

Users browsing this forum: Google Adsense [Bot] and 5 guests