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

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

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

ภาพประจำตัวสมาชิก
M004
PHP VIP Members
PHP VIP Members
โพสต์: 1323
ลงทะเบียนเมื่อ: 01/01/1970 7:00 am

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

โพสต์โดย M004 » 15/01/2014 2:26 pm

ตัวอย่างการใช่งาน bootstrap tags input เบื้องต้น
ขั้นแรก Downloadไฟล์สำหรับการใช้งาน
bootstrap-tagsinput-master-examples.rar
(2.18 MiB) ดาวน์โหลด 138 ครั้ง


ไฟล์ ที่เกี่ยวข้องในการใช้งาน เบื้องต้น
- 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) เปิดดู 556 ครั้ง


ตัวอย่าง Code หน้า Index.html

โค้ด: เลือกทั้งหมด

<!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

โค้ด: เลือกทั้งหมด

$('.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

โค้ด: เลือกทั้งหมด

[ { "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/

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน