11/01
2018
Wallogit.com
2017 © Pedro Peláez
library laravel-thailand-js
From the most popular tool for help user fill the thailand address deploy it for Laravel Framework.
baraear/laravel-thailand-js
From the most popular tool for help user fill the thailand address deploy it for Laravel Framework.
- Thursday, January 11, 2018
- by baraear
- Repository
- 2 Watchers
- 0 Stars
- 0 Installations
- JavaScript
- 0 Dependents
- 0 Suggesters
- 0 Forks
- 0 Open issues
- 2 Versions
- 0 % Grown
The README.md
ThailandJS for Laravel Framework
จากตัวที่กรอกที่อยู่ที่ดีที่สุดในไทยถูกปรับให้ใช้งานกับ Laravel ได้ง่ายขึ้น, (*1)
, (*2)
การติดตั้ง
- คุณสามารถติดตั้งแพคเกจนี้ได้ผ่านทาง Composer
composer require baraear/laravel-thailand-js
- เมื่อติดตั้งเสร็จแล้วให้ทำการเพิ่ม Service Provider ของแพคเกจที่ไฟล์
config/app.php
/* * Package Service Providers... */ Baraear\ThailandJS\ThailandJSServiceProvider::class,
- ทำการเพิ่ม Facade ของแพคเกจที่ไฟล์
config/app.php
/*
* Package Service Providers...
*/
'aliases' => [
'ThailandJS' => Baraear\ThailandJS\ThailandJSFacade::class,
]
- ปรับปรุงไฟล์
autoload.php
composer dump-autoload
การตั้งค่า
- สร้างไฟล์สำหรับการตั้งค่าของแพคเกจ
php artisan vendor:publish --provider="Baraear\ThailandJS\ThailandJSServiceProvider" --tag="config"
- ตรวจสอบการตั้งค่าที่ไฟล์
config/thailandjs.php
<?php
return [
/*
* หากคุณใช้ laravel-mix ในการ compile asset files.
*/
'use-mix' => false,
'path' => [
/*
* ระบุ path ของไฟล์ .js ในกรณีที่คุณไม่ได้ใช้ laravel-mix
*/
'js' => '/js/laravel-thailand-js',
/*
* ระบุ path ของไฟล์ .css ในกรณีที่คุณไม่ได้ใช้ laravel-mix
*/
'css' => '/css/laravel-thailand-js',
],
];
การใช้งาน
1. กรณีที่ไม่ได้ใช้งาน laravel-mix
- คัดลอกไฟล์ resoruces ที่จำเป็นสำหรับใช้งาน
php artisan vendor:publish --provider="Baraear\ThailandJS\ThailandJSServiceProvider" --tag="resources"
- การประกาศใช้งานไฟล์ javascript และ stylesheet ในไฟล์
.blade.php
// สำหรับประกาศใช้งาน stylesheet ทั้งหมดที่จำเป็นจะต้องใช้งาน
{!! ThailandJS::styles(); !!}
// สำหรับประกาศใช้งาน javascript ทั้งหมดที่จำเป็นจะต้องใช้งาน
{!! ThailandJS::scripts(); !!}
หากมีการเปิดใช้งาน
use-mixฟังก์ชั่นดังกล่าวจะไม่ส่งผลใดๆ 3. การประกาศใช้งานฟังก์ชั่นของjquery.Thailand.js, (*3)
/**
* Render ThailandJS JavaScript function.
*
* @param array|string $attributes
* @param string $onLoad
* @param bool $log
*/
{!! ThailandJS::render(['district' => '#demo1 [name="district"]', 'amphoe' => '#demo1 [name="amphoe"]', 'province' => '#demo1 [name="province"]', 'zipcode' => '#demo1 [name="zipcode"]', ], '#loader, .demo', false); !!}
/**
* Render ThailandJS JavaScript search function.
*
* @param string $searchable
* @param string $prepend
* @param string $onLoad
* @param bool $log
*/
{!! ThailandJS::search('#demo2 [name="search"]', '#demo2-output', '#loader, .demo', false); !!}
หากไม่ได้กำหนดพารามิเตอร์แพคเกจจะทำการกำหนดให้ตามแบบตัวอย่างของ
jquery.Thailand.js, (*4)
ตัวอย่างไฟล์ index.html ของ jquery.Thailand.js เมื่อถูกปรับใช้กับ Laravel Framework โหมดกรอกข้อมูล
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery.Thailand.js</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit">
{!! ThailandJS::styles(); !!}
</head>
<body>
<div class="uk-container uk-padding">
<h1>Auto Complete ที่อยู่ อย่างที่มันควรเป็น</h1>
<div id="loader">
<div uk-spinner></div> รอสักครู่ กำลังโหลดฐานข้อมูล...
</div>
<form id="demo1" class="demo" style="display:none;" autocomplete="off" uk-grid >
<div class="uk-width-1-2@m">
<label class="h2">ตำบล / แขวง</label>
<input name="district" class="uk-input uk-width-1-1" type="text">
</div>
<div class="uk-width-1-2@m">
<label class="h2">อำเภอ / เขต</label>
<input name="amphoe" class="uk-input uk-width-1-1" type="text">
</div>
<div class="uk-width-1-2@m">
<label class="h2">จังหวัด</label>
<input name="province" class="uk-input uk-width-1-1" type="text">
</div>
<div class="uk-width-1-2@m">
<label class="h2">รหัสไปรษณีย์</label>
<input name="zipcode" class="uk-input uk-width-1-1" type="text">
</div>
</form>
</div>
{!! ThailandJS::scripts(); !!}
{!! ThailandJS::render(['district' => '#demo1 [name="district"]', 'amphoe' => '#demo1 [name="amphoe"]', 'province' => '#demo1 [name="province"]', 'zipcode' => '#demo1 [name="zipcode"]', ], '#loader, .demo', false); !!}
</body>
</html>
ตัวอย่างไฟล์ index.html ของ jquery.Thailand.js เมื่อถูกปรับใช้กับ Laravel Framework โหมดค้นหา
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery.Thailand.js</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit">
{!! ThailandJS::styles(); !!}
</head>
<body>
<div class="uk-container uk-padding">
<h1>Auto Complete ที่อยู่ อย่างที่มันควรเป็น</h1>
<div id="loader">
<div uk-spinner></div> รอสักครู่ กำลังโหลดฐานข้อมูล...
</div>
<form id="demo2" class="demo" style="display:none;" autocomplete="off">
<label class="h2">ค้นหาที่อยู่ของคุณ</label>
<small>ลองกรอกอย่างใดอย่างหนึ่ง ตำบล, อำเภอ, จังหวัด หรือ รหัสไปรษณีย์</small>
<input name="search" class="uk-input uk-width-1-1" type="text">
<div id="demo2-output" class="uk-margin"></div>
</form>
</div>
{!! ThailandJS::scripts(); !!}
{!! ThailandJS::search('#demo2 [name="search"]', '#demo2-output', '#loader, .demo', false); !!}
</body>
</html>
2. กรณีที่ไม่ได้ใช้งาน laravel-mix
กำลังอยู่ในระหว่างการพัฒนา..., (*5)
การเปลี่ยนแปลง
คุณสามารถตรวจสอบการเปลี่ยนแปลงของแต่ละเวอร์ชั่นได้ที่ CHANGELOG.md., (*6)
การพัฒนา
คุณสามารถตรวจสอบคุณสมบัติใหม่ที่กำลังจะถูกเพิ่มเข้ามาในเวอร์ชั่นถัดไปได้ที่ TODO.md., (*7)
การอนุญาต
แพคเกจ laravel-thailand-js เป็นซอฟต์แวร์โอเพนซอร์สภายใต้การอนุญาต MIT license., (*8)